Lab: FastAPI App

Due: Wednesday, December 9 at 11:59pm (one week after it is assigned) Worth: 8 points

This lab has no starter repository. You will build a small FastAPI app from scratch inside the GitHub repository that becomes your final project, the Twitter clone, and Gradescope will check its structure automatically. You will extend each route in the final project.

Start

If you have not created that repository yet, create an empty repository named twitter-clone under your account and clone it.

The branch is graded by instructor-owned tests on Gradescope. Get the five routes working and make the home page read from the database.

Requirement 0: A Reasonable Repo

Your project should live in a “reasonably structured” GitHub repo.

We are being intentionally vague about “reasonably structured” so that you get practice organizing a repo without step-by-step rules. Look back at the repos from previous assignments to get a sense of what makes a project layout reasonable: a clear place for your Python, your templates folder, and your data.

Requirement 1: Five Routes

Your webpage should have five routes:

Each route should have a corresponding HTML file in the templates folder, and each of these templates should extend a base.html template that contains the menu for your webpage. The base.html template should have an <h1> tag that is the title of your webpage, and the template for each route should contain an <h2> tag that is the title for that route.

Requirement 2: The Home Route Reads the Database

The / route must open a connection to a database created by db_create.py and display all of the messages, sorted with the most recent message at the top. For each message, you must display:

Divide this task into two steps.

Step 1. Create a list of dictionaries, where each dictionary holds one message and has the four key/value pairs above. Pass this list to your template, and write the Jinja2 loop that renders it. Get this working on hard-coded “fake” data first, so you can see the template work before the database is involved. The RealPython primer on Jinja2 templating covers all the syntax you need, including lists, dictionaries, and for loops.

Step 2. Once fake data renders correctly, replace it with real data pulled from the database. Use the two-table join from the SQL reading, attaching the users table to the messages table so each message comes with its author’s username and age. (The reading’s example filtered to adults with a WHERE clause; drop that clause and you get the messages for every user.) Use ? placeholders for any value that comes from the user, so your queries are not open to SQL injection.

Requirement 3: Static Files

We will not cover in class how to complete this requirement. Instead you should use this reference on serving static files in FastAPI. Use the reference and ask if you get stuck.

Your Python file should contain a route for static web resources served from a static folder. This folder should contain:

You must modify your / route to display this image somewhere.

You must modify your base.html template to include the style sheet. This should result in every route being styled through the template.

The styling can also count toward the final project’s optional webpage-design task.

Submit

Commit and push your work on a branch rather than your main line of work:

  1. Create a new branch lab-submission that contains all of the code for this lab, including the Python app, db_create.py, templates/, and static/ assets. A screenshot is not required.
  2. Make sure that branch is checked out in VS Code before committing.

Commit and sync the required files, then on Gradescope choose GitHub and submit your twitter-clone repository and its lab-submission branch.

After submitting, you should not modify the lab-submission branch. Do all of your later work on the main (or master) branch instead. Your final project will lose points if the lab-submission branch gets updated after you submit it. This preserves the submitted version while you continue building on another branch.