Aplicación para buscar películas usando la API de https://www.omdbapi.com
Requerimientos:
- Necesita mostrar un input para buscar la película y un botón para buscar.
- Lista las películas y muestra el título, año y poster.
- Que el formulario funcione
- Haz que las películas se muestren en un grid responsive.
- Hacer el fetching de datos a la API
Primera iteración:
- Evitar que se haga la misma búsqueda dos veces seguidas.
- Haz que la búsqueda se haga automáticamente al escribir.
- Evita que se haga la búsqueda continuamente al escribir (debounce)
Segunda iteración:
- Busca por los demás campos que permite la API.
- Haz que se pueda ordenar por alguno de los campos. (ej. titulo).
Tercera iteración:
- Implementa algún tipo de paginación.
- Modifica el punto anterior para que se ejecute con infinite-scroll (
IntersectionObserver
)
This project was bootstrapped with Create Vite Project configured with a React SWC template:
npm create vite@latest omdb-search-react-app --template react-swc
To begin developing this project...
-
Request for an API key using the following form and create an
.env.local
file using.env.example
file.VITE_OMDB_APIKEY="<Your API key>"
E.g.:
4287ad07
-
Run next instructions in a command prompt:
npm install npm run dev
In 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:
Runs the app in the development mode.
Open http://localhost:5173 to view it in your browser.
The page will reload when you make changes.
Builds the app for production to the dist
folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Locally preview production build.
Once you've built the app, you may test it locally by running npm run preview
command.
The vite preview
command will boot up a local static web server that serves the files from dist
at http://localhost:4173. It's an easy way to check if the production build looks OK in your local environment.
You can learn more in the Vite documentation.
To learn React, check out the React documentation.
The 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.