The brief
Toko Kita is a small Indonesian online shop that sells coffee, kitchen equipment, stationery, home goods and a few electronics. Its website was built with a drag-and-drop shop builder, and the team has outgrown it. A freelancer is building a mobile app, and the app needs an API to talk to. The owner also wants a simple shop page that works without JavaScript, so it loads fast on slow connections.
You're building both in Flask. The API has two parts: placing orders, and searching the products. The page renders the product list from a template that shares its layout with the rest of the site. These are the parts of a back end where mistakes cost money or trust. An order that skips validation can sell stock the shop doesn't have, and a page that doesn't escape its data can be broken by one odd product name. The tickets are strict about both.
How the tasks work
Each task is checked automatically with Flask's test client: the checker sends requests to your app and looks at the status codes, the JSON and the HTML that come back. The status codes matter as much as the data. A client like the mobile app decides what to show from the status code before it even reads the body. The tickets say what each URL must do, not how to structure your code. There are hints if you get stuck, but try each task without opening the solution first.
The tasks
| # | Task | Main skills |
|---|---|---|
| 1 | An orders API | POST and GET routes, JSON, validation, status codes |
| 2 | Product search | Query strings, filtering, sorting, 400 for bad input |
| 3 | The shop page | Jinja templates, extends, loops, a custom filter, escaping |
Every task gives you its data in the starter code (a small PRODUCTS dictionary or list), so there's no database to set up. Task 3 also uses templates/base.html, the layout every page on the site shares:
<!doctype html>
<html>
<head><title>{% block title %}Toko Kita{% endblock %}</title></head>
<body>
<nav><a href="/">Home</a> · <a href="/shop">Shop</a></nav>
<main>{% block content %}{% endblock %}</main>
<footer>© Toko Kita</footer>
</body>
</html>When you're ready, open Task 1.