{"id":20892376,"url":"https://github.com/mansoorcode/movie_search_prototype","last_synced_at":"2026-04-11T13:33:51.522Z","repository":{"id":263321784,"uuid":"889127833","full_name":"ManSOorcode/movie_search_prototype","owner":"ManSOorcode","description":"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","archived":false,"fork":false,"pushed_at":"2024-11-17T20:32:19.000Z","size":54,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-19T11:43:11.880Z","etag":null,"topics":["omdb-api","reactjs","tailwindcss","tenstack","typescript"],"latest_commit_sha":null,"homepage":"https://movie-search-prototype.vercel.app","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ManSOorcode.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-11-15T17:00:25.000Z","updated_at":"2024-11-17T20:32:22.000Z","dependencies_parsed_at":null,"dependency_job_id":"45edd98b-7744-4c7f-8be9-5c1565d405a2","html_url":"https://github.com/ManSOorcode/movie_search_prototype","commit_stats":null,"previous_names":["mansoorcode/movie_search_prototype"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ManSOorcode%2Fmovie_search_prototype","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ManSOorcode%2Fmovie_search_prototype/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ManSOorcode%2Fmovie_search_prototype/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ManSOorcode%2Fmovie_search_prototype/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ManSOorcode","download_url":"https://codeload.github.com/ManSOorcode/movie_search_prototype/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243277503,"owners_count":20265352,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["omdb-api","reactjs","tailwindcss","tenstack","typescript"],"created_at":"2024-11-18T10:12:05.353Z","updated_at":"2025-12-27T17:15:50.069Z","avatar_url":"https://github.com/ManSOorcode.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React + TypeScript + Vite For Project Setup \u0026 API Integration\n\n## 1. Clone the Repository\n First, clone the repository to your local machine:\n\n```bash\ngit clone https://github.com/your-username/your-repository-name.git\ncd your-repository-name\n```\n\n## 2. Install Dependencies\nEnsure you have Node.js installed. Then, install the required dependencies:\n\n```bash\nnpm install\n```\n\n## 3. Set Up the API Key\n 1. Create a .env file in the root of the project if it doesn't already exist.\n 2. Add your OMDB API key to the .env file:\n\n```bash\nVITE_OMDB_API_KEY = your-api-key-here\n```\n\n## 4. Running the Application Locally\nOnce dependencies are installed, you can run the application locally using the following command:\n```bash\nnpm run dev\n```\n\nThis will start the development server, and you can view the app by navigating to http://localhost: number in your browser.\n\n## 5. Testing the APIs\nI have integrated two APIs for searching and getting details about movies:\n\n\u003cspan\u003eSearch Movies API:\u003c/span\u003e\n\u003cul\u003e\n  \u003cli\u003eURL: http://www.omdbapi.com/?apikey=${process.env.REACT_APP_OMDB_API_KEY}\u0026s=movies\u0026page=3\u003c/li\u003e\n  \u003cli\u003eMethod: GET\u003c/li\u003e\n  \u003cli\u003eParameters:\u003c/li\u003e\n  \u003cul\u003e\n     \u003cli\u003es: The search term (e.g., \"movies\")\u003c/li\u003e\n     \u003cli\u003e page: The page number for pagination (e.g., \"3\")\u003c/li\u003e\n  \u003c/ul\u003e\n\u003c/ul\u003e\n   \n\n\u003cspan\u003eGet Movie Details API:\u003c/span\u003e\n\u003cul\u003e\n  \u003cli\u003eURL: http://www.omdbapi.com/?apikey=${process.env.VITE_OMDB_API_KEY}\u0026i=tt0286944\u003c/li\u003e\n  \u003cli\u003eMethod: GET\u003c/li\u003e\n  \u003cli\u003eParameters:\u003c/li\u003e\n\u003cul\u003e\n     \u003cli\u003e i: The IMDb ID of the movie (e.g., \"tt0286944\")\u003c/li\u003e\n\u003c/ul\u003e\n\u003c/ul\u003e\n   \n## 6. Additional Notes\n\u003cul\u003e\n\u003cli\u003e\nEnsure that you have your OMDB API key saved in the .env file.\u003c/li\u003e\n  \u003cli\u003e\nYou can modify the search query or IMDb ID to get different results from the APIs.\n\u003c/li\u003e\n\u003cli\u003e\nThe APIs have rate limits, so avoid excessive requests in a short time to prevent being blocked. \nper day limit (1,000 daily limit)\n\u003c/li\u003e\n\u003c/ul\u003e\n\n## 7. How to test API in Postman\n### First Api\n\u003cul\u003e\n  \u003cli\u003eURL: http://www.omdbapi.com/?apikey=${process.env.VITE_OMDB_API_KEY}\u0026s=movies\u0026page=3\u003c/li\u003e\n\u003c/ul\u003e\n\u003cimg src=https://github.com/user-attachments/assets/1750d6be-35d2-4992-af00-0744d3c6f220 alt=\"first api\" /\u003e\n\n### Second Api\n\u003cul\u003e\n\u003cli\u003eURL: http://www.omdbapi.com/?apikey=${process.env.VITE_OMDB_API_KEY}\u0026i=tt0286944\u003c/li\u003e\n\u003c/ul\u003e\n\u003cimg src=https://github.com/user-attachments/assets/3a3c75d4-60e9-4ba4-9fc7-eba8e0a0db2b alt=\"second api\"/\u003e\n\n## 8. API Handling with Tenstack Query\n\nThis 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.\n\n For example, you can fetch movie data using Tenstack Query like this:\n\n```js\nimport { useQuery } from '@tanstack/react-query';\n\nconst fetchMovies = async () =\u003e {\n  const response = await fetch(`http://www.omdbapi.com/?apikey=${process.env.VITE_OMDB_API_KEY}\u0026s=movies\u0026page=3`);\n  return response.json();\n};\n\nconst MoviesList = () =\u003e {\n  const { data, error, isLoading } = useQuery(['movies'], fetchMovies);\n\n  if (isLoading) return \u003cdiv\u003eLoading...\u003c/div\u003e;\n  if (error instanceof Error) return \u003cdiv\u003eAn error occurred: {error.message}\u003c/div\u003e;\n\n  return (\n    \u003cdiv\u003e\n      {data?.Search.map((movie: any) =\u003e (\n        \u003cdiv key={movie.imdbID}\u003e\n          \u003ch3\u003e{movie.Title}\u003c/h3\u003e\n          \u003cp\u003e{movie.Year}\u003c/p\u003e\n        \u003c/div\u003e\n      ))}\n    \u003c/div\u003e\n  );\n};\n```\n\n\n\n\n\n\n\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmansoorcode%2Fmovie_search_prototype","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmansoorcode%2Fmovie_search_prototype","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmansoorcode%2Fmovie_search_prototype/lists"}