¡Bienvenido a CardHeroes, un juego de cartas 1 v/s 1 basado en elementos (fuego, agua, aire y tierra) diseñado para desafiar tu estrategia y habilidad! Enfréntate en intensas batallas y demuestra tu maestría elemental. 🌪️🔥💧🌍
El frontend de CardHeroes está desarrollado en React, una biblioteca de JavaScript enfocada en construir interfaces de usuario rápidas y dinámicas. Además, utiliza:
- React Router: para la gestión de rutas y navegación.
- Axios: para la comunicación eficiente con el backend.
- Vite: como herramienta de desarrollo y construcción rápida.
El diseño del frontend fue creado en Figma. Puedes ver los mockups y el diseño completo en el siguiente enlace:
Diseño en Figma
- Clona el repositorio.
- Instala las dependencias ejecutando:
yarn install
- Inicia el servidor de desarrollo con:
yarn dev
Repositorio del backend: GitHub - CardHeroes Backend
El backend de CardHeroes está construido con Node.js y utiliza Koa, un framework ligero y moderno que permite la creación de APIs rápidas y flexibles. Algunas de las características principales del backend incluyen:
- Koa Router: Maneja las rutas de manera sencilla y modular.
- Koa Body: Procesa las solicitudes HTTP con facilidad.
- JSON Web Tokens (JWT): Implementa autenticación segura basada en tokens.
- Sequelize: Un ORM que facilita la interacción con bases de datos PostgreSQL.
- Bcrypt: Para hashear las contraseñas de los usuarios.
- Clona el repositorio del backend.
- Instala las dependencias con:
yarn install
- Inicia el servidor de desarrollo con:
yarn dev
- Migraciones: Ejecuta las migraciones para configurar la base de datos.
yarn sequelize-cli db:migrate
- Datos iniciales (seeders): Inserta datos iniciales en la base de datos.
yarn sequelize-cli db:seed:all
El frontend de CardHeroes está desplegado en Netlify y está disponible en: https://cardheroes.netlify.app/
El backend de CardHeroes está desplegado en Render y está disponible en: https://cardheroes-api.onrender.com
El usuario se registra y luego ingresa sus credenciales para acceder al juego.
Una vez logueado, el usuario puede iniciar una nueva partida. Mientras que otro usuario logueado podría ingresar a la misma sala de espera.
Antes de jugar, cada jugador debe seleccionar su personaje favorito.
Aquí cada jugador va eligiendo la carta que desea jugar de forma estratégica.
Durante el juego, si un jugador logro ganar una ronda, obtendrá una estrella. Esta estrella permite usar la habilidad especial del personaje elegido al comienzo.
Cuando termina la partida, es decir, un jugador se queda sin vidas, se muestra un resumen del resultado.
