Final Project: Twitter Clone

This is the last project of the course, and it ties together nearly everything we’ve built. You’re going to write your own Twitter: a site where people sign up, log in, post short messages, and scroll through everyone else’s, all served by a web server you wrote and stored in a database you designed.

The comic above is a fight every web team eventually has. Back-end developers think the front end is “just playing with JS and HTML/CSS.” Front-end developers think the back end is “only CRUD all day long.” For this project you are both people at once, so you get to settle the argument yourself.

Due: Wednesday, December 16, the final project, demoed live during finals week. See the schedule and Submission below.

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 actually work
4. integrate the Python, Markdown, HTML, CSS, Jinja2, and SQL languages
5. practice using git

Instructions

None of the tools are new. You’ll write Python spread across several files, serve pages with FastAPI, store data in a sqlite3 database, generate HTML with Jinja2 templates, style it with CSS, and pull everything back out with SQL. It’s the same stack from the backend web dev unit, and the final project extends the FastAPI app you started in that lab, so you’re not beginning from an empty folder.

The shape underneath a site like this has a name, and the front-end developer in the comic already gave it away: CRUD, for 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. Almost every application you use is some arrangement of those four operations, and by the end of this you’ll have written all four yourself.

Grading rubric

This project is graded out of 48 points. 25 points come from the required tasks that everyone must complete, and there are roughly 99 points of optional tasks to choose from. Your grade is capped at 100/48 points, so there is far more extra credit available than you need; complete the tasks you find most interesting. The extra credit is deliberately generous, and you should lean on it.

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

Warning: If I can break into your site with an HTML injection attack, you take a -4 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 more tasks than you think you need. The buffer protects you if I break something or don’t award points for a task you thought you’d finished.

Required tasks

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

• Home, 5 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, 5 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, 5 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, 5 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, 5 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 3 points:

• Create a nicely themed webpage with HTML and CSS.

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

• 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 6 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 2 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 2 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 3-point task for linking URLs.

The following tasks are each worth 9 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 6-point reply task.

Submission

This one is a live demo instead of an upload. One-on-one, you’ll open your running site and walk me through each feature while I grade it, which usually takes five to fifteen minutes. Make sure your repository is pushed and your site is ready to launch before your slot.