[Sparta Coding Club] Backend Week 2 - Today I learned
Tags: python, beginners, webdev, backend
Published: 2024-03-24 13:53:45

## Building a One-Page Shopping Mall with Flask and MongoDB

### Introduction

Python's versatility in crafting marvelous projects never ceases to amaze me. This week at Sparta Coding Club, we delved into the world of backend development, exploring the power of Flask and MongoDB. Join me on this journey as we build a one-page shopping mall, leveraging Flask's elegance and MongoDB's scalability.

### Exploring Flask and MongoDB

#### Flask: A Lightweight Powerhouse

Flask, a lightweight yet robust web framework for Python, became the centerpiece of our exploration. Its simplicity and flexibility empower developers to create sophisticated web applications with ease.

#### MongoDB: Scalability and Ease of Management

To manage our data, we turned to MongoDB. Renowned for its scalability and ease of management, MongoDB Atlas served as our database solution.

### Setting Up Our Project

#### Step 1: Installing and Working with Flask

We kickstarted our project by installing Flask using pip:
```
pip install Flask
```

Next, we created a new Python file for our application, aptly named `app.py`.

#### Step 2: Initializing Our Flask Application

```python
from Flask import Flask
app = Flask(__name__)
```

#### Step 3: Setting Up the Database

With MongoDB Atlas as our trusted database, we defined the schema for our orders, including essential details such as customer order ID, product information, quantity, and customer contact details.

#### Step 4: Creating API Endpoints

We defined API endpoints for making an order (`POST`) and viewing the order list (`GET`). This involved leveraging Flask's routing capabilities and specifying the appropriate HTTP methods.

#### Step 5: Implementing the Order Logic

For the `POST` route, we extracted order details from the request and inserted them into the database. For the `GET` route, we queried the database for all orders and returned them to the user.

### Frontend Development

#### Crafting the HTML Page

We designed a simple yet intuitive HTML page, complete with a form for placing orders and a section to display the order list.

### Testing Our Application

#### Running Tests

We ran our Flask application and tested both the order creation and retrieval functionalities. Ensuring that the database updates correctly and the order list displays the latest information was crucial.

---

### Code and Output Screenshots


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5asacgm8rjjdhkqczei4.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/80cdjfwdjsyqyug3dlgy.png)

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r1i4r22ukgog6pjlwhtj.png)

### Reflections

#### The Rewarding Journey

The journey of developing a one-page shopping mall with Flask and MongoDB has been both enlightening and rewarding. Through meticulous planning and execution, we transformed our vision into a fully functional web application.

#### Future Endeavors

As we continue to refine and expand upon this project, we remain committed to exploring new technologies and pushing the boundaries of what is possible in the realm of web development.