A mobile-first learning platform — catalogue, classroom, course builder and admin console — built as one product.
Full-stack engineer — product, data model, video pipeline, deployment
- Next.js
- TypeScript
- PostgreSQL
- Prisma
- Mux
- HLS
- Tailwind CSS
- Caddy
- DigitalOcean
Learning platform
The problem
Learners in Sri Lanka mostly study on a phone, often on mobile data, many in Sinhala, and plenty would rather pay by bank transfer than by card. Off-the-shelf course platforms assume the opposite — a laptop, fast broadband, English and a card at checkout.
The thinking
Build the whole school as one product instead of four tools stitched together: a public catalogue, a student classroom, an instructor's course builder and an admin console over one PostgreSQL schema. Reads and writes are split — every query lives in one place, every mutation in another — so business logic never ends up inside a page.
The temptation was to stitch together a video host, a form builder and a payment page. The decision was to own the model: one schema where a lesson, a watch position, a quiz attempt and a certificate are related rows. That is what lets a certificate be issued exactly once, an answer key stay on the server, and a course refuse to publish with an empty lesson in it.
The system
- Catalogue layer — courses, categories and instructor profiles, public and searchable
- Classroom layer — the course player, notes, resources, quizzes and assignments
- Builder layer — curriculum, six lesson types, and a publish check that refuses empty lessons
- Video layer — resumable uploads to Mux, signed playback, adaptive HLS streaming
- Progress layer — watch position, completion and certificates, kept consistent in one transaction
- Release layer — atomic deploys behind Caddy, smoke-tested before traffic moves, rolled back in seconds
The experience
The learner is on a phone, probably on mobile data, possibly reading in Sinhala. So every screen is designed at 320px first, navigation sits at the bottom where a thumb is, dialogs become bottom sheets, and video never downloads more than the screen can show. The instructor's builder makes a different promise: it may be dense, as long as a student never meets a half-built lesson.
The details
Signed video playback
Lessons stream from Mux on a token signed for one lesson after an access check, so a copied link plays nothing.
Streaming for mobile data
The player never fetches a rendition wider than the screen — a phone on mobile data does not pay for 1080p.
Progress that cannot disagree
Watch position only moves forward, completion updates the course total in the same transaction, and a certificate is issued exactly once.
Quizzes graded on the server
Correct answers never reach the browser. Attempts are graded server-side and the key comes back only after the attempt is recorded.
A builder that refuses gaps
Video, reading, PDF, link, quiz and assignment lessons, each with its own editor — and publishing is blocked while any visible lesson is empty.
Sinhala and bank transfer
Every page switches to Sinhala in one tap, and courses can be paid for by bank transfer, so nobody needs a card to enrol.
SMS campaigns
Admins text consenting students with a personal tracked link each, or make tracked links to share anywhere — and see who came through.
Atomic releases
A deploy is built and smoke-tested beside the live site before traffic switches; rolling back is a command, not a rebuild.
The result
VidLearn runs in production at vidlearn.online: a catalogue anyone can browse, a classroom that works on a phone over mobile data, and the tools to build, sell and promote courses — with a release pipeline that lets all of it change safely.
Lessons
- Authorisation belongs to every request, not to the layout — server actions never pass through one.
- If two numbers can disagree, eventually they will. Put them in the same transaction.
- On mobile data, bandwidth is a feature.
- A deploy that cannot fail in front of users changes how often you are willing to ship.