Estructura del Proyecto

3. Estructura del Proyecto

La organización del proyecto CapyGaming sigue una estructura bien definida para garantizar claridad, escalabilidad y facilidad de mantenimiento. Está dividido en dos principales directorios:

🖥️ Frontend: Encargado de la interfaz de usuario (UI) y la interacción del cliente.
⚙️ Backend: Gestiona la lógica del servidor, la API REST y la conexión con la base de datos.

A continuación, presentamos el desglose detallado de cada parte del proyecto:

El proyecto está organizado en los principales directorios y archivos:

CapyGaming/
├── backend/ # Lógica del servidor y base de datos
├── frontend/ # Interface de usuario y experiencia del cliente
├── README.md # Documentación del proyecto
└── Diagrama de flujo/ # Diagramas y mapas del proyecto

Frontend

El directorio frontend contiene el diseño, componentes y lógica relacionados con la interfaz de usuario (UI). Todo el contenido visible del e-commerce se encuentra aquí.

Estructura del Frontend

frontend/
├── public/ # Archivos estáticos como iconos y favicons
├── src/ # Carpeta principal de la app
│ ├── assets/ # Recursos (imágenes, estilos, fuentes)
│ ├── components/ # Componentes reutilizables de la UI
│ ├── composables/ # Hooks y lógica reutilizable
│ ├── utils/ # Funciones auxiliares (helpers)
│ ├── router/ # Configuración de rutas (Vue Router)
│ ├── App.vue # Componente raíz de la aplicación
│ ├── main.js # Archivo de entrada para la aplicación
├── index.html # HTML base de toda la aplicación
├── package.json # Dependencias y configuraciones
├── vite.config.js # Configuración de Vite

Subdirectorios Clave Frontend

components/ – Contiene los componentes Vue reutilizables.
Ejemplo: NavBar.vue, Footer.vue, Carrito.vue, Modal.vue.
router/ – Define las rutas de navegación (por ejemplo: /home, /productos, etc.).
assets/ – Imágenes y estilos que dan vida al diseño visual (colores gamer, logotipos, iconos, etc.).
Un ejemplo de algunos componentes clave en la aplicación Frontend.

⚙️ Backend El backend contiene la lógica del servidor, la API y la interacción con la base de datos PostgreSQL.

📂 Estructura del Backend

backend/ ├── bd/ # Gestión y configuración de la base de datos │ ├── pool.js # Configuración de conexión a la base │ ├── seedProducts.js # Script para inicializar la base de datos ├── routes/ # Rutas API (endpoints RESTful) ├── controllers/ # Lógica de negocio de cada endpoint ├── middlewares/ # Validaciones y lógica de seguridad ├── node_modules/ # Dependencias de Node.js ├── package.json # Detalles y dependencias del backend

Subdirectorios Clave Backend

bd/ (Base de Datos):
pool.js: Configura y gestiona la conexión a la base PostgreSQL.
seedProducts.js: Script usado para precargar productos en la base de datos durante el desarrollo.
routes/: Define los endpoints de la API que conecta con el frontend.

Ejemplo:
GET /productos: Devuelve el listado de productos.
POST /usuarios/registro: Registra a un nuevo usuario.
controllers/: Contiene la lógica para procesar solicitudes, manejar datos, y retornarlos al frontend.
Ejemplo:

const getProductos = async (req, res) => {
  try {
    const result = await pool.query('SELECT * FROM productos');
    res.json(result.rows);
}
const getProductos = async (req, res) => {
try {
    const result = await pool.query('SELECT * FROM productos');
    res.json(result.rows);
} catch (error) {
    res.status(500).json({ error: 'Error al obtener productos' });
}
}; catch (error) {
    res.status(500).json({ error: 'Error al obtener productos' });
 }
};

Interacción Frontend y Backend

La comunicación entre el cliente (frontend) y el servidor (backend) es clave para el funcionamiento del proyecto. Utilizamos axios para realizar las solicitudes del lado cliente, y la API del backend gestiona las respuestas, asegurando que los datos fluyan correctamente.

Flujos Principales

• Flujo de Productos:
  El frontend solicita el catálogo a través del endpoint /productos.
  El backend consulta la base de datos PostgreSQL y retorna la información al cliente.
  El frontend renderiza dinámicamente los productos, incluyendo precio, stock y descripción.
  La interacción de usuario con el flujo de productos.
• Flujo de Compras (Carrito): El usuario agrega productos al carrito desde el frontend. El carrito mantiene los productos seleccionados y muestra el total. Cuando el usuario procede al pago, el backend valida los productos, confirma el stock y crea un registro en la base de datos.

Resumen Visual

Nuestra estructura bien organizada garantiza:

🚀 Desarrollo fácil y colaborativo.
👉 Una clara separación entre frontend, backend y base de datos.
✨ Escalabilidad y modularidad para futuras mejoras o integraciones.