¡Bienvenido al Explorador del Multiverso de Rick and Morty! Esta aplicación te permite navegar, buscar y descubrir todos los personajes de la famosa serie, con una experiencia visual y sonora inmersiva.
- Galería de Personajes: Visualiza todos los personajes en una galería limpia y ordenada.
- Búsqueda Dinámica: Encuentra personajes por nombre en tiempo real.
- Paginación Eficiente: Navega fácilmente a través de cientos de personajes.
- Vista de Detalle de Personaje: Haz clic en un personaje para obtener información completa, incluyendo su estado, especie, origen y episodios en los que aparece, con un fondo de video dinámico.
- Gestión de Favoritos: Guarda tus personajes favoritos para acceder a ellos rápidamente en una sección dedicada con un fondo de video personalizado. Los favoritos se guardan localmente en tu navegador.
- Música de Fondo Ambiental: Disfruta de una banda sonora inmersiva con controles de volumen y mute.
- Elementos de Diseño Estéticos: Logos de Rick and Morty y de HedrichDev estratégicamente colocados para mejorar la experiencia visual.
- Diseño Adaptable (Responsive): Disfruta de una experiencia de usuario fluida tanto en dispositivos de escritorio como en móviles.
Este proyecto utiliza una arquitectura moderna y eficiente para ofrecer una experiencia de usuario de alta calidad.
- Framework:
para construir la interfaz de usuario.
- Bundler:
para un desarrollo rápido y un build optimizado.
- Lenguaje:
para un código más robusto y escalable.
- Gestión de Estado del Servidor:
para un fetching de datos, cacheo y sincronización eficientes.
- Estilos:
para un diseño rápido y personalizable.
- Componentes UI: Construido con
, una colección de componentes reutilizables y accesibles.
- Routing:
para una navegación ligera y eficiente entre páginas.
- Animaciones:
para animaciones fluidas y declarativas.
- Node.js:
El directorio
/servercontiene una configuración de servidor Node.js/Express (viaserver/index.ts). Este servidor se utiliza principalmente para:- Actuar como proxy de desarrollo para el servidor de Vite en entorno local, facilitando la integración.
- Servir los archivos estáticos del frontend en un entorno de producción (si se optara por un despliegue full-stack que lo requiriera). Nota Importante: Para la funcionalidad principal de este "Rick and Morty API Explorer" (obtener datos de la API de Rick and Morty), no se requiere un backend activo, ya que la aplicación funciona enteramente en el lado del cliente y consume la API directamente.
Sigue estos pasos para configurar y ejecutar el proyecto en tu entorno local.
-
Clona el repositorio:
git clone https://github.com/HedrichDev/RickMortyAPIExplorer cd RickMortyAPIExplorer -
Instala las dependencias: Este comando instalará todas las dependencias necesarias tanto para el cliente como para el servidor.
npm install
-
Ejecuta el proyecto en modo de desarrollo: Esto iniciará el servidor de desarrollo de Vite para el frontend y el servidor de Node.js/Express para el backend. Podrás ver la aplicación en
http://localhost:5173.npm run dev
npm run dev: Inicia los servidores de desarrollo para cliente y backend.npm run build: Compila el cliente de React/Vite para producción en la carpeta/dist.npm start: Inicia el servidor de Node.js/Express para servir el build de producción.npm run db:push: Empuja los cambios del esquema de la base de datos (Drizzle ORM).
Este proyecto está configurado para un despliegue sencillo en Netlify. Se incluye un archivo netlify.toml que define los siguientes ajustes:
- Build Command:
npm run build - Publish Directory:
dist - Fallback para SPA: Configurado para manejar rutas de cliente (redirecciona
/*a/index.html).
Para desplegar:
- Conecta tu repositorio a Netlify.
- Netlify detectará automáticamente el archivo
netlify.tomly aplicará la configuración.
Las contribuciones son bienvenidas. Si encuentras un error o tienes una mejora, por favor abre un 'issue' o envía un 'pull request'.
Este proyecto está bajo la Licencia MIT.
Hecho con ❤️ por HΞDЯICHDΞV