Project tutorial

Build a Lit SSR Blog

Build Glasspoint Notes with Lit SSR, Express, Pico.css, SQLite, cookie sessions, owned post CRUD, search, password recovery, and Render deploy notes.

  • Difficulty Intermediate
  • Parts 12
  • Stack TypeScript, Express, Lit SSR, Pico.css, SQLite, cookie sessions, bcrypt

How this project works

Glasspoint Notes is an original teaching blog in twelve complete snapshots. Clone once and run any numbered folder without rebuilding earlier stages.

The path starts with Express and Lit templates, adds Pico layouts, then introduces a SQLite file per snapshot. Later parts add sessions, media, ownership, pagination, search, reset tokens, and deploy notes.

Snapshots 4–12 seed [email protected] and [email protected] with password123.

Each stage keeps its own DATABASE_PATH SQLite file (./glasspoint.db) so you can reset by deleting the database file. No Docker is required.

Start with part 1 Open GitHub repo

Parts in order

Work through the parts in sequence. Each lesson explains the ideas in plain language, then points you to a complete runnable snapshot on GitHub for that stage.

  1. Part 1: Getting StartedCreate a minimal Express + Lit SSR app.
  2. Part 2: RoutingOrganize page routes.
  3. Part 3: Layout and UIRender a shared layout and Lit post cards.
  4. Part 4: Data LayerPersist authors and posts in SQLite.
  5. Part 5: Feed and DetailBuild a database-backed feed and post detail.
  6. Part 6: RegistrationValidate accounts and store bcrypt hashes.
  7. Part 7: Login and SessionsAuthenticate with signed session cookies.
  8. Part 8: Profiles and MediaShow profiles and accept constrained avatar uploads.
  9. Part 9: Posts CRUD and OwnershipCreate, edit, and delete posts with owner authorization.
  10. Part 10: Pagination and SearchPaginate the feed and search post text.
  11. Part 11: Password ResetIssue expiring one-use password reset tokens.
  12. Part 12: DeployPrepare Glasspoint Notes for production hosting.