Build a Flask Social Network

Build Campus Commons, a neighborhood social network with Flask, Jinja2, HTMX, Tailwind, SQLAlchemy, Flask-Login, PostgreSQL, Gunicorn, Nginx, VPS.

  • Difficulty Intermediate
  • Parts 12
  • Stack Flask, Jinja2, HTMX, Tailwind, SQLAlchemy, Flask-Login, PostgreSQL, Gunicorn, Nginx, VPS

How this project works

Campus Commons is the Flask remake of Westloop: a neighborhood social network with accounts, profiles, follows, likes, comments, a following timeline, search, notices, and a real Ubuntu VPS deploy. Each numbered folder in fcc-flask-social is a working snapshot.

The stack, and why these tools

JobChoiceWhy
Language / frameworkPython, FlaskFlask stays small. Blueprints replace Django apps: accounts, posts, social. PostgreSQL via SQLAlchemy — SQLite is only for part 1.
DatabasePostgreSQLFollows, likes, and comments need foreign keys and unique pairs. SQLite is only for the first laptop boot.
CSSTailwind CSSFeeds, avatars, and a sticky nav are layout-heavy. Utilities stay in the templates you already edit.
JavaScriptHTMX + Alpine.jsJinja + HTMX is the same idea as Westloop. Alpine for the menu.
AuthenticationFlask-Login + werkzeug password hashesFlask-Login and Werkzeug hashes. CSRF from Flask-WTF on every write, including HTMX.
Process / proxyGunicorn, Nginx, Let’s EncryptSame VPS shape as Westloop: one app process, Postgres on localhost, Nginx for TLS and static/media files.
Hosting / DNSHetzner Cloud CX22 (or Contabo / DigitalOcean), Cloudflare Registrar + DNSYou own the box. PaaS is easier and teaches less.
EmailConsole locally, Postmark in productionPassword reset must leave the laptop.

If you already finished the Flask blog, keep going — this project adds a social graph and a VPS ship, not another CRUD journal.

Open GitHub repo →

Parts in order

Work through the parts in sequence. Each lesson explains the ideas, then points you to a runnable GitHub snapshot.