Silver Screen Savvy is a web application built using React and Redux that allows users to search for movies and TV shows, view popular, trending, and upcoming releases on a daily and weekly basis, and explore detailed information about each title, including trailers and related videos.
-
Movie and TV Shows Search: Users can easily search for movies and TV shows by their respective names.
-
Popular, Trending, and Upcoming: The homepage showcases popular, trending, and upcoming movies and TV shows, with their names, posters, genres, and ratings.
-
Detailed Movie/TV Show Pages: Clicking on a movie or TV show provides users with a detailed page containing comprehensive information about the title, cast, runtime, release year, rating, director, writer, including its description, trailer, and additional videos.
-
Personalized Recommendations: Users receive recommendations for similar movies and TV shows based on the content they are currently viewing.
-
Fine-Tuned Filters: Users can apply filters based on various criteria, such as genre, release date, rating, and more, to refine their search results.
silver-screen-savvy-swao.vercel.app/
1. Clone the repository
git clone https://github.com/kodaliakhil/Silver-Screen-Savvy.git
2. Install the required dependencies
npm install
3. Start the development server
npm run dev
4. Access the application at
http://localhost:5173
Technologies used in the project:
- React - Building user interfaces
- Redux - UI state management
- scss - For styling
- Axios - API requests to the TMDB API
- React Router - Navigation and routing within the application
In the development of Silver Screen Savvy, we express our gratitude to the following third-party libraries and APIs that have significantly contributed to the application's functionality and user experience:
-
Redux Toolkit (
@reduxjs/toolkit
): A comprehensive toolset for managing application state with Redux, streamlining state management and reducing boilerplate code. -
Axios (
axios
): A reliable and efficient HTTP client that seamlessly integrates with the TMDB API, enabling smooth data retrieval. -
Day.js (
dayjs
): A lightweight and versatile library for date and time manipulation, enhancing the application's date formatting capabilities. -
React (
react
) and React DOM (react-dom
): The core libraries powering the dynamic user interface and rendering of React components. -
React Circular Progressbar (
react-circular-progressbar
): An eye-catching component that brings visually appealing circular progress bars to the application. -
React Icons (
react-icons
): A treasure trove of icons that adds visual charm and enhances the user interface with diverse iconography. -
React Infinite Scroll Component (
react-infinite-scroll-component
): Empowers infinite scrolling functionality, making content loading seamless and intuitive. -
React Lazy Load Image Component (
react-lazy-load-image-component
): Enhances performance by deferring image loading until needed, improving page loading times. -
React Player (
react-player
): Facilitates smooth integration of media players to showcase movie trailers and videos within the application. -
React Redux (
react-redux
): Seamlessly integrates Redux state management with React, providing predictable application state handling. -
React Router DOM (
react-router-dom
): Enables smooth and intuitive navigation and routing within the application. -
React Select (
react-select
): Provides customizable select dropdowns for better user interaction and search functionalities. -
Sass (
sass
): A powerful CSS preprocessor that streamlines and organizes styling, contributing to the overall visual aesthetics of the application.
Please note that Silver Screen Savvy relies on the TMDB API to fetch movie and TV show data. The accuracy, completeness, and availability of the data are subject to TMDB's policies and may be subject to change. Users are advised to refer to the TMDB API documentation and terms of use for any restrictions or usage guidelines related to the data accessed through the API.
This project needs a βοΈ from you. Don't forget to leave a star βοΈ.