Welcome to Movie Flix, your go-to web application for searching movies. This application allows users to search for movies by their name and offers filtering and sorting options to enhance the search experience. Dive into the details of your favorite movies with just a click!
Create a basic prototype of a movie search web application using React.js. The prototype should demonstrate the ability to fetch movie data from an external API and display it in a simple user interface.
- Display a list of popular movies by default.
- Display a list of popular movies by default.
- Implement the ability to fetch movie data from the OMDB API (http://www.omdbapi.com/) or any other movie database API of your choice.
- Display search results in a basic format, including movie titles and release years.
- When users click on a movie title from the search results, display a modal with additional details about the selected movie, such as plot summary, genre, and ratings.
- Search Functionality: Find movies by entering their name.
- IMDB API Integration: Leverage the power of the IMDB API to fetch accurate and comprehensive movie data. - Filter and Sort: Refine your search results with filtering options and sort them by name or year.
- Detailed Movie Pages: Click on any movie card to be redirected to a detailed page with more information about the movie.
- HTML: Structuring the content of the application.
- CSS: Styling the application for a visually appealing user experience.
- React.js: Building the dynamic and interactive user interface.
- React Router DOM: Managing the application's routing to navigate between pages.
- Context API: State management for sharing data across the application.
- Chakra UI: A modern UI component library for creating a responsive and accessible design.
Follow these steps to get a copy of the project up and running on your local machine for development and testing purposes.
Make sure you have the following installed:
- Node.js
- npm (Node Package Manager)
- Clone the repository:
git clone https://github.com/bakshay96/Fluid-AI-Assignment-.git
- Navigate to the project directory:
cd moviflix
1) navigate to the Frontend directory
2) use node version 16 or 18.12.1 is recommended
3) run the command npm install or npm i --legacy-peer-deps it will install all the required Dependencies with no errors.
Create a .env file in the root directory and add your OMDB API key:
.env
REACT_APP_OMDB_API_KEY=your_api_key_here
(make sure you are confirming the URL of the server)
npm dev /*or*/ npm run dev
npm run build
🌳 API Endpoints Here's a brief summary of the available endpoints in the Movie Flix API:
GET [/api/search?query=<movie_name>&year=<year>](http://www.omdbapi.com/?t=iron+man&y=2016&plot=full): Search for movies by name (and optionally year).
GET [/api/movie/:id:](http://www.omdbapi.com/?i=tt6073592&plot=full) Get detailed information about a specific movie by its IMDB ID.
📂 Directory Structure ** Here's an overview of the project's directory structure:**
movie-flix/
├── public/
│ ├── index.html
│ └── ...
├── src/
│ ├── components/
│ │ ├── InputSearch.jsx
│ │ ├── Movie.jsx
│ │ ├── useFetch.js
| └── ...
│ ├── context/
│ │ └── Context.jsx
│ ├── pages/
│ │ ├── Home.jsx
│ │ ├── SingleMovie.jsx
│ │ └── ...
| ├── Routes/
│ │ ├── MainRoutes.jsx
│ │ └── ...
│ ├── App.js
│ ├── main.js
│ ├── index.css
│ └── ...
├── .env
├── package.json
└── README.md
- Visual Studio Code
- Vite-JS template
- Netlify for frontend deployment
If you want to contact me, you can reach me through the below handles.
Thank you for using Movie Flix! We hope you enjoy discovering movies as much as we enjoyed building this application.