PrimeVision

A modern, open-source streaming service UI built with React, Vite, and Tailwind CSS, featuring beautiful GSAP animations and real-time movie data from TMDB.

---

Features

🎬 Movie Discovery

• Live Movie Data: Fetches trending, top-rated, and kids movies from the TMDB API
• Multiple Categories: Trending Movies, Kids Movies, and Top Rated Movies
• Responsive Design: Optimized for all screen sizes with mobile-first approach

🔍 Advanced Search

• Instant Search: Real-time search with debounced API calls
• Search Page: Full search results page with pagination (20 results per page)
• URL-based Search: Shareable search URLs with query parameters

---

Tech Stack

• React 18 (with functional components and hooks)
• React Router 6 (for client-side routing)
• Vite (for fast development and HMR)
• Tailwind CSS (utility-first styling)
• GSAP (for advanced animations)
• TMDB API (for real movie data)
• React Icons (for icons)
• Axios (for API requests)

---

Getting Started

1. Clone the repo:

   git clone https://github.com/adityabhatkar23/primevision.git
   cd primevision

2. Install dependencies:

   npm install

3. TMDB API Key:

   • Create a .env file in the root:

   VITE_TMDB_API_KEY=your_tmdb_api_key_here

   • Get your TMDB API key here.

4. Run the app:

   npm run dev

---

Project Structure

src/
├── App.jsx                    
├── main.jsx                  
├── index.css                  
├── constants.js               
├── components/
│   ├── Navbar.jsx           
│   ├── MovieRow.jsx          
│   ├── Preview.jsx           
│   ├── Marquee.jsx          
│   ├── Button.jsx           
│   └── Box.jsx              
├── pages/
│   ├── Home.jsx              
│   ├── MoviesDetails.jsx     
│   └── Search.jsx            
└── services/
    └── tmdbAPI.js            

---

API Usage

All TMDB API calls are centralized in src/services/tmdbAPI.js:

Movie Discovery

• getTrendingMovies(limit) - Get trending movies
• getTopRatedMovies(limit) - Get top-rated movies
• getKidsMovies(limit) - Get family-friendly movies
• getNowPlayingMovies(limit) - Get movies in theaters

Search & Details

• searchMovies(query, limit, page) - Search movies with pagination
• getMovieDetails(movieId) - Get comprehensive movie info
• getMovieCredits(movieId) - Get cast and crew
• getMovieVideos(movieId) - Get trailers and videos
• getSimilarMovies(movieId, limit) - Get similar movies
• getRecommendedMovies(movieId, limit) - Get recommended movies

---

⚡ Performance

• Debounced search to reduce API calls
• Lazy loading for images
• Efficient pagination
• Optimized re-renders with React hooks

---

Customization

• Styling:
  Easily customize colors, fonts, and layout via Tailwind and the CSS files.
• Animations:
  All major UI elements use GSAP for smooth, modern animations.
• Extendability:
  Add more TMDB endpoints (e.g., movie details, genres, actors) by extending tmdbAPI.js and creating new components.

---

Credits

• TMDB API for movie data and images
• React Icons for beautiful icons
• GSAP for smooth animations

---

License

This project is licensed under the MIT License. See the LICENSE file for details.

---

Made with ❤️ by Aditya