FlickFinder

laptop frame
FlickFinder

Overview

FlickFinder is a React Webapp that allows users to browse, search and rate movies from various genres and categories. Users can filter movies by genre, popularity, release date and rating, as well as view movie details, trailers, reviews and cast information.

Features

Movie Dashboard Project Features

  • Responsive and Interactive UI : A fully responsive interface built with React and Tailwind CSS, ensuring a seamless experience across all devices and screen sizes.

  • Movie Search and Filter : Allows users to search for movies by title and filter them by genre, release date, popularity, and rating for precise results.

  • Movie Details and Trailers : Displays detailed information about each movie, including synopsis, cast, reviews, and high-quality trailers for an immersive preview.

  • Wishlist and Watchlist Management : Enables users to add movies to a wishlist or watchlist, track their progress, and receive notifications for upcoming releases.

  • Dynamic Theme Switching : Offers a customizable light and dark mode, with smooth transitions and persistent settings across user sessions.

Timeline

3 weeks, Deployed in June 2023

Challenges

  • Implement Infinite Scroll with Smooth UX : Enhance the browsing experience by dynamically loading more movies as the user scrolls, with smooth transitions and optimized API calls to prevent performance issues.

  • Build a Dynamic Theme Management System : Allow users to switch between light and dark themes, with seamless transitions and persistence across sessions using local storage or context API.

  • Develop Wishlist and Watchlist Functionality : Enable users to create, manage, and organize their wishlist and watchlist, with options to mark movies as watched and receive notifications for upcoming releases.

  • Integrate Trailer Playback with Immersive Ambient Effects : Provide an immersive viewing experience by playing trailers with ambient lighting effects that dynamically adjust based on the movie’s visuals, creating a cinematic feel.

Tech Stack

Tailwind CSS Tailwind CSS
React React
Javascript Javascript
postman postman
Html Html
CSS CSS

Highlights

Showcasing Major Milestones and the Key Features

Dark Mode Support

0.1 Dark Mode Support

Image
Categorization of Movies and Series

0.2 Categorization of Movies and Series

Image
Movie detail Page

0.3 Movie detail Page

Image
Save Movie to Whishlist

0.4 Save Movie to Whishlist

Image

0.5 Watch trailers with Ambient Effect

Video
See your Watchlist

0.6 See your Watchlist

Image
Coming Soon Page

0.7 Coming Soon Page

Image

0.8 Search for your favourite Shows or Movies

Video