Buscador de películas 🎬

Este proyecto es una aplicación web desarrollada con React, TypeScript y Vite que permite buscar películas utilizando la API de The Movie Database (TMDB). Incluye orden alfabético, modo oscuro, animaciones y una interfaz moderna.

Funcionalidades principales

• Búsqueda de películas por nombre en tiempo real.
• Validaciones en la búsqueda (no permite búsquedas vacías, numéricas o de menos de 3 caracteres).
• Ordenar resultados alfabéticamente (A-Z / Z-A).
• Modo claro/oscuro con persistencia.
• Animaciones suaves con motion.
• Skeleton loading para mejorar la experiencia de usuario.
• Información detallada de cada película: año, sinopsis, duración, votos y popularidad.
• Interfaz responsive y accesible.

Implementación técnica

• React + TypeScript + Vite para una experiencia moderna y rápida.
• TailwindCSS para estilos y diseño adaptable.
• Custom Hooks (useSearch, useMovies) para separar la lógica de búsqueda y obtención de datos.
• Servicios en src/services/movies.ts y src/services/runtime.ts que consultan la API de TMDB usando la variable de entorno import.meta.env.VITE_TMDB_API_KEY.
• Animaciones con motion para transiciones y feedback visual.
• Componentes reutilizables para inputs, botones, separadores y temas.

Validaciones

• La búsqueda solo se ejecuta si el término no está vacío, no es numérico y tiene al menos 3 caracteres.
• Los errores de validación se muestran al usuario en tiempo real.

Optimización de rendimiento y UX

• Debounce:
  Se utiliza la función debounce para evitar llamadas excesivas a la API mientras el usuario escribe en el input de búsqueda. Esto mejora el rendimiento y reduce el consumo de recursos.

• useCallback:
  Se emplea useCallback para memorizar funciones como la búsqueda de películas y el debounce, evitando renders innecesarios y mejorando la eficiencia del componente.

• useMemo:
  Se usa useMemo para ordenar la lista de películas solo cuando cambian los datos o el tipo de orden, evitando cálculos innecesarios en cada render.

Estructura del proyecto

src/
  App.tsx
  main.tsx
  components/
    Movies.tsx
    Footer.tsx
    mode-toggle.tsx
    theme-provider.tsx
    ui/
      input.tsx
      separator.tsx
      button.tsx
      dialog.tsx
      ...
  hooks/
    useMovies.ts
    useSearch.ts
  services/
    movies.ts
    runtime.ts
  types/
    types.d.ts
  utils.ts/
    formatDate.ts
  assets/
  mocks/
    noResults.json
    withResults.json
public/

Créditos

• Datos proporcionados por TMDB.
• Creado por @carlosfrontend.

---

¡Disfruta buscando películas! 🍿