ChocoDevs es un proyecto de e-commerce full stack desarrollado con enfoque académico y profesional.
Permite gestionar productos (alta, baja, edición y listado) y realizar compras mediante Mercado Pago o pago en efectivo. Además, envía notificaciones automáticas por correo electrónico al vendedor cuando se concreta una compra, asegurando comunicación inmediata y efectiva.
El proyecto combina buenas prácticas de desarrollo web, experiencia de usuario y gestión de datos, siendo un ejemplo completo de CRUD full stack aplicado.
- Crear una tienda online funcional para la venta de alfajores e infusiones.
- Implementar un CRUD completo de productos (alta, baja, modificación y visualización).
- Desarrollar un frontend moderno, interactivo y responsivo con React, Vite y Bootstrap.
- Construir un backend escalable con Node.js, Express y MongoDB Atlas.
- Integrar una pasarela de pagos segura con Mercado Pago y opción de pago en efectivo.
- Aplicar buenas prácticas de desarrollo web, modularidad, componentes reutilizables y manejo de estados globales.
Página principal con catálogo destacado
Detalle individual del producto disponible
Página de la tienda con catálogo completo
Carrito de compras interactivo
Selección de método de pago: Mercado Pago o efectivo
Panel del administrador para **crear, editar y eliminar productos**, gestionar pedidos y mantener actualizado el inventario
Página mostrada al ingresar a una ruta inexistente
El proyecto abarca frontend y backend, cubriendo todo el flujo de compra y gestión de productos.
- Catálogo dinámico de productos con imágenes, precios y descripciones.
- Carrito persistente con localStorage.
- Integración con Mercado Pago y pago en efectivo.
- Confirmaciones visuales y manejo de errores de pago.
- Interfaz responsiva y amigable, desarrollada con React y Bootstrap.
- API RESTful con Node.js, Express y MongoDB Atlas.
- CRUD completo de productos: alta, baja, actualización y listado.
- Gestión de usuarios y autenticación con JWT.
- Notificaciones automáticas por correo electrónico con Nodemailer.
- Configuración de variables de entorno para seguridad y escalabilidad.
- Mercado Pago SDK para pagos online.
- Nodemailer para notificaciones automáticas.
- Panel administrativo con estadísticas de ventas.
- Sistema de roles (admin / cliente).
- Integración con almacenamiento en la nube para imágenes.
- Notificaciones en tiempo real con WebSockets o Firebase.
| Tecnología | Versión | Uso |
|---|---|---|
| React | 19.1.1 | Creación de interfaces dinámicas |
| Vite | 7.1.2 | Herramienta de desarrollo rápida |
| React Router DOM | 7.9.2 | Navegación entre vistas |
| Bootstrap | 5.3.8 | Diseño responsivo y grillas |
| React Bootstrap | 2.10.10 | Componentes UI reutilizables |
| SweetAlert2 | 11.23.0 | Alertas personalizadas |
| @mercadopago/sdk-react | 1.0.6 | Integración de pagos |
| Tecnología | Versión | Uso |
|---|---|---|
| Node.js | 20.x | Servidor y API REST |
| Express.js | 5.1.0 | Framework backend |
| Mongoose | 8.19.1 | Conexión con MongoDB Atlas |
| MongoDB Atlas | — | Base de datos NoSQL |
| dotenv | 17.2.3 | Variables de entorno |
| bcrypt | 6.0.0 | Hashing de contraseñas |
| JWT | 9.0.2 | Autenticación basada en tokens |
| Nodemailer | 7.0.10 | Notificaciones automáticas |
| Mercado Pago SDK (Node) | 2.9.0 | Pagos online |
- 🛠️ CRUD de productos: alta, baja, modificación y listado.
- 🛍️ Visualización de catálogo: listado dinámico y detalle individual.
- 🛒 Carrito de compras interactivo con actualización en tiempo real.
- 💳 Integración con Mercado Pago y pago en efectivo.
- ✉️ Notificaciones automáticas por correo al vendedor con Nodemailer.
- 📱 Diseño responsivo para móviles, tablets y desktop.
- 🔗 Comunicación full stack entre frontend y backend.
- ⚙️ Gestión de errores y validaciones robusta en ambas capas.
Cristian Díaz
Líder Técnico Full Stack – Arquitectura Frontend & Backend
- Responsable de planificación, estructura, desarrollo e integración técnica del proyecto.
- Especializado en React, Node.js y MongoDB, con foco en rendimiento, calidad y seguridad.
| Rol | Nombre | GitHub | |
|---|---|---|---|
| Líder Técnico Backend | Diaz Cristian Ivan |  GitHub |
 LinkedIn |
| Desarrollador | Cortez Hector | GitHub |
LinkedIn |
| Desarrollador | Leytes Rodrigo | GitHub |
LinkedIn |
| Desarrollador | Gimenez Miqueas | GitHub |
LinkedIn |
| Desarrollador | Paz Ezequiel | GitHub |
LinkedIn |
| Desarrollador | Diaz Federico | GitHub |
LinkedIn |
| Desarrollador | Vignati Mauro | GitHub |
LinkedIn |
Diaz Cristian Ivan
Líder Técnico Backend y Frontend – Arquitecto del proyecto
Desarrollador y arquitecto principal del proyecto, responsable de la planificación, estructura, desarrollo e integración técnica de todo el sistema, tanto en Frontend (React, Vite, Bootstrap) como en Backend (Node.js, Express, MongoDB / Mongo Atlas).
Ideador de toda la arquitectura y flujo del proyecto.
🚀 Deploys
Frontend: https://chocodevs.netlify.app
Backend: https://dynamic-devs-proyecto-integrador-cu.vercel.app
git clone https://github.com/PowerSystem2024/DynamicDevs_ProyectoIntegrador_CuartoSemestre_Front.git
cd DynamicDevs_ProyectoIntegrador_CuartoSemestre_Front
npm install
npm run dev
# BACKEND
git clone https://github.com/PowerSystem2024/DynamicDevs_ProyectoIntegrador_CuartoSemestre_Backend.git
cd Proyecto4semestreBackend
npm install
# Crear el archivo .env
MONGODB_URI=<URI_MONGO_ATLAS>
PORT=4001
# Ejecutar el backend
npm run devAgradecemos a la Universidad Tecnológica Nacional Mendoza – FRSR por el constante acompañamiento académico y por brindar los recursos necesarios para el desarrollo de este proyecto integrador.
Queremos reconocer especialmente al docente Ariel Betancud por su guía, apoyo y valiosas sugerencias durante todo el proceso.