Deadline:

• 07.05.2025 Deadline HARD!;

Changelog:

• 10.04.2025: assignment published!

The World Wide Web has revolutionized many areas and activities previously requiring physical interaction. The retail industry started a paradigm shift in 1994 with its first online sale, marking the beginning of what would become a global e-commerce strategy. Today, platforms like Amazon, Etsy, and Shopify enable millions of transactions daily, blending convenience with personalized user experiences.

In this assignment, you will build a simple web application using HTML, CSS (Bootstrap) and Python (Flask). The goal is to create a basic e-commerce-style website where users can browse a list of products, add selected items to a shopping cart and proceed to a checkout form to finally place an order.

You'll get hands-on experience with routing, templating, forms, and (optionally) storing data using files or a simple database (there are multiple bonus opportunities!).

In the following subsections, we define the minimal (required) aspects to be followed (especially to make the grading process easy to automate), plus some recommendations for the easiest approaches.

Overall requirements:

• a personalized HTML + CSS web template / design to base the rest of the application on (Bootstrap is recommended, but not required – you can use whatever design framework you want); it is mandatory to use some sort of server-based template engine (e.g., Jinja2) to avoid duplicate code;
• a front page showcasing your shop's products (see example screenshots below); see extra restrictions below!
• a shopping cart products can be added to; this must be persistent across page refreshes (e.g., stored inside a browser session)!
• a checkout form listing the cart products to be ordered with the final computed price (optionally, you may add mock taxes) and for taking in customer data (name, email, address fields);
• a method for persisting (storing) the user-submitted order details on the server (either using text files, some other format, e.g. JSON/YAML or a database – for bonus points);
• an additional “contact” page (fill it with a fake company details or whatever you want);
• you must respect the required route naming convention (specified in each of the sub-sections)!
• a Readme.(md|txt), a requirements.txt containing Python dependencies, a Docker container image with all dependencies to quickly start up the web application (important for making the evaluation process error-proof – a container will work everywhere else!) + other misc. files (see the archive structure in the last section);

We recommend starting this assignment with a HTML template for your design (plus various pages, e.g., specific forms), then porting it to Jinja2 templates and writing Flask route functions with the desired functionality last.

Now carefully read below for a description & recommendations for each of these requirements!