Frontend

We start by building our MVP as quickly as possible. You learn file-based routing, how Universal rendering works, and more, in order to build out the client-side of our app. Then we deploy the app to Netlify so it’s live for the world to see.

Now that things are working, we take some time to make sure our app is engineered well.

We learn how to architect our Nuxt app and organize our code so that it’s maintainable over the long term . There’s nothing worse than trying to work on an old codebase that’s become a tangled, messy, dumpster fire.

✅ We won’t let that happen to you and your Nuxt apps.

We also need to make sure our apps are robust enough for the real-world, and that means adding in TypeScript and thorough error-handling. No, it’s not exciting, but making sure that your app doesn’t break down means a better UX for your customers, as well as stress-free weekends.

Backend

We’ve already learned a ton about Nuxt, but now we dig deeper into how Nuxt works. Here we take a look at what powers the magic behind Nuxt - the Nitro server.

Next up is adding authentication. We need to be able to restrict access to our course, and we can do that using Supabase and Nuxt middleware.

Time for the APIs.

We use Prisma in combination with a Postgres database from Supabase so we can have type-safe access to our data. Then we build out an API that let’s us grab all of our course data from the database.

And now that we have a database set up, we can start to track our student’s progress through the course.

Landing Page

Finally, we need a way to sell the product!

We build a blazing-fast landing page, using many of the tricks that Nuxt has in order to squeeze as much performance out as we can. We’ll see how to use Hybrid rendering, lazy loading, and proper asset management in order to keep things speedy.

Of course, we’ll also optimize the page for SEO so we get tons of traffic to our landing page.