---

Real vs IA Game

Un juego de navegador que reta a los usuarios a identificar cuál imagen es real y cuál es generada por IA. Este proyecto incluye un backend en Node.js con MongoDB y un frontend en React. Ambos trabajan en conjunto para ofrecer una experiencia dinámica y competitiva.

---

Tabla de contenidos

1. Descripción
2. Características
3. Estructura del proyecto
4. Dependencias
5. Componentes principales
6. API
7. Base de datos
8. Instalación y configuración
9. Ejecución
10. Contribución

---

Descripción

Real vs IA Game es un juego web donde los usuarios deben adivinar qué imagen es real y cuál es generada por inteligencia artificial. Ofrece:

• Sistema de autenticación.
• Clasificación global.
• Perfil de usuario editable.
• Límite de intentos diarios.
• Gestión de imágenes a través de APIs como Unsplash, Pexels y Pixabay.

---

Características

Frontend

• Desarrollo en React con Tailwind CSS para el diseño.
• Interfaz de usuario intuitiva y adaptada a dispositivos móviles.
• Componentes reutilizables como Navbar, Leaderboard y Profile.

Backend

• Construido en Node.js con Express.
• Gestión de datos con MongoDB.
• Autenticación JWT (JSON Web Tokens) para sesiones seguras.
• API RESTful para comunicación con el frontend.

---

Estructura del proyecto

project-root/
├── frontend/
│   ├── src/
│   │   ├── components/
│   │   ├── hooks/
│   │   ├── pages/
│   │   └── services/
│   ├── .env
│   ├── package.json
│   └── README.md
├── backend/
│   ├── controllers/
│   ├── middlewares/
│   ├── models/
│   ├── routes/
│   ├── uploads/
│   ├── .env
│   ├── package.json
│   └── server.js
└── README.md

---

Dependencias

Frontend

• react: Framework para interfaces de usuario.
• axios: Cliente HTTP para realizar solicitudes API.
• react-router-dom: Navegación entre páginas.
• tailwindcss: Framework de diseño CSS.
• dotenv: Gestión de variables de entorno.

Backend

• express: Framework de servidor web.
• mongoose: ODM para MongoDB.
• jsonwebtoken: Gestión de tokens JWT.
• bcrypt: Hashing de contraseñas.
• dotenv: Gestión de variables de entorno.
• express-fileupload: Subida de imágenes.
• cors: Gestión de políticas de recursos compartidos.

---

Componentes principales

Frontend

Componentes

• Navbar: Barra de navegación superior con avatar del usuario y opciones.
• Leaderboard: Clasificación global de los jugadores.
• UserProfile: Página para editar perfil y visualizar datos del usuario.
• GamePage: Muestra las imágenes y opciones del juego.

Hooks

• useAuth: Gestión del estado de autenticación.

Páginas

• /: Página principal con información sobre el juego.
• /login: Inicia sesión en la aplicación.
• /signup: Regístrate como nuevo usuario.
• /leaderboard: Clasificación global.
• /profile: Perfil del usuario.

---

API

Frontend

Las solicitudes se realizan a través de axios con las siguientes rutas:

Método	Endpoint	Descripción
GET	/api/user/profile	Obtiene el perfil del usuario.
PUT	/api/user/profile	Actualiza los datos del usuario.
GET	/api/scores/leaderboard	Obtiene la clasificación global.
POST	/api/scores/update	Actualiza la puntuación del usuario.

Backend

Rutas gestionadas con Express:

Rutas de usuario

• POST /api/auth/register: Registra un nuevo usuario.
• POST /api/auth/login: Inicia sesión.
• POST /api/auth/refresh: Renueva el token de acceso.

Rutas de puntuación

• GET /api/scores/leaderboard: Devuelve la clasificación global.
• POST /api/scores/update: Actualiza la puntuación del usuario.

---

Base de datos

MongoDB

Colecciones

1. users_v2:

   {
     "_id": "ObjectId",
     "email": "string",
     "password": "string (hashed)",
     "username": "string",
     "phone": "string",
     "profileImage": "string",
     "bestScore": "number",
     "attemptsLeft": "number",
     "top": "number"
   }

2. scores:

   {
     "_id": "ObjectId",
     "user": "ObjectId (referencia a users_v2)",
     "bestScore": "number"
   }

---

Instalación y configuración

1. Clonar el repositorio

   git clone https://github.com/usuario/repo.git
   cd repo

2. Configurar el backend

   cd backend
   npm install
   touch .env

   Variables necesarias:

   PORT=5000
   MONGO_URI=mongodb://localhost:27017/real_vs_ia
   JWT_SECRET=tu_jwt_secret
   REFRESH_TOKEN_SECRET=tu_refresh_secret
   

3. Configurar el frontend

   cd frontend
   npm install
   touch .env

   Variables necesarias:

   REACT_APP_API_BASE_URL=http://localhost:5000/api
   

---

Ejecución

1. Iniciar el backend

   cd backend
   npm run dev

2. Iniciar el frontend

   cd frontend
   npm start

---

Contribución

¡Las contribuciones son bienvenidas! Por favor, abre un issue o realiza un pull request.

---

Licencia

Este proyecto está bajo la licencia MIT.

---