ReelBack — Social Movie & Book Review Platform

ReelBack is a modern social platform for movie and book lovers — rate everything you watch and read, build your personal library, follow friends, and discover what your community is into. The Reel Strikes Back. 🎬📚

🌐 Live Preview

Experience the live version of ReelBack:

👉 reelback-delta.vercel.app

🚀 Overview

ReelBack unifies movies and books under one roof. Movie data is powered by TMDB and book data by Google Books, while all social features — reviews, libraries, custom lists, follows, and the activity feed — live in Firebase.

The public landing page greets visitors with an animated 3D CSS film reel hero, scroll-reveal sections, and a live trending showcase pulled from real API data — no login required.

💡 Core Features

• ⭐ Rate & Review — Score movies and books, write reviews that help others decide.
• 📚 Personal Library — Track watched, reading, and wishlist shelves without spreadsheets.
• 🗂️ Custom Lists — Curate themed collections, from cozy autumn reads to mind-bending sci-fi.
• 👥 Social Feed — Follow friends and get a real-time feed of their activity, likes, and comments.
• 🔎 Global Search — Find users, movies, and books from a single ⌘K command palette.
• 🎬 Animated Landing — 3D film reel hero (ported from a Claude Design project), framer-motion scroll reveals, live trending carousels.
• 🌍 Bilingual — Full English / Turkish i18n on both frontend and backend, switchable at runtime.
• 🌗 Theming — Light & dark mode with a green brand accent, powered by CSS variables.

🛠️ Tech Stack

Layer	Technologies
⚙️ Framework	React 19 + TypeScript, Vite 7
🎨 Styling	Tailwind CSS v4 (CSS-first config) + shadcn/ui (Radix)
🎞️ Animation	framer-motion + tw-animate-css
🧩 State Management	Zustand + TanStack Query v5
📝 Forms & Validation	react-hook-form + Zod
🧭 Routing	react-router-dom v7
🔐 Auth	Firebase Auth (email + Google)
🗄️ Backend	Firebase Cloud Functions (TypeScript) + Firestore
🎬 Movie Data	TMDB API
📖 Book Data	Google Books API
🌍 i18n	i18next / react-i18next (EN & TR)

🧱 Monorepo Architecture

The repository is split into a frontend SPA and a Firebase backend:

reelback/
├── frontend/                  → React SPA (Vite)
│   ├── public/
│   │   └── locales/           → en.json / tr.json translations
│   └── src/
│       ├── components/ui/     → shadcn/ui primitives (~60 components)
│       ├── layouts/           → App shell (navbar, main layout)
│       ├── stores/            → Zustand stores (auth, user, library, lists, search)
│       ├── providers/         → Auth provider
│       ├── i18n/              → i18next configuration
│       └── modules/           → Feature modules (see below)
│
└── backend/
    ├── firebase.json
    └── functions/src/
        ├── controllers/       → Callable function handlers per domain
        ├── triggers/          → Auth lifecycle triggers
        ├── schemas/           → Zod input validation
        ├── services/          → TMDB / Google Books API clients
        ├── helpers/           → Shared utilities
        └── locales/           → Localized backend messages (EN & TR)

📂 Application Breakdown

🖥️ frontend

• Single-page application built with React 19 + Vite 7.
• Handles:
  • Authentication (Firebase Auth via Zustand store + route guards)
  • Public landing page with live trending data
  • Movie & book discovery, detail pages, reviews
  • Social feed with infinite scroll, likes & comments
  • Profile, custom lists, and library management

⚙️ backend/functions

• Powered by Firebase Cloud Functions (TypeScript).
• Callable endpoints grouped by domain:
  • movie / book — discovery & detail proxies over TMDB and Google Books
  • search — unified user / movie / book search
  • activity — feed activities, likes, comments
  • follow — social graph management
  • userLibrary — shelves & rating persistence
  • auth + triggers — user lifecycle
• Input validation with Zod schemas, localized responses from locales/.

🧩 Modular Architecture

The frontend follows a feature-module architecture through its src/modules/ directory.

Each domain (e.g., landing, auth, movies, books, feed, activity, customLists, search) is built as a self-contained feature module:

• ui/components/ → Feature-specific UI components
• ui/views/ → Page-level compositions rendered by the router
• hooks/ → Feature-specific custom hooks (e.g., use-landing-showcase)
• server/procedures.ts → Typed wrappers around Firebase callable functions
• types.ts → Domain types (TMDB / Google Books shapes)

This structure keeps feature boundaries clean, avoids prop drilling, and lets each domain evolve independently while sharing primitives from components/ui/.

🎬 Landing Page Highlights

• 3D CSS film reel — a perspective-transformed reel with 40 rim segments and an unspooling film strip, spin-synchronized frame animation (filmDuration = spin · 28px / rim circumference).
• framer-motion choreography — staggered hero entrance (copy slides from the left, reel from the right), whileInView scroll reveals, hover micro-interactions.
• Live showcase — trending movies & popular books fetched anonymously with skeleton loading and graceful API-failure fallbacks.
• Accessible motion — all animations respect prefers-reduced-motion.

🌍 Internationalization

• All UI copy lives in frontend/public/locales/en.json and tr.json (single flat namespace).
• Components consume keys via useTranslation("translation", { keyPrefix: "..." }).
• Movie metadata follows the active locale (TMDB language parameter).
• The backend returns localized messages from functions/src/locales/.

🚀 Getting Started

Prerequisites

• Node.js 20+
• A Firebase project (Auth + Firestore + Functions enabled)
• API keys for TMDB and Google Books

1. Frontend

cd frontend
npm install

Create frontend/.env with your Firebase web app config:

VITE_FIREBASE_API_KEY=...
VITE_FIREBASE_AUTH_DOMAIN=...
VITE_FIREBASE_PROJECT_ID=...
VITE_FIREBASE_STORAGE_BUCKET=...
VITE_FIREBASE_MESSAGING_SENDER_ID=...
VITE_FIREBASE_APP_ID=...
VITE_FIREBASE_MEASUREMENT_ID=...

npm run dev          # http://localhost:5173
npm run build        # type-check (tsc -b) + production build
npm run preview      # preview the production build
npm run lint         # eslint

2. Backend (Cloud Functions)

cd backend/functions
npm install

The functions read these secrets:

TMDB_API_KEY
GOOGLE_BOOKS_API_KEY
JWT_SECRET
SUPERADMIN_USERNAME
SUPERADMIN_PASSWORD

Set them with the Firebase CLI (firebase functions:secrets:set TMDB_API_KEY, etc. — or a local .env for the emulator), then deploy:

cd backend
firebase deploy --only functions   # predeploy hook builds automatically

📊 Monitoring & Logging

• Firebase console for function logs, Firestore usage, and auth events.
• TanStack Query Devtools-ready data layer for client-side cache inspection.

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to open an issue or submit a pull request.

📄 License

This project is licensed under the MIT License — see the LICENSE file for details.

Created and maintained by Ardaongun.

🪶 Summary

ReelBack brings a social, bilingual, and beautifully animated home for movie and book lovers — unifying ratings, libraries, lists, and community activity under one modular React + Firebase codebase.