Build. Scale. Teach: Architecting and Scaling a Production-Ready Modern Course Platform with Next.js

[Music] All right. Um, hello everyone. My name is Ankita and I'm a tech educator. I'm going to be talking about how I architected and scaled a production ready modern course platform with Nex.js. I want to walk you through what it takes to scale a serious platform as a oneperson business. the architectural choices I had to make, the mistakes I made along the way, and some performance

wins that made it all possible. Now, the lessons and learning that I'm going to be sharing here will be applicable to any content heavy platform that you would be working on. So, having said that, let's dive in. So, this is the course where I build the course platform if you want to go check it out. So, the first question is why did I build a custom course platform? Because developers learn best by building, not just watching. Existing course platforms

were static. Most online coding platforms are not meant for developers. We need to experience things. We need to experiment, break things, and see results instantly. And watching someone else code isn't enough with just video tutorials. You need to touch the code yourself. But you know as every developer does I can sort of go overboard. So I wanted to add some constraints here. My goals were quite simple. No build a platform for

developers. No cookie cutter platforms. No just text and video or just simply text. I wanted interactive lessons and live projects. And I want wanted the users of my platform that is my students to learn by building and doing. I also wanted to make learning more fun. So which will help improve retention. So I wanted to add some gamification features as well. So first let me talk about the text stack and this text stack blends

Nex.js's modern features with reliable tooling. So obviously the first one is Nex.js. The foundation of the platform starts here. for its full track capabilities. I use React for interactivity which Nex.js is built on top of and Typescript for safety at scale. Then I on the back end I use Neon DB for my Postgress database. It's serverless, scalable and instantly connects from anywhere. On top of that I also use ZOD where

which ensures every request, schema and form is validated before it even hits the database. So no unsaved data, no surprises. I used MDX because every lesson is written in MDX which let lets me blend markdown with live react components. This combined with survey actions meant that students can interact directly with the lessons for the embeddables for coding in environment embeddables. I use stack blitz and stack blitz is an amazing platform where I

could spin up a coding environment and go from there. Tailwind CSS that handles the styling. Shads and UI gave me a solid component foundation and together they made the platform more accessible and modern while keeping my CSS lightweight and consistent. I use Sentry for logging so I know exactly what's going on with my app and Versel handled all the deployment and edge performance perfect for a global learning audience.

Having said that, now that you know have a good understanding of my tech stack, let me talk about some of the learnings and lessons along the way. So this these were like sort of like the basics that I wanted to follow. These metrics shaped every single choice I made in the app. How stable the layout feels when loading with cumulative layout shift. Largest content fill paint. How quickly the main content appears on the screen. how fast your UI reacts after a user interaction