Search Movies from Movie API using ReactJS
--> Visit This Website : https://movies-catalogue-yhz.vercel.app/
Welcome to the Movies Catalogue React App!
This Application allows Users to Browse and Search for Movies using Data Fetched from an API.
The Movies are Presented in Beautiful Cards and Website is Completely Responsive for an Enhanced User Experience.
(OLD Version)
(Previous Version)
(Latest Version)
(WatchList)
- This React Project is built using Tailwind CSS with Vite.
- To Create this Project, Follow Mentioned Steps
in the Official TailwindCSS Documentation,
--> https://tailwindcss.com/docs/guides/vite
- Fetches Movie Data from API.
- Displays Movies in Visually Appealing Cards.
- Responsive Design for Various Screen Sizes.
- Allows Users to,
- Search for Movies
- Play Trailer
- Add to Watch List
- Navigate using Navbar
- Remove from Watch List
- IDE : VS Code
- Framework : React
- Language : Javascript
- Styling : Tailwind CSS
-
Clone the repository:
git clone https://github.com/YHZ-EPIC/Movies_Catalogue.git
-
Navigate to the project directory:
cd Movies_Catalogue
-
Install dependencies:
npm install
-
TMDB API : TMDB API Provides access to an Immense Database of Movies and TV Shows.
-
This API Provides the Following Information,
- Titles
- Poster
- Release Dates
- Synopsis
- Genres
- Trailer & so on...
-
API Key Required: To use the TMDB API, you must obtain an API key by registering on the TMDB website. This key is necessary for authentication and access to the data.
-
Flexible Endpoints: The API offers various endpoints to meet your needs, including Movie and TV Show details, Search Functionality, Trending Movies, Cast and Crew details and Genre information.
-
Rate Limiting: TMDB API imposes rate limits to prevent misuse. These limits may vary depending on your subscription level, so it's essential to check the API documentation for current rate limit information.
-
Obtain an API key from OMDb Movie API Provider and replace 'YOUR_API_KEY'
in the src/App.jsx file with your actual API key. -
Start the development server:
npm run dev
-
Hold Ctrl Key and Click on the localhost link generated on Terminal
which will open your Browser. You can now use the App.
This project is licensed under the MIT License.
Feel free to reach out to us if you have any questions or suggestions.
Enjoy using the Movie Catalogue React App ❤