-
Have A Local Version: Clone or download the latest commited version of this frontend for your local machine
-
Initiate Projects: use "npm install" to install all the necessary dependencies
-
Set Up The Environment Variables: Don't forget to set up the environment variables with your own credentials needed to run this projects. Most variable are defined in .env file.
Cick here for live website: https://movie-star-two.vercel.app/
-
Infinite Scrolling on Home Page: Browse a dynamic, endlessly scrolling list of popular movies to reveal additional results.
-
Search Functionality: Quickly search for movies by title, with results displaying via infinite scrolling option for a smooth, uninterrupted experience.
-
Detailed Movie Pages with ISR: View comprehensive movie details—including posters, descriptions, genres, release date, and cast—using SSR with ISR to keep data consistently up-to-date.
-
Related Movie Recommendations: See movie recommendations below the details section, automatically refreshed at set intervals with ISR for current suggestions.
-
Watchlist Management: Easily add movies to your watchlist from detail pages, with quick, optimistic UI updates. Access and manage all saved items on a dedicated Watchlist page.
-
Dark & Light Mode Preferences: Toggle dark and light mode for a personalized viewing experience, with settings stored across sessions and applied globally.
-
Advanced Data Handling: Optimize performance with dynamic caching, and leverage Optimistic UI for instant updates on watchlist actions.
-
API Response Validation with Zod: Add Zod to validate TMDB API responses, ensuring required fields are present and providing user-friendly error messages for any issues.
-
Debounced Search Input: Implement debounce logic for the search input to reduce excessive API requests and improve performance.
-
Authentication Middleware: Simulate authentication using Next.js Middleware to secure the watchlist route, with cookies or localStorage for session handling.
-
Enhanced UI Design: Refine the UI for a more visually appealing and engaging user experience.
-
Testing & Code Quality: Integrate unit and integration tests, plus linting, to improve reliability and maintainable code quality.
- Next.js-14: Core framework for building a fast, scalable, and SEO-friendly React-based application.
- TypeScript: Adds static typing to JavaScript, enhancing code quality, reducing runtime errors, and improving developer experience.
- Tailwind CSS: Used to show the banner images in a slide view.
- React Hook Form: Manages form state and validation efficiently, with debounced search functionality for optimized API calls.
- Zod: Manages form validations
- Zustand: Lightweight state management library for handling global states, including watchlist and user preferences.
- Next Themes: Provides easy theming capabilities, including dark mode support.
- React-Toastify: Used for making visually pleasing toast on user actions.
- lucide-React: Provides a set of customizable icons to enhance the UI visually.
- Embla-Carousel-React: Implements a responsive and customizable carousel component for movie posters.
- Tailwindcss-Animate: Adds animations to Tailwind CSS for smooth transitions and effects.