Proyecto Memory: mi juego de parejas full-stack

Así desarrollé mi versión del clásico “Memory” con Next.js, Tailwind, APIs externas y mi propia API en Laravel.

Visión general del proyecto

Dentro del módulo 6 (cliente) y 7 (servidor) de DAW, me propuse crear Memory, un juego de parejas donde el reto es encontrar todas las cartas iguales en tiempo limitado. El flujo es sencillo: al hacer clic, la carta gira un segundo mostrando un personaje (primero de PokeAPI o Marvel API; luego, de mi propia API), y si hay coincidencia permanece descubierta sumando puntos.

Tecnologías y arquitectura

Frontend

  • Next.js Next.js 14+ (App Router)
  • Tailwind CSS Tailwind CSS

APIs

  • PokeAPI & Marvel API (fetch paralela)
  • Laravel API propia en Laravel (personajes y partidas)

Backend & Despliegue

  • Laravel Laravel + MySQL
  • Vercel Vercel (CI/CD)

Backlog y Sprints

  • Sprint 1–3 (Frontend): Configuración del proyecto, rutas con App Router y lógica básica del juego (componentes, contadores, emparejamiento).
  • Sprint 4–5 (Backend): API en Laravel: modelado de base de datos, endpoints CRUD, gestión de usuarios y partidas con autenticación.
  • Sprint 6–7 (Frontend): Integración de login real, dashboard de usuario, registro de partidas y sustitución de la API externa por la propia.

Retos superados y aprendizajes

  • Comunicación asíncrona: dominar fetch y carga paralela de varias APIs.
  • Diseño de API REST: migración de modelos, endpoints claros, validación y pruebas con Postman.
  • Autenticación y seguridad: registro/login, manejo de tokens y protección de rutas.
  • UX y accesibilidad: componentes accesibles con Tailwind y shadcn/ui.
  • Despliegue e integración continua: pipelines automáticos en Vercel y servidor Laravel.
“Este proyecto ha sido una inmersión real en desarrollo full-stack: he combinado conocimientos de cliente y servidor, aprendido a integrar y luego sustituir APIs, y reforzado mis habilidades de despliegue y testing.”

Demo en Vivo

Ver código en GitHub

Contacta conmigo