Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/abhishekgurjar-in/movie-finder
The Movie Finder website is a React-based application designed to help users search for and explore movies and TV series. Whether you’re a film enthusiast or just looking for something new to watch, this website will offer a streamlined way to find what you’re looking for.
https://github.com/abhishekgurjar-in/movie-finder
api css javascript jsx movie-finder react web-development
Last synced: 3 months ago
JSON representation
The Movie Finder website is a React-based application designed to help users search for and explore movies and TV series. Whether you’re a film enthusiast or just looking for something new to watch, this website will offer a streamlined way to find what you’re looking for.
- Host: GitHub
- URL: https://github.com/abhishekgurjar-in/movie-finder
- Owner: abhishekgurjar-in
- Created: 2024-09-13T03:21:11.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-09-13T05:43:43.000Z (4 months ago)
- Last Synced: 2024-10-11T19:42:45.726Z (3 months ago)
- Topics: api, css, javascript, jsx, movie-finder, react, web-development
- Language: JavaScript
- Homepage: https://movie-finder-in.netlify.app
- Size: 52.7 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Movie Finder Website
### Introduction
we will walk through the process of building a Movie Finder website using React and the OMDB API. The website allows users to browse movies by categories like Avengers, Star Wars, and Series, and search for movies using specific queries. Each movie has its detail page, making it easy to explore more about your favorite films.
### Project Overview
**Movie Finder Website** enables users to:
- Browse categories like Avengers and Star Wars.
- Search for movies by keywords.
- View detailed movie information (poster, genre, director, actors, and more).
- Navigate easily through the website with a clean, modern design.
### Features
- Fetch data dynamically using the OMDB API.
- Responsive design for a better user experience.
- Search functionality that provides instant results.
- Loading indicators while data is being fetched.
- View details of individual movies on a separate page.
### Technologies Used
- **React**: Frontend library for building UI components.
- **React Router**: For navigation and routing.
- **Axios**: For making HTTP requests to the OMDB API.
- **OMDB API**: To fetch movie details.
- **CSS**: For styling the application.
### Project Structure
Here is the directory structure for the project:
```
movie-finder/
├── public/
├── src/
│ ├── components/
│ │ └── Navbar.js
│ │ └── Footer.js
│ ├── pages/
│ │ └── Home.js
│ │ └── Movies.js
│ │ └── Series.js
│ │ └── SearchResults.js
│ │ └── MovieDetail.js
│ └── App.js
│ └── App.css
└── package.json
```
### Installation
1. Clone the repository:
```bash
git clone https://github.com/abhishekgurjar-in/movie-finder.git
cd movie-finder
```
2. Install dependencies:
```bash
npm install
```
3. Get your API key from [OMDB API](http://www.omdbapi.com/apikey.aspx).
4. Create a `.env` file in the project root and add your API key:
```
REACT_APP_OMDB_API_KEY=yourapikey
```
5. Run the project:
```bash
npm start
```
### Live Demo
You can check out the live demo of the Movie Finder website [here](https://movie-finder-in.netlify.app).
### Screenshots
### Conclusion
In this blog, we learned how to create a Movie Finder website using React, React Router, and Axios. This project demonstrates how to interact with a public API, manage state in React, and create a simple yet functional movie browsing experience.
Feel free to customize the design and add more features, like user reviews or movie ratings, to make it more dynamic!
---
### Credits
- [OMDB API](http://www.omdbapi.com/)
- [React](https://reactjs.org/)
- [React Router](https://reactrouter.com/)
### Author
**Abhishek Gurjar** is a dedicated web developer passionate about creating practical and functional web applications. Check out more of his projects on [GitHub](https://github.com/abhishekgurjar-in).