Project tutorial
Build a SvelteKit Blog
Build Wavelength Daily with TypeScript, SvelteKit, Open Props, Supabase Auth, Postgres row-level security, profile media, owned post CRUD, search, and Cloudflare Pages.
How this project works
Wavelength Daily is an original publishing app built in 12 cumulative, independently runnable snapshots.
The course starts with routes and scoped styling, then adds a local Supabase database, SSR authentication, profile media, ownership-enforced posts, pagination, search, password recovery, and Cloudflare Pages deployment.
Snapshots 4–12 seed [email protected] and [email protected]; both use password123. These accounts are local teaching data only.
Run npx supabase start inside a database snapshot, copy its printed public values into .env, and use npx supabase db reset to replay migration and seed files.
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 typed SvelteKit app on port 5173.
- Part 2: RoutingAdd static and dynamic filesystem routes.
- Part 3: Layout and UIBuild shared navigation with Open Props and scoped CSS.
- Part 4: Data LayerModel profiles and posts in Supabase Postgres with RLS.
- Part 5: Feed and DetailLoad published stories and individual detail pages.
- Part 6: RegistrationValidate and register users with Supabase Auth.
- Part 7: Login and SessionsImplement login, logout, callbacks, and SSR sessions.
- Part 8: Profiles and MediaEdit profiles and upload constrained avatar images.
- Part 9: Posts CRUD and OwnershipCreate, edit, and delete only owned posts.
- Part 10: Pagination and SearchPaginate and search the public story feed.
- Part 11: Password ResetRequest and complete a secure password reset.
- Part 12: DeployDeploy Wavelength Daily to Cloudflare Pages.