Hi everyone! I’m excited to share with you the development story behind my latest project: MJBY Movie Network — a minimalist, feature-rich web app for movie and TV show enthusiasts built with Next.js, Tailwind CSS, and powered by the TMDb API.
Whether you're here to get inspired or curious how a full-stack movie discovery app comes to life, here’s a full behind-the-scenes look from concept to current version.
🎬 The Idea
The original goal was simple:
Create a modern movie browsing platform similar to Netflix UI, with sections for popular, top-rated, and upcoming titles — and eventually, make it smarter with filtering, ratings, search, and more.
🛠️ Tech Stack Chosen
- Framework: Next.js 15 App Router
- UI Library: Tailwind CSS
- API: The Movie Database (TMDb)
- State Management: Zustand
- Slider: Keen Slider
- Notifications: Sonner
- Video Player: Youtube API
✅ Phase 1: Core Features & UI
- Netflix-style Carousel using custom scroll snapping
- Reusable Card Components for movies and TV shows
- Dynamic Routes for
/movie/[id]and/tv/[id]with detail pages - Responsive Grid Layout
- Dark Mode UI (default)
- TMDb Image CDN Integration for posters and backdrops
⭐ Phase 2: Ratings & Auth Features
- Added TMDb Guest Ratings:
- Users can now rate movies via guest session ID
- Cooldown logic with animated
CooldownBarcomponent - Toasts via Sonner with success messages
- Integrated TMDb OAuth Login:
- Full auth flow: token → approve → session → username & avatar
- Zustand store to persist user session and data
- Automatically fetches and highlights user-rated movies
- Differentiated between guest and authenticated user ratings on each movie detail page
- Built a reusable Star Rating Component with tooltip support and rating animation
❤️ Phase 3: User Favorite, Watchlist & Ratings
This latest update adds more personalized user interaction features to MJBY Movie Network:
- 💖 User Favorites
Logged-in users can now mark any movie or TV show as a favorite. These are synced with TMDb’s API and saved to your account. - 📺 Watchlist Support
Users can now add titles to their Watchlist, making it easy to queue up shows and movies for later viewing. - 🎯 Rating Sync with Authenticated TMDb Users
- When logged in via TMDb, your personal ratings are now fetched and highlighted across the UI.
- You can see your previously rated movies instantly on detail pages.
- Combined view for Guest + Authenticated Ratings ensures seamless transition between sessions.
- Zustand store now tracks:
- Authenticated session
- TMDb account ID
- Favorite & Watchlist status per title
- Built-in visual feedback:
- Favorite/watchlist button icons reflect real-time changes
- Toast notification when you rate, favorite, or watchlist an item
✨ Phase 4: UI/UX Improvements
- Added Skeleton Loaders for movie cards
- Built a Shimmer Loading Effect
- Added Gradient Mask on CooldownBar for sleek look
- Integrated Onboarding Modal to welcome new users
- Minimalist visual polish using Tailwind's custom utility classes
🎬 Phase 5: TV Shows and Episodes
- Implemented TV Shows page
- Dynamic Routes for
/tv/[id]/[season] with detail pages - Supported TV series and episodes results
🔍 Phase 6: Search & Discoverability
- Implemented Global Search at
/search?q=your+query - Integrated Debounced Input using
useSearchParams() - Supported both movie and TV series results
🚀 What’s Next for MJBY Movie Network App?
- Genre Filtering
- Social sharing features
- Infinite scrolling & lazy loading
- TMDb Reviews & Comments
- Localization & Language switcher
👋 Final Thoughts
MJBY Movie Network started as a learning exercise, but it has grown into a powerful, full-featured movie discovery tool. If you want to see it in action or just explore the code and UI:
👉 Visit: https://mjbymovienetwork.vercel.app
💻 Built with love using Next.js & TMDb API
Feel free to leave feedback or contribute ideas!