{"id":20411275,"url":"https://github.com/davorpa/omdb-search-react-app","last_synced_at":"2025-04-12T16:25:42.945Z","repository":{"id":151265231,"uuid":"599899169","full_name":"davorpa/omdb-search-react-app","owner":"davorpa","description":"A OMDb/IMDb app / client developed using Vite+React.JS","archived":false,"fork":false,"pushed_at":"2024-02-18T12:17:38.000Z","size":2590,"stargazers_count":4,"open_issues_count":10,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-03-26T10:52:14.621Z","etag":null,"topics":["best-practices","javascript","omdb-api-consumer","omdb-client","omdb-movie-search","react-app","react-patterns","reactjs","reactjs-app","vitejs"],"latest_commit_sha":null,"homepage":"https://davorpa.github.io/omdb-search-react-app/","language":"HTML","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"agpl-3.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/davorpa.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2023-02-10T05:50:25.000Z","updated_at":"2024-07-25T19:23:48.000Z","dependencies_parsed_at":"2024-02-11T13:28:16.931Z","dependency_job_id":"cc3c81ce-5620-4947-92d8-94a0be37addb","html_url":"https://github.com/davorpa/omdb-search-react-app","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davorpa%2Fomdb-search-react-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davorpa%2Fomdb-search-react-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davorpa%2Fomdb-search-react-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/davorpa%2Fomdb-search-react-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/davorpa","download_url":"https://codeload.github.com/davorpa/omdb-search-react-app/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248595366,"owners_count":21130508,"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":["best-practices","javascript","omdb-api-consumer","omdb-client","omdb-movie-search","react-app","react-patterns","reactjs","reactjs-app","vitejs"],"created_at":"2024-11-15T05:52:02.724Z","updated_at":"2025-04-12T16:25:42.919Z","avatar_url":"https://github.com/davorpa.png","language":"HTML","funding_links":[],"categories":[],"sub_categories":[],"readme":"# OMDb Search React App\n\n\u003cdiv align=\"center\" markdown=\"1\"\u003e\n\n[![Lighthouse Performance Badge](./target/lighthouse/lighthouse_performance.svg)](https://googlechrome.github.io/lighthouse/viewer/?psiurl=https%3A%2F%2Fdavorpa.github.io%2Fomdb-search-react-app%2F\u0026strategy=mobile\u0026category=performance\u0026category=accessibility\u0026category=best-practices\u0026category=seo\u0026category=pwa#performance) [![Lighthouse Accessibility Badge](./target/lighthouse/lighthouse_accessibility.svg)](https://googlechrome.github.io/lighthouse/viewer/?psiurl=https%3A%2F%2Fdavorpa.github.io%2Fomdb-search-react-app%2F\u0026strategy=mobile\u0026category=performance\u0026category=accessibility\u0026category=best-practices\u0026category=seo\u0026category=pwa#accessibility) [![Lighthouse Best Practices Badge](./target/lighthouse/lighthouse_best-practices.svg)](https://googlechrome.github.io/lighthouse/viewer/?psiurl=https%3A%2F%2Fdavorpa.github.io%2Fomdb-search-react-app%2F\u0026strategy=mobile\u0026category=performance\u0026category=accessibility\u0026category=best-practices\u0026category=seo\u0026category=pwa#best-practices) [![Lighthouse SEO Badge](./target/lighthouse/lighthouse_seo.svg)](https://googlechrome.github.io/lighthouse/viewer/?psiurl=https%3A%2F%2Fdavorpa.github.io%2Fomdb-search-react-app%2F\u0026strategy=mobile\u0026category=performance\u0026category=accessibility\u0026category=best-practices\u0026category=seo\u0026category=pwa#seo) [![Lighthouse PWA Badge](./target/lighthouse/lighthouse_pwa.svg)](https://googlechrome.github.io/lighthouse/viewer/?psiurl=https%3A%2F%2Fdavorpa.github.io%2Fomdb-search-react-app%2F\u0026strategy=mobile\u0026category=performance\u0026category=accessibility\u0026category=best-practices\u0026category=seo\u0026category=pwa#pwa)\n\n![screenshot](screenshot.png)\n\n\u003c/div\u003e\n\nAplicación para buscar películas usando la API de \u003chttps://www.omdbapi.com\u003e\n\nRequerimientos:\n\n- [x] Necesita mostrar un input para buscar la película y un botón para buscar.\n- [x] Lista las películas y muestra el título, año y poster.\n- [x] Que el formulario funcione\n- [x] Haz que las películas se muestren en un grid responsive.\n- [x] Hacer el fetching de datos a la API\n\nPrimera iteración:\n\n- [x] Evitar que se haga la misma búsqueda dos veces seguidas.\n- [x] Haz que la búsqueda se haga automáticamente al escribir.\n- [x] Evita que se haga la búsqueda continuamente al escribir (debounce)\n\nSegunda iteración:\n\n- [x] Busca por los demás campos que permite la API.\n- [x] Haz que se pueda ordenar por alguno de los campos. (ej. titulo).\n\nTercera iteración:\n\n- [x] Implementa algún tipo de paginación.\n- [x] Modifica el punto anterior para que se ejecute con infinite-scroll (`IntersectionObserver`)\n\n---\n\nThis project was bootstrapped with [Create Vite Project](https://vitejs.dev/guide/#scaffolding-your-first-vite-project) configured with a **React SWC** template:\n\n```shell\nnpm create vite@latest omdb-search-react-app --template react-swc\n```\n\n## First Steps\n\nTo begin developing this project...\n\n1. Request for an API key using [the following form](https://www.omdbapi.com/apikey.aspx) and create an `.env.local` file using `.env.example` file.\n\n    ```properties\n    VITE_OMDB_APIKEY=\"\u003cYour API key\u003e\"\n    ```\n\n    E.g.: `4287ad07`\n\n2. Run next instructions in a command prompt:\n\n    ```shell\n    npm install\n    npm run dev\n    ```\n\n## Available Scripts\n\nIn a project where Vite is installed, you can use the `vite` binary in your `npm` scripts, or run it directly with `npx vite`. Here are the default npm scripts in a scaffolded Vite project:\n\n### `npm run dev`\n\nRuns the app in the development mode.\\\nOpen [http://localhost:5173](http://localhost:5173) to view it in your browser.\n\nThe page will reload when you make changes.\n\n### `npm run build`\n\nBuilds the app for production to the `dist` folder.\\\nIt correctly bundles React in production mode and optimizes the build for the best performance.\n\nThe build is minified and the filenames include the hashes.\\\nYour app is ready to be deployed!\n\nSee the section about [deployment](https://vitejs.dev/guide/static-deploy.html) for more information.\n\n### `npm run preview`\n\nLocally preview production build.\n\nOnce you've built the app, you may test it locally by running `npm run preview` command.\n\nThe `vite preview` command will boot up a local static web server that serves the files from `dist` at [http://localhost:4173](http://localhost:4173). It's an easy way to check if the production build looks OK in your local environment.\n\n## Learn More\n\nYou can learn more in the [Vite documentation](https://vitejs.dev/guide/).\n\nTo learn React, check out the [React documentation](https://reactjs.org/).\n\n## License\n\nThe content of this project itself and the underlying source code used to format and display that content is licensed under the [The GNU Affero General Public License Version 3](LICENSE).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavorpa%2Fomdb-search-react-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdavorpa%2Fomdb-search-react-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdavorpa%2Fomdb-search-react-app/lists"}