https://github.com/mansoorcode/movie_search_prototype
Here is Movie Web app where user can search his/here favorite movie by filter search and get details of Movie by click on card
https://github.com/mansoorcode/movie_search_prototype
omdb-api reactjs tailwindcss tenstack typescript
Last synced: 3 months ago
JSON representation
Here is Movie Web app where user can search his/here favorite movie by filter search and get details of Movie by click on card
- Host: GitHub
- URL: https://github.com/mansoorcode/movie_search_prototype
- Owner: ManSOorcode
- Created: 2024-11-15T17:00:25.000Z (over 1 year ago)
- Default Branch: master
- Last Pushed: 2024-11-17T20:32:19.000Z (over 1 year ago)
- Last Synced: 2025-01-19T11:43:11.880Z (about 1 year ago)
- Topics: omdb-api, reactjs, tailwindcss, tenstack, typescript
- Language: TypeScript
- Homepage: https://movie-search-prototype.vercel.app
- Size: 52.7 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React + TypeScript + Vite For Project Setup & API Integration
## 1. Clone the Repository
First, clone the repository to your local machine:
```bash
git clone https://github.com/your-username/your-repository-name.git
cd your-repository-name
```
## 2. Install Dependencies
Ensure you have Node.js installed. Then, install the required dependencies:
```bash
npm install
```
## 3. Set Up the API Key
1. Create a .env file in the root of the project if it doesn't already exist.
2. Add your OMDB API key to the .env file:
```bash
VITE_OMDB_API_KEY = your-api-key-here
```
## 4. Running the Application Locally
Once dependencies are installed, you can run the application locally using the following command:
```bash
npm run dev
```
This will start the development server, and you can view the app by navigating to http://localhost: number in your browser.
## 5. Testing the APIs
I have integrated two APIs for searching and getting details about movies:
Search Movies API:
- URL: http://www.omdbapi.com/?apikey=${process.env.REACT_APP_OMDB_API_KEY}&s=movies&page=3
- Method: GET
- Parameters:
- s: The search term (e.g., "movies")
- page: The page number for pagination (e.g., "3")
Get Movie Details API:
- URL: http://www.omdbapi.com/?apikey=${process.env.VITE_OMDB_API_KEY}&i=tt0286944
- Method: GET
- Parameters:
- i: The IMDb ID of the movie (e.g., "tt0286944")
## 6. Additional Notes
-
Ensure that you have your OMDB API key saved in the .env file. -
You can modify the search query or IMDb ID to get different results from the APIs. -
The APIs have rate limits, so avoid excessive requests in a short time to prevent being blocked.
per day limit (1,000 daily limit)
## 7. How to test API in Postman
### First Api
- URL: http://www.omdbapi.com/?apikey=${process.env.VITE_OMDB_API_KEY}&s=movies&page=3
### Second Api
- URL: http://www.omdbapi.com/?apikey=${process.env.VITE_OMDB_API_KEY}&i=tt0286944
## 8. API Handling with Tenstack Query
This project uses Tenstack Query (formerly React Query) to handle API requests. Tenstack Query is used for fetching, caching, and synchronizing the movie data. The integration ensures efficient handling of server data and state management in React.
For example, you can fetch movie data using Tenstack Query like this:
```js
import { useQuery } from '@tanstack/react-query';
const fetchMovies = async () => {
const response = await fetch(`http://www.omdbapi.com/?apikey=${process.env.VITE_OMDB_API_KEY}&s=movies&page=3`);
return response.json();
};
const MoviesList = () => {
const { data, error, isLoading } = useQuery(['movies'], fetchMovies);
if (isLoading) return
if (error instanceof Error) return
return (
{data?.Search.map((movie: any) => (
{movie.Title}
{movie.Year}
))}
);
};
```