¡Bienvenido al multiverso! Este es un juego de memoria de alto rendimiento desarrollado con React, Vite y Node.js v24, siguiendo los principios de Clean Architecture y SOLID.
El proyecto desafía a los jugadores a encontrar pares de personajes de la serie en el menor número de intentos posible, utilizando un sistema de autenticación moderno y una lógica de juego desacoplada en Custom Hooks.
- Frontend: React 18 + Vite (TypeScript).
- Runtime: Node.js v24.x.
- Gestor de Paquetes:
npm. - Autenticación: jose (JWT para entornos modernos).
- Testing: Vitest + React Testing Library.
- Estilos: CSS3 nativo con Custom Properties y animaciones avanzadas.
- Variables de Entorno:
.env.examplecon ejemplo deVITE_JWT_SECRET.
Copia el archivo .env.example a .env y configura tu clave secreta:
cp .env.example .env
# Editar .env y configurar VITE_JWT_SECRETEl código está organizado siguiendo una separación estricta de capas para garantizar la escalabilidad y facilidad de pruebas:
api/: Logica para la implementacion de la API de Rick and Morty.router/: Manejo de URLs y rutas de la aplicación.components/: Componentes reutilizables de la aplicación.domain/: Entidades y lógica de negocio pura (Interfaces, DTOs y utilidades de barajado).application/: Casos de uso y Hooks de orquestación (comouseMemoryGame).infrastructure/: Implementaciones externas (Servicios de API y Repositorios con sistema de Cache).presentation/: Componentes de React, Screens y estilos visuales.utils/: Guardias de ruta (PrivateRoute/PublicRoute) y gestión de Storage.
- El juego utiliza una API externa para obtener los personajes de Rick and Morty.
- La autenticación se realiza mediante tokens JWT.
- El juego tiene un sistema de puntuación que se actualiza en tiempo real.
PD: Puedes usar cualquier correo y contraseña para iniciar sesión.
- Node.js v24.x (Indispensable para compatibilidad con las últimas APIs).
- npm v10+.
-
Clonar el repositorio:
git clone https://github.com/gelvezz23/memoryGame.git cd memoryGame -
Instalar dependencias:
npm install
-
Iniciar entorno de desarrollo:
npm run dev
Este proyecto incluye pruebas unitarias para asegurar que la lógica de autenticación y el motor del juego funcionen correctamente.
- Correr pruebas:
npm run test
- Asynchronous Auth: Validación de tokens JWT de forma asíncrona para evitar bloqueos en el hilo principal.
- Portal Loader: Interfaz de carga temática inspirada en los portales de Rick.
- Rank System: El mensaje de victoria varía según tu desempeño (Nivel Rick, Morty o Jerry).
- Optimización VDOM: Uso estratégico de
useMemoyuseCallbackpara renders eficientes.
- Documentación de la API: API Documentation
La aplicación se encuentra deployada en Vercel: https://memory-game-ecru-pi.vercel.app/
Inspiración de diseño de la aplicación
- Diseño: Figma Design
- Carlos Gomez - Full Stack Software Engineer
- LinkedIn: https://www.linkedin.com/in/carlosmariogomezg/
Hecho con 💚 y mucha ciencia ficción. ¡Wubba Lubba Dub-Dub!
-
No use ningun centralizador de estados ya que maneja muy bien el estado local de la aplicación por medio de un custom hook, la ser solo 2 pantallas que se comunican no tuve la necesidad de implementar ningun estado global.
-
Utilice Vitest para las pruebas unitarias por ser una herramienta rapida y eficiente para testing en React y se comunica muy bien con Vite.
-
Quice simular la autenticacion como si un backend quien responde con un token de JWT usando la libreria de jose.
-
separe la logica de los componentes para mantenerlos limpios y faciles de mantener.
- Segui el principio de responsabilidad unica para mantener los componentes limpios y faciles de mantener.
- Utilice componentes funcionales y hooks para manejar el estado y la logica de la aplicacion.
- Utilice componentes reutilizables para mantener el codigo DRY.
- Proteccion de rutas por medio de React router para controlar el acceso a las pantallas.