Si quieres leer este readme en inglés:
¡Bienvenido a mi buscador de películas! Con esta herramienta, puedes explorar y buscar tus películas favoritas.
Filtra por año de lanzamiento y descubre nuevas joyas cinematográficas.
¡Disfruta de la magia del cine! 🎥🍿
.webp)
.webp)
¡Claro! Aquí tienes una descripción de las características que has implementado en tu buscador de películas con React:
Soporte de Favicon: Se ha añadido soporte para una amplia v dad de tamaños de favicon, asegurando que el ícono del sitio se muestre correctamente en todos los dispositivos y plataformas.
Etiquetas Open Graph y Twitter: Se han incluido etiquetas meta de Open Graph y Twitter, lo que optimiza la vista previa del sitio web en plataformas sociales como Facebook y Twitter.
Compatibilidad entre navegadores: La página web utiliza la etiqueta meta X-UA-Compatible, que garantiza la compatibilidad con varios navegadores, especialmente versiones antiguas de Internet Explorer.
API de películas (OMDb): Utilizaste la API de OMDb (Open Movie Database) para obtener información sobre películas.
Diseño de cuadrícula responsive: En esta aplicación, las películas se mostrarán en filas y columnas, ajustándose para verse bien tanto en pantallas grandes como en dispositivos móviles.
Evitar búsquedas duplicadas: Has implementado lógica para evitar que se realice la misma búsqueda dos veces seguidas. Esto mejora la eficiencia y la experiencia del usuario.
Búsqueda automática mientras se escribe: Cuando el usuario escribe en el campo de búsqueda, la aplicación realiza automáticamente una búsqueda en la API de OMDb sin necesidad de hacer clic en un botón adicional. Esto proporciona una respuesta más rápida y fluida para el usuario.
Evitar búsquedas continuas mientras se escribe (debounce): El "debounce" es una técnica que retrasa la ejecución de una función (en este caso, la búsqueda) hasta que el usuario ha dejado de escribir durante un breve período de tiempo (300 ms). Esto evita búsquedas continuas mientras el usuario sigue escribiendo, lo que podría sobrecargar la API o afectar el rendimiento de la aplicación.
- React - Una biblioteca de JavaScript para construir interfaces de usuario interactivas.
- Vite - Un entorno de desarrollo rápido y ligero para aplicaciones web modernas.
- ESLint - Una herramienta de código abierto que te ayuda a encontrar y corregir problemas en tu código JavaScript.
- Haz un Fork o clona este repositorio
git clone [email protected]:joserafael0160/Movie-Finder.git- Instala las dependencias:
- Usé bun para instalar y gestionar las dependencias.
## Instala bun para MacOS, WSL & Linux:
curl -fsSL https://bun.sh/install | bash
# Instala bun para Windows:
powershell -c "iwr bun.sh/install.ps1|iex"
# Instala con bun:
bun install- o puedes usar pnpm:
# Instala pnpm globalmente si no lo tienes:
npm install -g pnpm
# Instala las dependencias:
pnpm install- Ejecuta el servidor de desarrollo:
# Ejecuta con bun:
bun run dev
# Ejecuta con pnpm:
pnpm run dev| Comando | Acción | |
|---|---|---|
| ⚙️ | dev |
Inicia el servidor de desarrollo local. |
| ⚙️ | build |
Genera la versión de producción en ./dist/. |
| ⚙️ | lint |
Ejecuta ESLint para encontrar problemas en tu código JavaScript. |
| ⚙️ | preview |
Muestra una vista previa de la versión local. |
| ⚙️ | predeploy |
Genera la versión de producción antes de implementarla. |
| ⚙️ | deploy |
Implementa el sitio en GitHub Pages desde la carpeta dist. |
¡Las contribuciones son siempre bienvenidas! Ya sea que estés informando errores, solicitando nuevas funciones o mejorando las funcionalidades existentes, tu ayuda es muy apreciada.
Si tienes alguna sugerencia que podría mejorar el proyecto, por favor haz un fork del repositorio y crea una pull request. También puedes simplemente abrir un issue con la etiqueta "enhancement".
Aquí tienes una guía rápida:
- Haz un fork del Proyecto
- Clona tu fork (
git clone <URL del fork>) - Añade el repositorio original como remoto (
git remote add upstream <URL del repositorio original>) - Crea tu Rama de Funcionalidad (
git switch -c feature/NuevaFuncionalidad) - Realiza tus Cambios (
git commit -m 'Add: alguna NuevaFuncionalidad') - Haz Push a la Rama (
git push origin feature/NuevaFuncionalidad) - Abre una pull request
No olvides dejar una estrella ⭐️
✌️
Un proyecto creado por @joserafael0160