Pokedex desde 0 usando la Pokeapi con react + ts

Descripción

Este proyecto es una Pokédex desarrollada con React y TypeScript. Permite explorar, buscar y ver detalles de Pokémon utilizando la PokéAPI.

Características principales

• Inicio de sesión: Pantalla principal de login (usuario: admin, contraseña: admin).
• Listado de Pokémon: Visualiza una lista paginada de Pokémon con colores por tipo.
• Búsqueda y filtros: Busca Pokémon por nombre y filtra por tipo.
• Detalle de Pokémon: Haz clic en un Pokémon para ver su información detallada (imagen, tipos, estadísticas, etc.).
• 404 personalizado: Página de error para rutas inexistentes y para Pokémon no encontrados.
• Rutas protegidas: Solo puedes acceder a la Pokédex tras iniciar sesión correctamente.

Estructura de carpetas

src/
  App.tsx                # Componente principal y rutas
  main.tsx               # Punto de entrada de la app
  index.scss             # Estilos globales
  pages/
    LoginPage/           # Pantalla de login
    Home/                # Página principal de la Pokédex
    PokeDetail/          # Detalle de Pokémon
  components/            # Componentes reutilizables
  context/               # Contexto global (Pokémon)
  hooks/                 # Custom hooks
  interfaces/            # Tipos y contratos
  utils/                 # Utilidades

Instalación y uso

1. Clona el repositorio y entra en la carpeta del proyecto.
2. Instala dependencias:

   npm install
   # o
   yarn install

3. Inicia el servidor de desarrollo:

   npm run dev
   # o
   yarn dev

4. Abre http://localhost:5173 en tu navegador.

Credenciales de prueba

• Usuario: admin
• Contraseña: admin

Tecnologías utilizadas

• React
• TypeScript
• React Router DOM
• SCSS Modules
• PokéAPI

Notas

• El proyecto está pensado para fines educativos y de práctica.
• Puedes modificar la lógica de login, estilos y componentes según tus necesidades.

---

¡Disfruta explorando el mundo Pokémon!