Project tutorial
Build a Remix Blog
Build Tidepool Notes with Remix, Bootstrap 5, Prisma, cookie session storage, bcrypt, owned post CRUD, search, password recovery, and Fly.io deployment notes.
How this project works
Tidepool 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 Remix loaders and file-based routes, adds Bootstrap layouts, then introduces isolated Postgres databases through Prisma. Later parts add bcrypt registration, signed cookie sessions, media, ownership, pagination, search, reset tokens, and Fly.io deploy notes.
Snapshots 4–12 seed [email protected] and [email protected] with password123.
Local Postgres runs through Docker Compose on host port 5442 with databases tidepool_01–tidepool_12.
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.
- Part 1: Getting StartedCreate a minimal Remix app on port 3004.
- Part 2: RoutingOrganize pages with Remix file-based routes.
- Part 3: Layout and UIRender SSR pages with Bootstrap 5.
- Part 4: Data LayerPersist authors and posts with Prisma and PostgreSQL.
- Part 5: Feed and DetailBuild a database-backed feed and post detail pages.
- Part 6: RegistrationValidate accounts and store bcrypt password hashes.
- Part 7: Login and SessionsAuthenticate with Remix cookie session storage.
- Part 8: Profiles and MediaShow author profiles and accept constrained avatar uploads.
- Part 9: Posts CRUD and OwnershipCreate, edit, and delete posts with owner authorization.
- Part 10: Pagination and SearchPaginate the feed and search post text.
- Part 11: Password ResetIssue expiring one-use password reset tokens.
- Part 12: DeployPrepare Tidepool Notes for Fly.io and managed Postgres.