Deployment Overview

​

Architecture Overview

┌─────────────────────────────────────────────────────────────┐
│                      User's Browser                         │
└──────────────────────┬──────────────────────────────────────┘
                       │
                       ▼
┌─────────────────────────────────────────────────────────────┐
│                  Vercel (Next.js App)                       │
│  • Server-side rendering                                    │
│  • API routes (/api/photos/*)                              │
│  • Authentication middleware                                │
│  • Static asset serving                                     │
└───────────┬──────────────────────┬──────────────────────────┘
            │                      │
            ▼                      ▼
┌───────────────────┐    ┌──────────────────────┐
│ Supabase          │    │  Vercel Blob         │
│ • PostgreSQL DB   │    │  • Photo storage     │
│ • Authentication  │    │  • Public URLs       │
│ • Row-level       │    │  • CDN delivery      │
│   security        │    └──────────────────────┘
└───────────────────┘

​

Required Services

​

Vercel

• Automatic deployments from Git
• Server-side rendering and API routes
• Edge network for global performance
• Analytics integration

​

Supabase

• PostgreSQL database for albums and photo metadata
• Built-in authentication (email/password, OAuth)
• Row-level security policies
• Real-time capabilities

​

Vercel Blob

• Scalable object storage for photos
• Automatic CDN distribution
• Public URL generation
• Integrated with Vercel platform

​

Prerequisites

​

Deployment Steps Overview

​

Production Considerations

​

Performance

• Image Optimization: Next.js config uses unoptimized: true. For production, consider enabling optimization or using a custom image CDN
• Database Indexing: Add indexes on frequently queried columns (user_id, album_id)
• Connection Pooling: Supabase provides built-in connection pooling for scalability

​

Scalability

• Vercel Blob Limits: Free tier has storage and bandwidth limits. Monitor usage in Vercel dashboard
• Supabase Database: Free tier includes 500MB database. Plan for upgrades as user base grows
• Rate Limiting: Implement rate limiting on upload endpoints to prevent abuse

​

Monitoring

• Vercel Analytics: Already integrated via @vercel/analytics/next (app/layout.tsx:3)
• Error Tracking: Consider adding Sentry or similar for production error monitoring
• Database Metrics: Use Supabase dashboard to monitor query performance

​

Backup & Recovery

• Database Backups: Supabase Pro tier includes daily backups. Free tier requires manual exports
• Blob Storage: Vercel Blob doesn’t provide built-in backups. Consider periodic exports of critical images
• Migration Scripts: Keep SQL scripts in version control (scripts/001_create_albums.sql, scripts/002_create_photos.sql)

​

Security Best Practices

​

Environment Variables

• Store all secrets in Vercel environment variables
• Use NEXT_PUBLIC_ prefix only for variables that are safe to expose to the browser
• Rotate API keys periodically

​

Authentication

• Enable email confirmation in Supabase Auth settings for production
• Configure password strength requirements
• Set up OAuth providers (Google, GitHub) for better UX
• Enable 2FA for Supabase and Vercel accounts

​

Database Security

• Row-level security (RLS) is enabled on all tables
• All policies enforce auth.uid() = user_id to prevent data leaks
• Never expose service_role key to the client
• Regularly review and audit RLS policies

​

File Upload Security

• Validate file types and sizes before upload
• Consider adding virus scanning for user-uploaded content
• Implement rate limiting on upload endpoints
• Set appropriate CORS policies

​

API Routes

• All API routes verify user authentication via Supabase
• Authorization checks ensure users can only access their own data
• Proper error handling prevents information disclosure

​

Next Steps