Skip to content

README.md

Latest commit

 

History

History
272 lines (200 loc) · 8.38 KB

README.md

File metadata and controls

272 lines (200 loc) · 8.38 KB

🧁 Dulce & Co. — Ecommerce Fullstack

Python Django DRF React Vite JWT Vibe Coding

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.