Because Letterboxd forgot collaborative lists exist.
A social movie watchlist app for friends to curate and share movies together. Create collaborative lists, save the TikTok/Reel that made you want to watch something, and track your movie journey with friends.
- Collaborative Watchlists — Invite friends to curate lists together (up to 10 members per list)
- Social Links — Attach TikTok, Instagram Reels, or YouTube links to any movie
- Video Embeds — Auto-play attached social videos directly in the app
- Comments & Reviews — Instagram/TikTok style threaded comments with @mentions
- Movie & TV Search — Search millions of titles via TMDB with ratings, cast, and posters
- Watch Status — Toggle between "To Watch" and "Watched" states
- Letterboxd Import — Import your watched movies, ratings, and lists from Letterboxd
- Top 5 Films — Showcase your favorite movies on your profile (Letterboxd style)
- Follow System — Follow users and view their public lists
- Dark Mode — System-aware theme toggle
- Neo-Brutalist UI — Bold, chunky design with hard shadows and vibrant colors
- iOS PWA — Optimized for iOS Safari with proper keyboard handling
| Category | Technology |
|---|---|
| Framework | Next.js 15 (App Router) |
| Database | Firebase Firestore |
| Authentication | Firebase Auth |
| File Storage | Cloudflare R2 |
| Styling | Tailwind CSS, shadcn/ui |
| Movie Data | TMDB API |
- Node.js 18+
- Firebase project with Firestore & Authentication enabled
- Cloudflare R2 bucket (for avatar uploads)
- TMDB API key
Create a .env.local file in the root directory:
# Firebase Client SDK
NEXT_PUBLIC_FIREBASE_API_KEY=your_api_key
NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN=your_project.firebaseapp.com
NEXT_PUBLIC_FIREBASE_PROJECT_ID=your_project_id
NEXT_PUBLIC_FIREBASE_STORAGE_BUCKET=your_project.firebasestorage.app
NEXT_PUBLIC_FIREBASE_MESSAGING_SENDER_ID=your_sender_id
NEXT_PUBLIC_FIREBASE_APP_ID=your_app_id
# Firebase Admin SDK (server-side)
FIREBASE_PROJECT_ID=your_project_id
FIREBASE_CLIENT_EMAIL=firebase-adminsdk-xxx@your_project.iam.gserviceaccount.com
FIREBASE_PRIVATE_KEY="-----BEGIN PRIVATE KEY-----\n...\n-----END PRIVATE KEY-----\n"
# TMDB API
NEXT_PUBLIC_TMDB_ACCESS_TOKEN=your_tmdb_token
# Cloudflare R2
R2_ACCOUNT_ID=your_account_id
R2_ACCESS_KEY_ID=your_access_key
R2_SECRET_ACCESS_KEY=your_secret_key
R2_BUCKET_NAME=your_bucket_name
R2_PUBLIC_URL=https://your-bucket.r2.dev# Clone the repository
git clone https://github.com/rayidali/cinechrony.git
# Navigate to the project
cd cinechrony
# Install dependencies
npm install
# Start the development server
npm run devOpen http://localhost:3000 to view the app.
src/
├── app/
│ ├── (auth)/ # Login & signup pages
│ ├── home/ # Main dashboard
│ ├── lists/ # Watchlist pages
│ ├── movie/[tmdbId]/ # Movie pages (comments)
│ ├── profile/ # User profile
│ ├── [username]/ # Public profile pages
│ └── onboarding/ # New user onboarding + Letterboxd import
├── components/
│ ├── ui/ # shadcn components
│ └── ... # Feature components
├── firebase/
│ ├── index.ts # Client SDK
│ ├── admin.ts # Admin SDK
│ └── provider.tsx # Auth context
└── lib/
└── types.ts # TypeScript definitions
Cinechrony uses a neo-brutalist design language:
| Element | Style |
|---|---|
| Primary Color | Blue (#2962FF) |
| Accent Color | Orange (CTAs) |
| Typography | Space Grotesk (headlines), Space Mono (body) |
| Borders | 3px solid black |
| Shadows | Hard drop shadows — 4px 4px 0px 0px #000 |
| Interactions | Physical press effect on buttons |
Contributions are welcome. Please open an issue first to discuss what you would like to change.
This project is licensed under the MIT License. See the LICENSE file for details.
Made with coffee and questionable movie taste.