🎬 Movflix

Discover movies, shows, and anime — track what you watch, get personalized picks.

---

✨ Features

	Feature
🎥	Browse trending, popular, top-rated, and upcoming movies & TV shows
🔍	Search across millions of titles
🎌	Anime section powered by MyAnimeList — all-time top, current season, popular, real genre filters (Shonen, Seinen, Shoujo…)
📊	Anime enrichment — MAL score, characters, OP/ED themes, related entries injected into show pages
🃏	Swipe to discover — Tinder-style card interface
🤖	Personalized recommendations based on your watch history and favorites
⭐	Star ratings — rate any title 1–5 stars
📋	Favorites, Watchlist & Watched — persisted locally, survive page refresh
📺	Season & episode guides for TV shows
🎭	Full cast & crew with individual filmography pages
📍	Where to Watch — regional streaming provider info
🌐	Multi-language — EN / RU / ES / FR
🌓	Dark / light theme
🔐	Auth via Clerk — sign in with email or Google

---

🛠 Tech Stack

Category	Technology
UI	React 18 + TypeScript
Styling	Tailwind CSS with custom design tokens
State	Redux Toolkit + redux-persist
Server state	TanStack React Query
Auth	Clerk
Routing	React Router v6
Animations	Framer Motion + Swiper
i18n	react-i18next
SEO	react-helmet-async
Data	TMDB API · OMDb API · Jikan API (MAL)
Deploy	GitHub Pages via gh-pages

---

🚀 Getting Started

1. Clone & install

git clone https://github.com/definitelyDefi/movflix.git
cd movflix
npm install

2. Set up environment variables

cp .env.example .env

Then fill in your keys:

Variable	Where to get it
REACT_APP_MOVIES_API_KEY	themoviedb.org → API → v3 auth
REACT_APP_MOVIES_OMDB_API_KEY	omdbapi.com → Free tier
REACT_APP_CLERK_PUBLISHABLE_KEY	dashboard.clerk.com → API Keys

Jikan (anime data) requires no API key.

3. Run

npm start

Open http://localhost:3000/movflix/

---

🔐 Clerk Setup

1. Create a free account at clerk.com
2. Create a new application
3. Enable Email + Password under User & Authentication
4. Copy the Publishable Key (pk_test_...) into .env
5. Add http://localhost:3000 to Allowed origins
6. For production, also add https://definitelydefi.github.io to Allowed origins

---

📦 Deployment

npm run deploy

Builds the app and pushes to the gh-pages branch automatically. Make sure your env vars are set in the terminal session before running — they are baked into the build at compile time.

---

🗂 Project Structure

src/
├── api.ts                  # TMDB + OMDb API calls
├── App.js                  # Root: providers, router, lazy routes
├── components/             # Reusable UI components
│   ├── carousels/          # HeroCarousel, CastCarousel, TileCarousel…
│   └── decorative/         # Preloader, Buttons
├── constants/              # Route definitions
├── helpers/                # Utility functions
├── hooks/                  # useContentFetch, useJikanData, useContinueWatching…
├── lib/
│   └── jikan.ts            # Jikan API v4 client with cache + deduplication
├── pages/                  # Route-level page components
├── store/                  # Redux slices (auth, favorites, watchlist, watched, ratings…)
└── locales/                # i18n translations (en, ru, es, fr)

---

📝 Credits

• Movie & TV data — The Movie Database (TMDB) (not endorsed by TMDB)
• Ratings — OMDb API
• Anime data — Jikan API (unofficial MAL REST API)
• Auth — Clerk