- Descripción general del proyecto
- Objetivo del proyecto
- Dependencias
- Tecnologías
- Imágenes y videos
- La API
Nuestro equipo se ha centrado en crear una página de e-commerce para vender artículos de ropa.
Crear una tienda de ropa básica que contenga las siguientes funcionalidades:
- Ver todos los productos
- Ver productos en base a su ID
- Ver productos en base a su categoría
- Ver todos los productos como usuario (Admin)
- Ver productos en base a su ID como usuario (Admin)
- Crear nuevos productos
- Editar productos existentes
- Eliminar productos existentes
- Forkear el proyecto
- Abrir git y Clonar el repositorio:
1- git clone https://github.com/Andhalaya/project-backend.git
- Abrir en Visual Studio Code
- Instalar las dependencias
npm init -y
- Conectarse a un servidor
- O utilizar el siguiente link para visualizar la página web:
https://project-backend-production-d999.up.railway.app/products
Ver imágenes como Cliente
Pantalla inicial de nuestra tienda, incluye nuestro logo, menú de navegación por categorías, el botón para hacer login, un botón para activar el modo oscuro y la vista de los productos
Pantalla inicial de nuestra tienda vista desde el footer, incluye la vista de los productos, así como enlaces de interés, contacto y redes sociales; así como el botón para volver a la parte superior de la página
Pantalla de registro en nuestra tienda donde se muestra el formulario de registro, junto al botón de registro y vuelta atrás
Formulario para acceder al /dashboard e incluye el botón de registro
Al hacer click en un producto se muestran los detalles de este, que incluye la disponibilidad, descripción, categoría, talla, precio, guía de tallas, entrega y devoluciones, cambios y reembolsos, así como métodos de pago seguro
Más detalles al abrir el desplegable de entrega y devoluciones y el desplegable de cambios y reembolsos
Más detalles al abrir la guía de tallas, donde podemos ver el tallaje de todos los productos de nuestra web
Prueba de la página en un dispositivo móvil con la pantalla más pequeña
responsive.mp4
Ver imágenes como Admin
Pantalla inicial de nuestra tienda desde el punto de vista del Admin y con el modo oscuro activado, incluye nuestro logo, menú de navegación por categorías, el botón para hacer login, un botón para activar el modo oscuro y la vista de los productos
Pantalla inicial de nuestra tienda vista desde el footer como Admin, incluye la vista de los productos, así como enlaces de interés, contacto y redes sociales; así como el botón para volver a la parte superior de la página
Formulario para crear y añadir un nuevo producto con todos los requisitos necesarios
Al hacer click en un producto se muestran los detalles de este, que incluye la disponibilidad, descripción, categoría, talla, precio, guía de tallas, entrega y devoluciones, cambios y reembolsos, así como métodos de pago seguro. Además de todo esto incluye los botones para editar un producto y para borrar uno
Más detalles al abrir la guía de tallas, donde podemos ver el tallaje de todos los productos de nuestra web, así como la información de entregas y cambios de fondo
Vista para borrar un producto de la página de la tienda
Ver videos de la página web
products.mp4
Vista de toda la página como cliente, viendo todas las funcionalidades, la barra de navegación, los productos, el footer, el botón para volver arriba, los detalles de los productos y el modo noche
registerAndLogin.mp4
Vista de como es el registro y login en la página de la tienda
dashboard.mp4
Vista de toda la página como Admin, viendo las mismas funcionalidades que el cliente más la edición, creación y borrado de un producto
Para acceder a la documentación con swagger hay que acceder a través de la siguiente ruta:
https://project-backend-production-d999.up.railway.app/api-docs
🔒 Para que las rutas del /dashboard funcionen hay que estar logado en la página con un usuario y contraseña válidos
Ver imágenes documentación en Swagger
Vista general de la documentación en swagger con todas las rutas utilizadas, aquellas que necesitan autenticación aparecen con un candado
Vista de la ruta /api/dashboard, que muestra todos los productos de la página tras estar logado en la página
| Route Name | Request Type | RequestBody | Request Path |
|---|---|---|---|
showProductsAPI |
GET | null | /products |
showProductByIdAPI |
GET | null | /products/:productId |
showProductsByCategoryAPI |
GET | null | /category/:category |
| Route Name | Request Type | RequestBody | Request Path |
|---|---|---|---|
showProductByIdAPI |
PUT | null | /dashboard/:productId |
createProductAPI |
POST | (nombre, descripción, categoría, talla, precio, imagen) | /dashboard/new |
editProductAPI |
POST | (nombre, descripción, categoría, talla, precio, imagen) | /dashboard/:productId/edit |
deleteProductAPI |
POST | null | /dashboard/:productId/delete |