Hero Games será un sistema web para la venta de artículos electrónicos. Permitirá a los clientes consultar productos, gestionar un carrito y realizar compras; además, contará con un panel administrativo para controlar productos, ventas, usuarios y stock.
Desarrollar una plataforma web responsive que centralice la venta de artículos electrónicos y facilite la administración del catálogo y las operaciones de la tienda.
El proyecto se encuentra en el Avance 1: Diseño e interfaces frontend. Actualmente se están implementando las vistas y recursos del frontend con HTML5, CSS3 y Bootstrap, dejando las plantillas preparadas para su futura integración con Thymeleaf y Spring Boot.
Para visualizar las interfaces actuales, abrir el archivo index.html en un navegador web.
En este primer avance se incluye el diseño y la implementación de las interfaces frontend:
El proyecto se desarrollará como un monorepo. El frontend estará integrado dentro de la aplicación Spring Boot, con la siguiente distribución:
En este avance, las interfaces se mantienen en la raíz para poder abrir directamente index.html:
Proyecto---Marcos-de-desarrollo-web/
├── index.html # Landing principal
├── html/
│ ├── login.html # Inicio de sesión
│ ├── registro.html # Registro de usuarios
│ ├── catalogo.html # Listado, búsqueda y filtros de productos
│ ├── producto-detalle.html # Información de un producto
│ ├── carrito.html # Productos seleccionados para comprar
│ ├── checkout.html # Confirmación y datos del pedido
│ ├── pago-resultado.html # Resultado del proceso de pago
│ ├── admin/
│ │ ├── dashboard.html # Resumen del panel administrativo
│ │ ├── productos.html # CRUD visual de productos
│ │ ├── ventas.html # Consulta de ventas totales
│ │ ├── clientes.html # Consulta de usuarios activos
│ │ └── reportes.html # Reporte y control de stock
│ └── error/
│ ├── 404.html # Página para recursos no encontrados
│ └── 500.html # Página para errores internos
├── css/
│ └── estilos.css # Estilos propios
└── README.md
Cuando se integre Spring Boot, la estructura objetivo del monorepo será la siguiente:
Proyecto---Marcos-de-desarrollo-web/
├── src/
│ └── main/
│ ├── java/ # Siguientes avances: backend Spring Boot
│ │ └── com/herogames/
│ │ ├── HeroGamesApplication.java
│ │ ├── controlador/
│ │ ├── servicios/
│ │ ├── repositorio/
│ │ ├── entidad/
│ │ └── dto/
│ └── resources/ # Siguientes avances: vistas y recursos Spring Boot
│ ├── templates/
│ │ ├── index.html # Landing principal
│ │ ├── login.html # Inicio de sesión
│ │ ├── registro.html # Registro de usuarios
│ │ ├── catalogo.html # Listado, búsqueda y filtros de productos
│ │ ├── producto-detalle.html # Información de un producto
│ │ ├── carrito.html # Productos seleccionados para comprar
│ │ ├── checkout.html # Confirmación y datos del pedido
│ │ ├── pago-resultado.html # Resultado del proceso de pago
│ │ ├── fragments/ # Componentes Thymeleaf reutilizables
│ │ │ ├── header.html # Metadatos y recursos comunes
│ │ │ ├── navbar.html # Barra de navegación
│ │ │ └── footer.html # Pie de página
│ │ ├── admin/
│ │ │ ├── dashboard.html # Resumen del panel administrativo
│ │ │ ├── productos.html # CRUD de productos
│ │ │ ├── ventas.html # Consulta de ventas totales
│ │ │ ├── usuarios.html # Consulta de usuarios activos
│ │ │ └── reporte-stock.html # Reporte y control de stock
│ │ └── error/
│ │ ├── 404.html # Página para recursos no encontrados
│ │ └── 500.html # Página para errores internos del servidor
│ ├── static/
│ │ ├── css/ # Hojas de estilos propias
│ │ ├── js/ # JavaScript del frontend
│ │ └── img/ # Imágenes y recursos visuales
│ └── application.properties
├── pom.xml # Siguientes avances: configuración Spring Boot
└── README.md
html/ y css/.resources/templates, integración funcional con Spring Boot y Thymeleaf, además de controladores, servicios, repositorios, entidades y funcionalidades del sistema.| ID | Requisito | Descripción |
|---|---|---|
| RF-01 | Registro de usuarios | El sistema permitirá crear una cuenta de usuario. |
| RF-02 | Inicio de sesión | El sistema permitirá iniciar sesión con las credenciales registradas. |
| RF-03 | Cierre de sesión | El usuario podrá cerrar su sesión de forma segura. |
| RF-04 | Visualización del catálogo | El cliente podrá consultar los productos disponibles. |
| RF-05 | Búsqueda de productos | El cliente podrá buscar productos por su nombre o información relacionada. |
| RF-06 | Filtrado de productos | El cliente podrá filtrar productos según sus categorías. |
| RF-07 | Detalle de producto | El sistema mostrará la información detallada de cada producto. |
| RF-08 | Categoría del producto | Cada producto pertenecerá exclusivamente a una categoría. |
| RF-09 | Recomendación de productos | El sistema recomendará productos relacionados con la categoría consultada. |
| RF-10 | Agregar al carrito | El cliente podrá agregar productos al carrito de compra. |
| RF-11 | Quitar del carrito | El cliente podrá quitar productos del carrito. |
| RF-12 | Actualizar cantidades | El cliente podrá modificar las cantidades de los productos del carrito. |
| RF-13 | Resumen de compra | El sistema mostrará el resumen de productos, cantidades y total. |
| RF-14 | Proceso de pago | El sistema dirigirá al cliente al proceso de pago. |
| RF-15 | Confirmación del pedido | El sistema mostrará el resultado del pago y la confirmación del pedido. |
| RF-16 | Dashboard administrativo | El administrador podrá consultar un resumen de la operación de la tienda. |
| RF-17 | CRUD de productos | El administrador podrá crear, consultar, actualizar y eliminar productos. |
| RF-18 | Consulta de ventas | El administrador podrá consultar las ventas totales. |
| RF-19 | Consulta de usuarios | El administrador podrá consultar los usuarios activos. |
| RF-20 | Reporte de stock | El administrador podrá consultar y controlar el stock de productos. |