A modern movie & TV show discovery app powered by TMDB API.

MediaHub lets you discover trending movies, TV shows, trailers, and reviews with a Pinterest-style dynamic layout, infinite scroll, and shimmer loading effects for a smooth and premium experience.

✨ Features

• 🔒 Authentication using Firebase - User validation and authentication
• 🎬 Movies & TV Shows List - Discover trending, top-rated, and upcoming content.
• 🗂️ Redux store - Centralized state management for better scalability
• ⚡ API Caching — Optimized performance with cached API responses.
• 🖼 Pinterest-style Reviews - Dynamic masonry layout with auto-adjusting heights.
• 🔍 Smart Search - Instantly search movies & TV shows with debounced queries, enhanced with OpenAI for intelligent suggestions.
• 🎥 Trailers with Fallback - Plays trailers with a default video on error.
• ✨ Shimmer Loading - Beautiful skeleton loaders for smooth UI transitions.
• 🌀 Infinite Scrolling - Seamless content loading as you scroll.
• 📱 Responsive Design - Optimized for mobile, tablet, and desktop.

🛠️ Tech Stack

Technology	Purpose
React 19+	Frontend framework
Redux	Store Management
Tailwind CSS	Styling & responsive design
TMDB API	Movies & TV data source
OPENAI API	Movies & TV search suggestions
TypeScript	Type safety & better DX
Framer Motion	Animations & smooth transitions

🚀 Quick Start

• Create a firebase project authentication at firebase console and add firebaseConfig's in .env file

• Create a TMDB API key to access TMDB api's.

• Below is the snapshot of how .env file will look like

  VITE_REACT_APP_FIREBASE_API_KEY=
  VITE_REACT_APP_FIREBASE_AUTH_DOMAIN=
  VITE_REACT_APP_FIREBASE_PROJECT_ID=
  VITE_REACT_APP_FIREBASE_STORAGE_BUCKET=
  VITE_REACT_APP_FIREBASE_MESSAGING_SENDER_ID=
  VITE_REACT_APP_FIREBASE_APP_ID=
  VITE_REACT_APP_MEASUREMENT_ID=
  VITE_REACT_APP_TMDB_API_READ_ACCESS_TOKEN=

• Run below commands:

  git clone https://github.com/yourusername/mediahub.git
  cd mediahub
  npm install
  npm run dev

🚀 Steps to deploy

• Add the .env secrets to the github CI pipeline.
• Go to your GitHub repo → Settings → Secrets and variables → Actions.
• Add secrets like:
  • VITE_REACT_APP_FIREBASE_API_KEY
  • VITE_REACT_APP_TMDB_API_READ_ACCESS_TOKEN
  • VITE_REACT_APP_OPENAI_API_KEY

🌟 A Friendly Note on API Usage

This project integrates a few external APIs to deliver its features:

• TMDB API 🎬 — movies & TV data
• Firebase 🔐 — authentication & hosting
• OpenAI API 🤖 — AI-powered search suggestions

While these services are powerful, they come with limits:

• TMDB enforces fair-use policies, so avoid excessive or redundant requests.
• OpenAI requests incur real costs 💳, so please use them thoughtfully.
• Firebase has hosting and authentication quotas that should be respected.

👉 In short: Enjoy experimenting, but please respect the APIs and use them responsibly.

🤝 Contributing

Contributions, issues, and feature requests are welcome! Feel free to open a PR or create an issue if you’d like to improve this project.

📚 Some resources

• Firebase Hosting
• TMDB Movie API Documentation