React + TypeScript + Vite For Project Setup & API Integration

1. Clone the Repository

First, clone the repository to your local machine:

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:

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:

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:

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:

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 <div>Loading...</div>;
  if (error instanceof Error) return <div>An error occurred: {error.message}</div>;

  return (
    <div>
      {data?.Search.map((movie: any) => (
        <div key={movie.imdbID}>
          <h3>{movie.Title}</h3>
          <p>{movie.Year}</p>
        </div>
      ))}
    </div>
  );
};