🧁 Dulce & Co. — Ecommerce Fullstack

Proyecto académico fullstack · Ingeniería de Sistemas — 6to ciclo

Backend API · Frontend React · Instalación · Endpoints · Seed Data

---

¿Qué es esto?

rappiEcommerce / Dulce & Co. es un sistema de ecommerce fullstack construido desde cero:

• 🐍 Backend: REST API con Django + DRF + autenticación JWT
• ⚛️ Frontend: SPA en React (Vite) con diseño de pastelería artesanal
• 🛒 Flujo completo: Registro → Login → Catálogo → Carrito → Factura

---

🗂️ Estructura del proyecto

BackEnd1/
│
├── rappiEcommerce/          ← Configuración global Django
│   ├── settings.py
│   └── urls.py
│
├── ecommerce/               ← App principal
│   ├── models.py            ← Producto · Factura · DetalleFactura
│   ├── serializers.py
│   ├── views.py             ← CRUD completo
│   ├── urls.py
│   ├── admin.py             ← Panel admin personalizado
│   └── management/
│       └── commands/
│           └── seed_data.py ← Carga 10 usuarios + 99 productos
│
├── FrontEnd1/               ← React + Vite
│   └── src/
│       ├── api/axios.js     ← Cliente HTTP con interceptores JWT
│       ├── store/
│       │   ├── authStore.js ← Zustand (tokens + sesión)
│       │   └── cartStore.js ← Zustand (carrito persistente)
│       ├── components/      ← Navbar · ProductCard · ProtectedRoute
│       └── pages/           ← Home · Productos · Login · Register
│                               Carrito · Facturas · FacturaDetalle
│
├── db.sqlite3
└── manage.py

---

⚙️ Stack tecnológico

Capa	Tecnología
Lenguaje	Python 3.12
Framework backend	Django + Django REST Framework
Autenticación	SimpleJWT (access 5 min · refresh 1 día)
CORS	django-cors-headers
Base de datos	SQLite3 (desarrollo)
Framework frontend	React 18 + Vite
Estado global	Zustand (persistido en localStorage)
HTTP client	Axios + interceptores automáticos JWT
Enrutamiento	React Router DOM v6

---

🚀 Instalación rápida

Requisitos previos

• Python 3.10+
• Node.js 18+

Backend

# Clonar o entrar al directorio
cd BackEnd1

# Crear y activar entorno virtual
python -m venv .venv
.\.venv\Scripts\activate

# Instalar dependencias
pip install django djangorestframework djangorestframework-simplejwt django-cors-headers

# Aplicar migraciones
python manage.py migrate

# Crear superusuario (admin)
python manage.py createsuperuser

# Cargar datos de ejemplo
python manage.py seed_data

# Iniciar servidor
python manage.py runserver
# → http://127.0.0.1:8000

Frontend

cd FrontEnd1

npm install
npm run dev
# → http://localhost:5173

---

📡 Endpoints

Autenticación

Método	URL	Auth	Descripción
POST	/api/token/	❌	Login — obtiene access + refresh
POST	/api/token/refresh/	❌	Renueva el access token
POST	/api/token/verify/	❌	Verifica si un token es válido

Usuarios

Método	URL	Auth	Descripción
POST	/api/users/register/	❌	Registro público
GET	/api/users/	🔐 Admin	Listar todos
GET/PUT/PATCH/DELETE	/api/users/{id}/	🔐 JWT	Detalle / edición

Productos

Método	URL	Auth	Descripción
GET	/api/productos/	❌	Catálogo — soporta ?search= y ?ordering=
POST	/api/productos/	🔐 Admin	Crear producto
GET/PUT/PATCH	/api/productos/{id}/	Mixto	Ver / editar
DELETE	/api/productos/{id}/	🔐 Admin	Soft delete (marca activo=False)

Facturas y Detalle

Método	URL	Auth	Descripción
GET/POST	/api/facturas/	🔐 JWT	Lista las del usuario (admin ve todas)
GET/PUT/PATCH/DELETE	/api/facturas/{id}/	🔐 JWT	Detalle de factura
GET/POST	/api/facturas/{id}/detalles/	🔐 JWT	Líneas de detalle
GET/PUT/PATCH/DELETE	/api/facturas/{id}/detalles/{id}/	🔐 JWT	Detalle individual

Parámetros de búsqueda en productos:

GET /api/productos/?search=laptop
GET /api/productos/?ordering=-precio
GET /api/productos/?ordering=stock

---

🛒 Flujo de compra

1. Usuario inicia sesión  →  POST /api/token/  →  guarda JWT en localStorage
2. Navega el catálogo     →  GET /api/productos/
3. Agrega al carrito      →  Zustand cartStore (local, persistido)
4. Finaliza compra        →  POST /api/facturas/
                              POST /api/facturas/{id}/detalles/  (× cada producto)
5. Redirige automáticamente a /facturas/{id}  →  recibo con total calculado

---

🌱 Seed Data

El comando seed_data carga datos de prueba:

python manage.py seed_data

Tipo	Cantidad	Contraseña
Usuarios	10	password123
Productos	99	—

Usuarios de ejemplo: juan1, maria2, carlos3 ... valentina10

---

🖥️ Panel de administración

Accede a http://127.0.0.1:8000/admin con tu superusuario.

Incluye vistas personalizadas para:

• Productos — búsqueda, filtros, edición inline de stock y estado
• Facturas — con detalles embebidos (Inline TabularInline)
• Detalle de Facturas — subtotales calculados automáticamente

---

🔐 Seguridad y notas de diseño

Característica	Implementación
Soft delete	DELETE /api/productos/{id}/ → activo = False
Price snapshot	precio_unitario se guarda en DetalleFactura al crear
Auto-total	Factura.total se recalcula en cada save() de DetalleFactura
Token refresh automático	Interceptor Axios renueva el token en 401 sin intervención
Scoping de facturas	Usuario normal solo ve sus propias facturas

---

📚 Conceptos que cubre este proyecto

Adelanta temas que se ven en 7mo y 8vo ciclo de Ingeniería de Sistemas.

• ✅ REST API con verbos HTTP correctos
• ✅ Autenticación JWT stateless (sin sesiones de servidor)
• ✅ CRUD completo con permisos por rol
• ✅ ORM de Django — sin escribir SQL
• ✅ Serializers — validación y transformación de datos
• ✅ React SPA con estado global (Zustand)
• ✅ Interceptores Axios — refresh transparente de tokens
• ✅ Rutas protegidas en el frontend
• ✅ CORS — comunicación cross-origin entre servicios

---

🧪 Probar la API con ApiDog / Postman

# 1. Login
POST http://127.0.0.1:8000/api/token/
{ "username": "juan1", "password": "password123" }

# 2. Usar el access token como Bearer en los siguientes requests
Authorization: Bearer <access_token>

# 3. Crear una factura
POST http://127.0.0.1:8000/api/facturas/
{ "estado": "pendiente" }

# 4. Agregar un producto
POST http://127.0.0.1:8000/api/facturas/1/detalles/
{ "producto": 1, "cantidad": 2, "precio_unitario": "15.00" }

---

Hecho con Vibe Coding 🎵 — describiendo la idea, un error a la vez, hasta que funcionó.

Un estudiante de Ingeniería de Sistemas de 6to ciclo que se adelantó al plan de estudios 🚀

Este proyecto fue construido usando vibe coding: en lugar de escribir el código línea por línea, se colaboró con una IA describiendo qué se quería lograr y refinando el resultado en cada iteración. El resultado final es funcional, pero el aprendizaje real está en entender por qué cada pieza funciona.