E-commerce con frontend y backend desacoplados: proyecto full stack en Python

Tabla de contenido

Como parte de mi formación en desarrollo web, trabajé en la creación de un e-commerce centrado en la cultura del mate, donde el principal objetivo fue desarrollar una solución completa separando frontend y backend.

Este proyecto representó mi primer acercamiento real a un flujo full stack, incluyendo diseño, desarrollo e integración conceptual entre capas.

💻 Repositorio: https://github.com/Grupo-22-ISPC/El-Club-Del-Mate
🌐 Interfaz (Frontend demo): https://grupo-22-ispc.github.io/El-Club-Del-Mate/

📌 Contexto del proyecto #

El objetivo era desarrollar una tienda online que permitiera:

Visualizar productos
Gestionar usuarios
Simular procesos de compra
Organizar la información en una base de datos

Además, el proyecto buscaba ir más allá de un simple CRUD, incorporando:

Identidad de producto (cultura del mate)
Experiencia de usuario
Organización de requisitos (IEEE 830)

🏗️ Enfoque: frontend y backend desacoplados #

Una de las decisiones más importantes fue trabajar con una separación clara entre frontend y backend.

Frontend #

HTML + CSS para la estructura y estilos
JavaScript para validaciones y manejo básico de interacción
Simulación de envío de datos

Backend #

Python
CRUD completo (usuarios, productos, pedidos, direcciones)
Conexión con base de datos MySQL

Ambas partes fueron desarrolladas de forma independiente, sin integración directa, ya que ese era el objetivo de la consigna: entender cada capa por separado.

🗄️ Diseño y modelado #

El proyecto incluyó:

Diagrama entidad-relación (DER)
Diagramas de clases (UML)
Casos de uso
Modelo relacional

Además, se definieron estructuras para:

Usuarios
Productos
Pedidos
Direcciones

Esto permitió tener una base sólida antes de implementar la lógica.

🧩 Metodología de trabajo #

El desarrollo se organizó utilizando Scrum, con:

Sprints
Product backlog
Historias de usuario
Roles definidos (Product Owner, Scrum Master, Developers)

También se utilizaron herramientas como:

Kanban
Issues
Wiki de documentación

Esto ayudó a simular un entorno de trabajo más cercano al real.

🤝 Mi participación #

Dentro del equipo participé en distintas áreas del desarrollo, incluyendo:

Implementación de funcionalidades del backend
Ajustes en lógica de negocio
Colaboración en decisiones generales del proyecto

Además, asumí el rol de Product Owner, participando en la definición de objetivos y prioridades.

⚠️ Limitaciones del proyecto #

Frontend y backend no estaban integrados
No había persistencia real en el flujo completo (solo en backend)
Validaciones limitadas en frontend
No se implementó un sistema de pagos real

Estas limitaciones respondían al enfoque académico del proyecto.

🚀 Qué aprendí #

Este proyecto fue clave para entender:

Separación entre frontend y backend
Flujo de datos en aplicaciones web
Modelado de sistemas más completos
Trabajo con metodologías ágiles (Scrum)
Organización de proyectos más grandes

💡 Qué haría diferente hoy #

Integrar frontend y backend mediante una API
Implementar autenticación real (JWT, sesiones, etc.)
Mejorar validaciones y manejo de errores
Agregar pasarela de pagos
Optimizar la experiencia de usuario

🧠 Conclusión #

Este proyecto me permitió tener una visión más completa del desarrollo web, entendiendo cómo se relacionan las distintas capas de una aplicación.

Más allá de sus limitaciones, fue una base importante para empezar a pensar en soluciones full stack de forma más estructurada.