Architecture

🏗️ Architecture Overview

Tech Stack

Frontend: Next.js 15 + Tailwind CSS v4 + Framer Motion
Backend:  Next.js Route Handlers + Server Actions
Database: Supabase (PostgreSQL) + RLS
Auth:     Supabase Auth (Email + Google OAuth)
Cache:    Upstash Redis
CI/CD:    GitHub Actions
Testing:  Vitest

Project Structure

cinestack/
├── src/
│   ├── app/           # Next.js App Router (pages + API)
│   ├── components/    # React components
│   │   ├── layout/    # Navbar, Footer, Hero
│   │   └── ui/        # Reusable UI components
│   ├── lib/           # Utilities & services
│   │   └── tmdb/      # TMDB API (modular)
│   ├── types/         # TypeScript definitions
│   └── actions/       # Server Actions
├── supabase/          # Database schema & migrations
└── .github/           # CI/CD workflows

Key Decisions

Decision	Rationale
Server Components first	Reduce client JS, improve SEO
React Query	Optimistic updates + caching
Supabase RLS	Security at database level
ISR (1 hour)	TMDB data caching
Separate API + Server Actions	GET via routes, POST via actions