https://github.com/m0nt4ld0/talento-games
Proyecto en React del curso Talento Tech del primer cuatrimestre 2025
https://github.com/m0nt4ld0/talento-games
firebase-auth react react-native reactjs
Last synced: 3 months ago
JSON representation
Proyecto en React del curso Talento Tech del primer cuatrimestre 2025
- Host: GitHub
- URL: https://github.com/m0nt4ld0/talento-games
- Owner: m0nt4ld0
- Created: 2025-04-08T15:11:35.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2025-06-20T02:23:33.000Z (about 1 year ago)
- Last Synced: 2025-10-09T19:31:57.864Z (9 months ago)
- Topics: firebase-auth, react, react-native, reactjs
- Language: JavaScript
- Homepage: https://talento-games.vercel.app/
- Size: 7.89 MB
- Stars: 2
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Proyecto Final: Talento Games - Tienda de Videojuegos Retro
Este es un proyecto realizado como parte del curso **Talento Tech - React** durante el primer cuatrimestre de 2025. El proyecto simula un negocio de venta de videojuegos retro y está desarrollado en **React** utilizando **JSX**. La aplicación simula una tienda de videojuegos retro donde los usuarios pueden explorar una variedad de juegos, agregarlos a un carrito de compras y realizar la compra.
[Demo en YouTube](https://www.youtube.com/watch?v=DRMYStHDOvA)
# Tabla de Contenidos
- [Características](#características)
- [Tecnologías utilizadas](#tecnologías-utilizadas)
- [Requerimientos mínimos](#requerimientos-mínimos)
- [Cómo utilizarlo](#cómo-utilizarlo)
- [Clonar el repositorio](#clonar-el-repositorio)
- [Instalar las dependencias](#instalar-las-dependencias)
- [Configuración del archivo .env](#configuración-del-archivo-env)
- [Ejecutar el proyecto](#ejecutar-el-proyecto)
- [Contribuciones](#contribuciones)
- [Documentación de usuario](#documentación-de-usuario)
- [Inicio](#inicio)
- [Nosotros](#nosotros)
- [Juegos](#juegos)
- [Preguntas](#preguntas)
- [Contacto](#contacto)
- [Carrito](#carrito)
- [Registro de usuario](#registro-de-usuario)
- [Iniciar sesión (autenticación)](#iniciar-sesión-autenticación)
- [Iniciar sesión como administrador](#iniciar-sesión-como-administrador)
- [Página no encontrada (404)](#página-no-encontrada-404)
## Características
- **Carrito de compras:** Los usuarios pueden agregar juegos al carrito y proceder a la compra.
- **API de RetroAchievements:** Se consumen datos en tiempo real de la API de RetroAchievements para mostrar información sobre los juegos retro y sus logros.
- **Interfaz intuitiva:** La interfaz es fácil de usar y se enfoca en una experiencia de compra cómoda.
- **Autenticación de usuarios:** Tanto con cuenta de Google como con cualquier otro e-mail.
- **Formulario de contacto:** Recibo en mi correo las consultas que el usuario envía a través de dicho formulario. Cuenta con una validación que impone un límite de hasta 3 (tres) envíos consecutivos. Tras sobrepasar ese límite, deberá esperar 15 (quince) minutos para poder consultar nuevamente.
- **Panel de Administración:** El usuario con privilegios de administrador será capaz de crear, editar y eliminar productos.
## Tecnologías utilizadas
- Integración con API de [RetroAchievements](https://retroachievements.org/), para obtener información detallada sobre los juegos retro y sus logros.
- Autenticación de usuarios con Firebase, ya sea con cuenta de Google o cualquier otro e-mail.
- Envío del formulario de contacto vía e-mail con Formspree.
- Usuario con privilegios de administrador.
- Crear, editar y eliminar productos (comportamiento simulado usando MockAPI).
- Estilos realizados con Bootstrap for React y CSS personalizado.
- Animaciones realizadas con Sweet Alert 2 y Framer Motion
## Requerimientos mínimos
- Node.js v18.x+ (recomendado 20.x)
- Nvm 18 (recomendado 20.x)
- Vite 6.2
## Cómo utilizarlo
A continuación, una guía paso a paso para descargar el proyecto y ejecutarlo localmente.
### Clonar el repositorio
Para clonar este repositorio en tu máquina local, utiliza el siguiente comando:
```bash
git clone https://github.com/m0nt4ld0/respawn-party-website.git
```
### Instalar las dependencias
Una vez clonado el repositorio, navega a la carpeta del proyecto y ejecuta el siguiente comando para instalar las dependencias:
```bash
cd respawn-party-website
npm install
```
### Configuración del archivo .env
Este proyecto utiliza variables de entorno para acceder a la API de RetroAchievements y a Firebase. Para configurarlas:
Crea un archivo .env en la raíz del proyecto.
Abre el archivo .env y agrega tus credenciales de RetroAchievements y de Firebase siguiendo este formato:
```bash
VITE_RA_USERNAME=YOUR_RETROACHIEVEMENTS_USERNAME
VITE_RA_APIKEY=YOUR_RETROACHIEVEMENTS_API_KEY
VITE_FIREBASE_API_KEY=YOUR_FIREBASE_API_KEY
VITE_FIREBASE_AUTH_DOMAIN=YOUR_FIREBASE_AUTH_DOMAIN
VITE_FIREBASE_PROJECT_ID=YOUR_FIREBASE_PROJECT_ID
VITE_FIREBASE_STORAGE_BUCKET=YOUR_FIREBASE_STORAGE_BUCKET
VITE_FIREBASE_MESSAGING_SENDER_ID=YOUR_FIREBASE_MESSAGING_SENDER_ID
VITE_FIREBASE_APP_ID=YOUR_FIREBASE_APP_ID
VITE_FORMSPREE_URL=YOUR_VITE_FORMSPREE_URL
```
### Ejecutar el proyecto
```bash
npm start
```
### Contribuciones
Este proyecto **no admite contribuciones**, por tratarse de un trabajo integrador del curso Talento Tech.
## Documentación de usuario
### Inicio
Un carousel responsive con imágenes de juegos retro populares. Debajo ofrece un menú con las consolas retro más visitadas.
### Nosotros
Esta sección describe brevemente la historia del emprendimiento de venta de juegos retro.
### Juegos
Incluye el listado completo de las consolas disponibles.
Al hacer clic en "Ver juegos" accedemos al catálogo de esa consola. Tendremos un menú Breadcrumb donde podremos volver fácilmente a alguno de los pasos anteriores.
Al hacer clic en el nombre del juego, se abre el detalle del mismo (que incluye datos como nombre, fecha de lanzamiento, una imagen, cantidad de jugadores, etc).
También podremos agregar el juego al carrito.
Nótese que es posible agregar múltiples copias de un mismo juego.
### Preguntas
Contiene una serie de preguntas frecuentes y sus respuestas serán visibles al hacer clic en la pregunta.
### Contacto
A través de este formulario, es posible enviar dudas y/o comentarios. Admite hasta 3 (tres) comentarios consecutivos.
Pasado ese límite, advierte al usuario que tendrá que esperar 15 (quince) minutos para poder volver a enviar otra consulta.
### Carrito
- Visualizar productos agregados
- Modificar las cantidades de items de cada producto
- Quitar productos
- Eliminar todos los productos (vaciar carrito)
- Proceder a la compra
Si el carrito está vacío, mostrará el mensaje "No hay productos en el carrito." con un botón que nos invita a explorar el catálogo para seleccionar juegos para adquirirlos.
En la pantalla de compra nos pide que ingresemos una tarjeta de crédito. La validación está hecha con el algorimno de Luhn, para poder avanzar de pantalla recomiendo usar una herramienta como este [generador de tarjetas Fake](https://neapay.com/online-tools/credit-card-number-generator-validator.html).
Ejemplo:
- **Número**: 4514884147835118
- **CVV**: 147
- **Vencimiento**: 10/29
Al procesar la compra, nos muestra un mensaje de éxito, y nos redirige a la homepage.
### Registro de usuario
### Iniciar sesión (autenticación)
La web ofrece la posibilidad de autenticarse usando una cuenta de Google, o autenticarse utilizando otro e-mail que haya sido registrado previamente (ver Registro de usuario).
Al hacer clic en el botón Ingresar de la barra de navegación, nos lleva a la siguiente página para iniciar sesión en el sitio:
Inmediatamente después de autenticarnos, nos lleva a nuestro perfil. Si iniciamos sesión con nuestra cuenta de Google, muestra nuestra foto:
### Iniciar sesión como administrador
Para inicar sesión con privilegios de Administrador, utilizar:
```
correo admin@talentogames.com
contraseña admin123
```
Esta cuenta de administrador es ficticia, hecha específicamente para demostrar las funcionalidades de agregar, quitar o modificar productos.
El administrador tiene la posibilidad de dar de alta nuevos productos, editar los productos existentes y eliminar productos.
Al intentar eliminar un producto, nos va a pedir la confirmación de que realmente estamos seguros, antes de proceder:
### Página no encontrada (404)
Si llegaste a esta página, es muy probable que sea porque
- Escribiste mal una dirección en la barra de direcciones
- Una página que era parte de la web fue movida o renombrada y no se actualizó algún enlace que tiene que ver con ella
- Sos desarrollador/a y/o QA y querés comprobar si puse una página 404 personalizada
En cualquiera de los casos antes mencionados, vas a ver la siguiente pantalla:
