Final Project: Twitter Clone

For the final project, you will build a small Twitter-like site where people sign up, log in, post messages, and read a shared feed. Your Python web server will generate the pages and store the data in a database. The project includes both the front end and the back end shown in the comic.

Repository due: Wednesday, December 16 at 11:59pm. Live demo: Wednesday, December 16, 2:00–5:00pm, during the official final-exam slot; see Submit below.

Start

Continue on the default branch of the twitter-clone repository from the FastAPI lab. Leave the lab’s lab-submission branch unchanged.

Learning Objectives

1. create large Python programs that span multiple files
2. develop a CRUD (Create, Read, Update, Delete) web app
3. understand how social media websites work
4. integrate the Python, Markdown, HTML, CSS, Jinja2, and SQL languages
5. practice using git

Build the Site

Extend the FastAPI app from the backend web development lab. The project uses Python across several files, a sqlite3 database, Jinja2 templates, CSS, and SQL.

The site implements CRUD: Create, Read, Update, and Delete. Users create accounts and post messages, read the feed, update posts they want to fix, and delete the ones they regret.

Grading Rubric

This project is graded out of 62 points. 30 points come from the required tasks that everyone must complete, and there are 138 points of optional tasks to choose from. Your grade is capped at 129/62 points, so choose the optional tasks you find most interesting.

The five required routes are checked by instructor-owned pytest tests in Gradescope (6 points each). The grader imports the FastAPI app, uses an isolated TestClient, creates unique test accounts and messages, and never contacts the public internet. Optional features are checked only when claimed in submission.toml. The grader exercises URL linking, automatic signup login, JSON messages, mentions, and Markdown through your app. Other optional features need a live demonstration or inspection of their SQL, browser behavior, or outside-service evidence. Their Gradescope results say that instructor review is pending and do not award points merely for finding a keyword in the code. The themed-design task remains a 4-point instructor review because visual quality is subjective. During the demo, the instructor also checks the required database fields, creation times, logout cookies, and injection protections. No particular timestamp format is required; if the grader cannot identify your displayed times, that route is flagged for review.

Warning: If I can break into your site with a SQL injection attack, you take a -13 point penalty.

Warning: If I can break into your site with an HTML injection attack, you take a -5 point penalty.

Warning: While grading, I’ll actively try to make your site throw an Internal Server Error. If I manage it, you get no points for the task that caused it.

Hint: Complete extra tasks as a buffer in case a feature breaks during the demo or does not meet the rubric.

Required Tasks

Each required task is worth 6 points and matches one route on your site.

• Home, 6 points

  • a link to this page is always visible in the menu, whether or not the user is logged in

  • the route displays every message in the system

  • messages are ordered chronologically, with the most recent at the top

  • each message shows the account that posted it, the time it was created, and the message contents

  • at least one message contains a single quote ' and a double quote "

    (this check exists to make you confront SQL and HTML injection early)

• Log in, 6 points

  • this link is visible in the menu only when the user is not logged in

  • the route shows a form for a username and password, and the password box does not display the password as it is typed

    Hint: Don’t use type=text on your input tag. Find the input type meant for passwords.

  • you show a sensible error message when the username or password is wrong

  • a successful login redirects the user to the homepage automatically

• Log out, 6 points

  • this link is visible only when the user is logged in

  • the route deletes the cookies the login form set, logging the user out

    Hint: We didn’t cover deleting cookies in class, but this StackOverflow post explains it.

• Create new user accounts, 6 points

  • this link is visible in the menu only when the user is not logged in

  • trying to create an account that already exists produces a sensible error message

    Hint: You know an account already exists because the INSERT fails with a sqlite error about violating a unique constraint.

  • the user enters their password twice, and mismatched passwords produce a sensible error message

• Create a message, 6 points

  • this link is visible in the menu only when the user is logged in

  • the user can enter any message body they like, and you also store the id of the user who created it and the time it was created

  • you only earn credit for this route once a new message correctly appears on the home route

Extra Credit

The following tasks are each worth 4 points:

• Create a nicely themed webpage with HTML and CSS.

  I’ll use my own aesthetic judgment for what counts as “nicely themed,” but the simple CSS from the start of the course is sufficient.

• Turn every URL in a message into a real link with the <a> tag.

• Populate your Twitter clone with at least 200 user accounts, each with 200 random messages, for 40,000 messages in total.

  Hint: Modify the db_create.py file to generate the messages randomly.

• Allow deleting individual messages.

• Allow editing a message after it’s posted. You must show that a message has been edited, along with the time of the most recent edit.

• Allow deleting user accounts.

• Log a user into a newly created account automatically, and send them to the home page instead of the create-user page.

• Allow changing a password after the account exists. The reset form must require the old password and the new password typed twice.

• Give each user a unique image that appears with every post. The site https://robohash.org makes this easy.

• Add a JSON endpoint for the messages route that returns the messages as JSON instead of HTML.

• Publish your site so other computers can reach it. To earn this, I have to be able to open your webpage from my own computer over your IP address, which will take some networking research.

  Hint: If you haven’t tested the connection from a computer that isn’t yours, you haven’t finished this task and won’t get the points.

The following tasks are each worth 8 points. Each one needs either more advanced SQL (a trickier SELECT) or a change to your table schemas:

• Show only 50 messages at a time on the messages route, with “next” and “previous” buttons at the bottom. Use SQL’s offset and limit so paging stays efficient.

• Add user profile pages. A user can edit a description of themselves, anyone can view it, and the page also shows that user’s most recent messages.

• Let users @ mention each other. Any @username in a message becomes a link to all of that user’s messages, or to their profile page if you built one.

• Add message search using SQL’s LIKE operator, done in SQL rather than in Python. Use sqlite’s FTS5 extension for 3 extra points.

• Reset a user’s password by emailing them a new one, and force them to change it on their next login.

• Let users reply to messages, displayed in threads like Reddit. Replying to top-level messages is enough for full credit; supporting replies to replies earns 3 extra points.

• Support switching the interface language, with at least three languages to choose from.

• Allow Markdown formatting in messages.

  Hint: You can reuse the Markdown compiler you built in Project 1 to turn the Markdown into the HTML you display.

  Hint: This combines easily with the 4-point task for linking URLs.

The following tasks are each worth 12 points of extra credit:

• Use JavaScript to create, edit, and remove posts without refreshing the page. Your FastAPI server should expose JSON endpoints for these actions, and your JavaScript should update the DOM directly. We won’t cover this in class, so you’ll research it yourself.

• Create a special AI user account. Whenever a message @mentions it, the account replies automatically using an LLM, much like @grok on X.

  Hint: This pairs well with the 8-point reply task.

Submit

Add submission.toml at the repository root so the grader does not have to guess your module, route names, or HTML form-field names:

[app]
module = "main"          # Python import path, without .py
object = "app"           # FastAPI object in that module
home = "/"
login = "/login"
logout = "/logout"
signup = "/create_user"
new_message = "/create_message"

[forms]
username = "username"
password = "password"
password_confirm = "password2"
message = "message"

[features]
# Use true for structural features, a route path for route-based features,
# and a URL for published_site. Delete or leave false anything not claimed.
linked_urls = false
large_seed = false
delete_messages = false
edit_messages = false
delete_accounts = false
signup_login = false
change_password = false
user_images = false
messages_json = false
published_site = false
pagination = false
profiles = false
mentions = false
search = false
fts5 = false
email_reset = false
replies = false
nested_replies = false
languages = false
markdown = false
javascript_crud = false
ai_account = false

For example, claiming a JSON route would use messages_json = "/messages.json", and claiming a published site would use published_site = "https://your-site.example/". For a route with a parameter, use its registered pattern, such as delete_messages = "/messages/{message_id}/delete". Unclaimed optional tests are skipped and do not lower your score. Claimed features awaiting review retain their published point values; the instructor adds any earned points after the demonstration.

Commit and sync the required files. On Gradescope, choose GitHub and submit your twitter-clone repository and the branch containing your commit by 11:59pm on Wednesday, December 16.

You will also give a five-to-fifteen-minute one-on-one demo during the official final slot, Wednesday, December 16 from 2:00–5:00pm. The automated result shows the checks the grader can run; use the demo to show the themed design, claimed features awaiting review, and outside-service evidence. Before your slot, push the version you plan to show and confirm that the site launches.