Most courses build a todo app.You will build a payment platform.
30 lessons that take you from JavaScript fundamentals to a deployed bill payment product with real authentication, a Postgres database, a wallet, and a live payments API. You write every line. It ends on the internet, not in a sandbox.
- Written lessons
- 30
- Auto-graded exercises
- 29
- Of real work
- 40h
- Product you ship
- 1
Written lessons
Auto-graded exercises
Of real work
Product you ship
What you will have built by lesson 30
Not a portfolio toy. A product with money, users and consequences, which is the only kind that teaches you anything.
Real authentication
Registration, login, sessions, protected routes, password reset and email verification. Built on Supabase Auth, not a mocked user object.
A database you designed
You write the SQL, design the schema, model the relationships, and lock it down with row level security so users can only ever read their own rows.
A funded wallet
Balances, credits and debits, and a transaction ledger that stays consistent. The part most tutorials skip because it is the hard part.
Live bill payments
Airtime, data, electricity and cable TV through the RizPay API, with meter verification, duplicate prevention and signed webhooks.
An interface of your own
A Tailwind v4 component set and a dashboard with a sidebar and header that you assemble yourself, not a template you cloned.
A deployment, not a demo
Tested, optimised and shipped to Vercel with a URL you can send to anyone. The last lesson ends in production.
Read, build, prove it, repeat
Watching someone else type is not learning. Every lesson makes you produce something that either passes or does not.
- 01
Read the lesson
Every lesson is written long-form with the reasoning included, not a video you scrub through. Learning objectives up front so you know what you are about to be able to do.
- 02
Do the exercise
Generate your own copy of the exercise repository from our GitHub template, implement the files the lesson describes, and run the vitest suite locally until it is green.
- 03
Pass the quiz
Each lesson ends with a quiz and a passing score. You review what you missed and see the explanation, so a wrong answer teaches you something.
- 04
Watch the bar fill
Progress is tracked per lesson across the whole course. Close the tab, come back next week, pick up exactly where you stopped.
The exercises are real code. They live in a public GitHub template you generate into your own repository, with a vitest suite per lesson. Your solutions are yours, they stay on your account, and they are a git history you can show someone.
The whole syllabus, up front
30 lessons in seven phases. Nothing is hidden behind a sales page: this is exactly what you get, in order.
Foundations
The JavaScript, React and TypeScript you actually need. No gaps.
- 01JavaScript Essentials Refresher
- 02React Fundamentals Refresher
- 03TypeScript Essentials for Next.js
Next.js core
App Router, server and client components, server actions, API routes.
- 04Development Environment Setup
- 05Next.js 16 Introduction & Project Setup
- 06Routing & Navigation
- 07Server & Client Components
- 08Server Actions & Forms
- 09API Routes
- 10Error Handling & Loading States
Interface
Tailwind v4, a component library of your own, a real dashboard.
- 11Tailwind CSS v4 Setup & Basics
- 12Building UI Components
- 13Dashboard Layout with Sidebar and Header
Data layer
Postgres from first principles, then Supabase, schema design and row level security.
- 14SQL & PostgreSQL Fundamentals
- 15Supabase Setup & Configuration
- 16Database Schema Design
- 17Supabase Client in Next.js
- 18Row Level Security (RLS)
- 19Database Relationships & Complex Queries
Authentication
Sign up, sign in, sessions, protected routes, password recovery.
- 20Supabase Auth Setup
- 21Registration & Login Forms
- 22Session Management & Protected Routes
- 23Password Reset & Email Verification
The product
A wallet, a live payments API, and four bill categories that move real value.
- 24User Dashboard & Profile
- 25Wallet System
- 26Bill Payment API Integration
- 27Airtime & Data Purchase
- 28Electricity & Cable TV Payments
Ship it
Test it, tune it, put it on the internet.
- 29Testing & Optimization
- 30Deployment to Vercel
The catalog
One course is open now. The rest are being written to the same standard, and open to signed-in learners first.
Learn Next.js
Build a production-ready bill payment platform with Next.js, React, TypeScript, Supabase, and Tailwind CSS
Build a Fintech API
Design and ship the Rails API behind a payments product: idempotent money endpoints, webhooks, background jobs, and an audited ledger
Money in Postgres
Double-entry ledgers, exact decimal arithmetic, idempotency keys, and reconciliation: the data modelling that keeps balances correct
Ship a Mobile Wallet
Take a React Native and Expo wallet from first screen to both app stores, with biometric auth, deep links, and over-the-air updates
Multi-Tenant Storefronts
One Next.js codebase serving many branded merchants: subdomain routing, tenant isolation, theming, and per-tenant configuration
Learn Next.js
Build a production-ready bill payment platform with Next.js, React, TypeScript, Supabase, and Tailwind CSS.
No card needed to begin. Create an account when you want your progress saved.
- Lessons
- 30
- Estimated
- 40h
- Exercises
- 29
Lessons
Estimated
Exercises