How I Built a 300+ Chapter Coding Platform with Angular SSR + Supabase (Solo, Free-Tier)

The Stack

Angular 21 (SSR + Signals) on the frontend, Node/Express + Supabase (Postgres) on the backend. Frontend deploys to Vercel, backend to Render. Zero infra cost.

Decision 1: One dynamic route instead of 150+

With 7 courses and 300+ chapters, hardcoding a route per chapter was a non-starter. Instead, a single dynamic route handles everything:

{ path: 'courses/:course/:chapter', component: GenericChapterComponent }

GenericChapterComponent reads the params, loads the right chapter data from per-course TypeScript map files, and renders. Adding a chapter = adding a data entry, not a route. This one choice kept the whole thing maintainable as a solo dev.

Decision 2: SSR was non-negotiable for SEO

A course site that Google can't read is pointless. Angular SSR renders every chapter server-side, so the content is in the raw HTML - not hydrated in later by JS. That's the difference between ranking and being invisible.

The SSR gotchas that bit me:

• No direct localStorage - it doesn't exist on the server. I wrapped it in getStoredLang() / setStoredLang() helpers that check the platform first.
• overflow-x: hidden broke position: fixed - switched to overflow-x: clip and it behaved.
• A dynamic sitemap generated at build time (via a tsx prebuild hook) keeps all 376 URLs fresh for crawlers.

Decision 3: Supabase for auth + data

Supabase gave me Postgres + Google OAuth + email auth on the free tier. One auth bug worth sharing: my register component called signUp() directly, bypassing my service layer - so the emailRedirectTo config never applied and confirmation links broke. Consolidating all auth calls into a single SupabaseService that returns { success, sessionCreated } fixed it and made the flow testable.

On SEO (the part most devs skip)

Building it was half the work. Making Google understand it was the other half:

• Self-referencing canonical tags (consistent www vs non-www - a split here quietly halves your ranking)
• Course + EducationalOrganization JSON-LD schema
• Keyword-aligned titles and meta on every page
• noindex on /login, /dashboard, etc. so utility pages don't pollute results

Takeaway

You can ship a genuinely large, SEO-solid platform solo on free tiers if you make a few structural bets early - one dynamic route, SSR from day one, and a single service layer for auth.

The content is free and open if you want to see how it turned out: devinhyderabad.com. Happy to answer anything about the SSR setup or the sitemap generation in the comments.

Link: https://www.devinhyderabad.com/

Top comments (0)