E-commerce with decoupled frontend and backend: full stack project in Python

Table of Contents

As part of my web development studies, I worked on building an e-commerce platform focused on the culture of mate, where the main goal was to develop a complete solution with a clear separation between frontend and backend.

This project was my first real exposure to a full stack workflow, including design, development, and conceptual integration between layers.

💻 Repository: https://github.com/Grupo-22-ISPC/El-Club-Del-Mate
🌐 Frontend Interface (Demo): https://grupo-22-ispc.github.io/El-Club-Del-Mate/

📌 Project context #

The goal was to build an online store capable of:

Displaying products
Managing users
Simulating purchase flows
Structuring data in a database

The project also aimed to go beyond a simple CRUD by incorporating:

Product identity (mate culture)
User experience
Requirements specification (IEEE 830)

🏗️ Approach: decoupled frontend and backend #

One of the key decisions was to develop the system with a clear separation between frontend and backend.

Frontend #

HTML + CSS for structure and styling
JavaScript for validation and interaction
Simulated data submission

Backend #

Python
Full CRUD (users, products, orders, addresses)
MySQL database integration

Both parts were developed independently, without direct integration, in order to better understand each layer separately.

🗄️ Design and modeling #

The project included:

Entity-relationship diagram (ERD)
UML class diagrams
Use case diagrams
Relational model

Core entities included:

Users
Products
Orders
Addresses

This provided a solid foundation before implementing logic.

🧩 Methodology #

The project followed a Scrum approach:

Sprints
Product backlog
User stories
Defined roles (Product Owner, Scrum Master, Developers)

Additional tools:

Kanban boards
Issues tracking
Documentation via Wiki

This helped simulate a real development environment.

🤝 My role #

I contributed across multiple areas, including:

Backend feature implementation
Business logic adjustments
General project decisions

I also took the role of Product Owner, helping define priorities and goals.

⚠️ Limitations #

No integration between frontend and backend
No complete end-to-end persistence
Limited frontend validation
No real payment system

These limitations were aligned with the academic scope.

🚀 What I learned #

This project helped me understand:

Frontend and backend separation
Data flow in web applications
Modeling more complex systems
Working with agile methodologies (Scrum)
Structuring larger projects

💡 What I would improve today #

Integrate frontend and backend through an API
Implement real authentication (JWT, sessions, etc.)
Improve validation and error handling
Add a payment gateway
Enhance user experience

🧠 Conclusion #

This project gave me a broader perspective on web development, helping me understand how different layers of an application interact.

Despite its limitations, it was an important step toward thinking in terms of full stack solutions.