Building MovieFlix: A Complete Movie Explorer App with React, Firebase, TMDB & TailwindCSS

🎬 Introduction

Welcome to my blog! I'm Chirag Tyagi, a B.Tech CSE student and aspiring full-stack developer. In this post, I’ll take you through the journey of creating MovieFlix — a full-featured movie explorer app built with React, powered by Firebase for authentication, and integrated with TMDB API to fetch real movie data.

🚀 Live Demo →

📂 GitHub Repository →

---

🛠️ Tech Stack

• React + Vite: Fast, modern front-end framework and tooling.

• TailwindCSS: Utility-first CSS for rapid UI development.

• Firebase: For Google & Email authentication.

• TMDB API: For fetching trending, popular, and top-rated movies.

• Axios: For HTTP requests.

• React Router DOM: For page navigation.

• React Context API: Global state for handling favorite movies.

• LocalStorage: Persistent favorites.

• React Fast Marquee: For smooth background poster animation.

🔧 Example: Firebase Auth Implementation

import { createUserWithEmailAndPassword } from "firebase/auth";

const signup = (email, password) => {
  return createUserWithEmailAndPassword(auth, email, password);
};

🔧 Example: Axios API Fetch

const fetchMovies = async () => {
  const res = await axios.get(`https://api.themoviedb.org/3/trending/movie/day`, {
    params: {
      api_key: import.meta.env.VITE_TMDB_API_KEY,
      language: "en-US"
    }
  });
  setMovies(res.data.results);
};

🔧 Example: Context API for Favorites

const addToFavorites = (movie) => {
  setFavorites(prev => {
    if (!prev.some(f => f.id === movie.id)) return [...prev, movie];
    return prev;
  });
};

---

📁 Folder Structure Overview

src/
├── components/         # Reusable UI components
├── contexts/           # Auth and Movie context providers
├── hooks/              # Custom hooks like useAuth
├── pages/              # Page-level components (Home, Login, Signup, Favorites)
├── services/           # API logic (TMDB requests)
├── utils/              # Helpers like genre mapping
├── App.jsx             # Main app component
└── main.jsx            # Entry point

---

🔐 Firebase Authentication

• Email/password login

• Google OAuth

• Session persistence with onAuthStateChanged

📦 Code Example

useEffect(() => {
  const unsubscribe = onAuthStateChanged(auth, (currentUser) => {
    setUser(currentUser);
    setLoading(false);
  });
  return unsubscribe;
}, []);

---

🌍 Movie API Integration with TMDB

• Stored API Key in .env

• Used Axios to fetch movie lists

• Displayed posters, titles, genres, overview

🔧 Sample Genre Mapping Code

export const getGenreNames = (ids) => ids.map(id => genreMap[id] || "Unknown").join(", ");

---

🖼️ Movie Cards + Favorites

• Poster, title, release year, TMDB rating

• On hover: shows overview and genre

• Heart icon toggles favorite state

📦 Code Sample

<button
  onClick={onFavoriteClick}
  className={favorite ? "text-red-500" : "text-white"}
>
  ♥
</button>

---

💨 Animated Poster Background with react-fast-marquee

• Smooth animation using react-fast-marquee

• Different layers for trending, top-rated, and popular

📦 Code Snippet

<Marquee speed={60} gradient={false}>
  {posters.map(url => (
    <img key={url} src={url} className="w-64 h-[24rem] object-cover mx-3 rounded-xl" />
  ))}
</Marquee>

---

🔍 Search & Genre Mapping

• Search field fetches data from /search/movie

• Genre names displayed using mapped genre_ids

📦 Code Snippet

<p className="text-sm text-gray-400">
  Genres: {getGenreNames(movie.genre_ids)}
</p>

---

🏁 Pages and Routing

• / → Home

• /login → Login

• /signup → Sign-up

• /favorites → Protected route

📦 Protected Route Code

const PrivateRoute = ({ children }) => {
  const { user } = useAuth();
  return user ? children : <Navigate to="/login" />;
};

---

📱 Responsive Design with Tailwind

• Tailwind’s utility classes used across all components

• Dark UI theme

• Fully mobile responsive

---

🚀 Deploying to Vercel

Vercel makes it super easy to deploy Vite + React apps. Here’s how I did it:

🧪 Step-by-Step Guide

1. Push your project to GitHub

2. Sign in to vercel.com

3. Import your GitHub repo

4. Configure build settings:

   • Framework: Vite

   • Build Command: npm run build

   • Output Directory: dist

5. Add Environment Variables in Vercel Dashboard:

   • VITE_TMDB_API_KEY = your_tmdb_api_key

   • (Also add Firebase keys if needed)

6. Click Deploy — and you're live 🎉

You can view the deployed project here:
👉 https://movie-flix-pi-three.vercel.app

---

💡 What I Learned

• Firebase Auth + React integration

• API handling with Axios

• Persistent state with localStorage

• Context API best practices

• TailwindCSS theming and layout

• Real-world deployment with Vercel

---

🌐 Live Demo

👉 Try it here: https://movie-flix-pi-three.vercel.app/

📬 Contact Me

• 💼 LinkedIn

• 🐦 X / Twitter

• 💻 GitHub

• 📧 Chirag Tyagi

---

Thanks for reading! I’d love to hear your feedback and suggestions. Feel free to fork the repo and build your own version!