Trailer Base: A Modern Web App for Movie and TV Trailers

Trailer Base is a web application I built to let users browse movie and TV trailers, explore media details, and manage personal bookmarks. Powered by a modern tech stack including React, TypeScript, and Tailwind CSS, it leverages the TMDB API for rich media data and Firebase for authentication and bookmarking. Here's an overview of the project and its development journey.

Features

Trailer Base offers a seamless user experience with the following features:

• Browse movies, TV shows, and industry professionals with trailers and detailed information.
• Real-time data from the TMDB API, including posters, trailers, cast details, and release dates.
• Firebase authentication via Magic Link and Google OAuth, with Firestore for bookmarking favorite content.
• Search functionality to find movies, TV shows, or people.
• Responsive design crafted with Tailwind CSS for optimal viewing on any device.
• Efficient data fetching using TanStack Query and Axios.
• User-friendly notifications powered by Sonner.
• File-based routing with TanStack Router for intuitive navigation.

Tech Stack

The project is built with a robust, modern stack:

• Frontend: React, TypeScript, Tailwind CSS
• Routing: TanStack Router
• Data Fetching: TanStack Query, Axios
• Backend: Firebase (Authentication, Firestore), TMDB API
• Notifications: Sonner
• Build: Vite
• Deployment: Vercel

Main Routes

Trailer Base organizes content through clean, intuitive routes:

• '/movies': Browse movie listings, trailers, and details ('/movie/:movieId').
• '/tv': Explore TV show listings, episode guides, and details ('/tv/:tvId').
• '/people': View profiles of actors and directors ('/people/:personId').
• '/auth': Handle sign-up ('/auth/sign_up'), profile management ('/auth/profile'), and verification ('/auth/verify').
• '/': Home page featuring trending and popular content.

Development Process

Building Trailer Base involved integrating multiple technologies to create a cohesive experience. I used TanStack Router for file-based routing (e.g., '/routes/movies.tsx'), which simplified navigation and ensured type safety with TypeScript. TanStack Query and Axios handled TMDB API requests, such as '/movie/popular' and '/search/multi', with caching to optimize performance. Firebase's Magic Link and Google OAuth provided secure authentication, while Firestore enabled persistent bookmarking. Tailwind CSS streamlined responsive styling, and Sonner added polished notifications. The app is built with Vite for fast development and deployed on Vercel for reliable hosting.

Challenges and Solutions

One challenge was managing TMDB's rate limits (40 requests per 10 seconds). I used TanStack Query's caching to minimize API calls, with error handling in 'src/api/' to gracefully manage limits. Another challenge was ensuring a responsive UI across devices, which Tailwind's utility classes (e.g., 'sm:', 'md:') addressed efficiently. Integrating Firebase authentication required careful configuration, but using Magic Link and Google OAuth provided a seamless user experience.

Installation

To run Trailer Base locally:

1. Clone the repository:

   bash
   Copy
   git clone https://github.com/dumisa-sakhile/Trailer-Base.git
   cd Trailer-Base

2. Install dependencies:

   bash
   Copy
   npm install

3. Set up a '.env' file with TMDB and Firebase keys:

   env
   Copy
   VITE_TMDB_API_KEY=your-tmdb-api-key
   VITE_FIREBASE_API_KEY=your-firebase-api-key
   VITE_FIREBASE_AUTH_DOMAIN=your-auth-domain
   VITE_FIREBASE_PROJECT_ID=your-project-id
   VITE_FIREBASE_STORAGE_BUCKET=your-storage-bucket
   VITE_FIREBASE_MESSAGING_SENDER_ID=your-messaging-sender-id
   VITE_FIREBASE_APP_ID=your-app-id

4. Configure Firebase in 'src/config/firebase.ts'.
5. Add TMDB API key to 'src/api/' files.
6. Start the development server:

   bash
   Copy
   npm run dev

   Open 'http://localhost:3000' in a modern web browser.

Usage

• Home: Discover featured trailers and trending content.
• Navigation: Use the header or bottom navigation to access Movies, TV, People, or Auth routes.
• Authentication: Sign up or log in via Magic Link or Google OAuth; manage bookmarks in '/auth/profile'.
• Explore: Browse movies ('/movies'), TV shows ('/tv'), or people ('/people') with detailed views.
• Bookmark: Save favorite movies or shows to Firestore using bookmark buttons.
• Search: Find specific content using the search component.

Project Structure

The codebase is organized for clarity and maintainability:

code
Copy
Trailer-Base/
├── public/                    # Static assets (images, SVGs)
├── src/
│   ├── api/                   # TMDB API logic
│   ├── components/            # React components (BookmarkButton, Header, etc.)
│   ├── config/                # Firebase configuration
│   ├── context/               # Search context
│   ├── data/                  # Static data (genres)
│   ├── routes/                # TanStack Router routes
│   ├── Types/                 # TypeScript interfaces
│   ├── main.tsx               # React entry point
│   └── styles.css             # Tailwind styles
├── .env                       # Environment variables
├── index.html                 # HTML entry
├── package.json               # Dependencies
├── tsconfig.json              # TypeScript configuration
├── vercel.json                # Vercel configuration
└── vite.config.js             # Vite configuration

Contributing

To contribute to Trailer Base:

1. Fork the repository.
2. Create a feature branch ('git checkout -b feature/your-feature').
3. Commit changes ('git commit -m "Add feature"').
4. Push to the branch ('git push origin feature/your-feature').
5. Open a Pull Request. Follow TypeScript and React best practices, maintain Tailwind consistency, and avoid hardcoded keys.

In summary, Trailer Base showcases my ability to build a modern, responsive web app with a robust tech stack. Explore it at trailerbase.tech to browse trailers and experience its features firsthand.