Cinema Sphere Movie Explorer

Live Demo: https://react-dv-movie-app.netlify.app/

Cinema Sphere Movie Explorer is a React + TypeScript application created using Vite, allowing users to explore and discover movies with ease. The app provides various features to enhance the user experience, including filtering movies by genre, searching for specific titles, and viewing detailed information about each movie.

Features

• View a home page with a list of movies, including their images and titles.
• Filter movies by genre with the default filter set to "All," taking immediate effect upon selection.
• Search for movies by title.
• Click into a movie to view additional details.
• Genre filter and search work together without re-setting each other.
• Reset the search by clearing the text value in the search input.
• UI indication for no results found when filters return no movies.
• Display a default image if the movie's image is not found.
• Modern styling with well-organized CSS.
• Developed using TypeScript.
• No use of third-party component libraries such as Bootstrap or Material-UI.
• Well-organized file structure and descriptive naming conventions.
• DRY (Don't Repeat Yourself) code that is readable and production-ready.
• Efficiently paginate through a large number of movies for a smoother user experience.

Installation

To run the Cinema Sphere Movie Explorer app locally on your machine, follow these steps:

Prerequisites

Make sure you have Node.js installed on your machine.

Using npm

1. Clone the repository to your local machine:

   git clone https://github.com/deep7102/react-movie-app

2. Navigate to the project directory:

   cd react-movie-app

3. Install dependencies using npm:

   npm install

4. Start the development server:

   npm run dev

5. Open your browser and go to http://localhost:5173 to view the app.

Using yarn

1. Clone the repository to your local machine:

   git clone https://github.com/deep7102/react-movie-app

2. Navigate to the project directory:

   cd react-movie-app

3. Install dependencies using yarn:

   yarn install

4. Start the development server:

   yarn dev

5. Open your browser and go to http://localhost:5173 to view the app.

Feel free to explore and enjoy Cinema Sphere Movie Explorer! If you encounter any issues or have feedback, please let me know by opening an issue in the repository.