The Imposter's Frontend Accelerator
This is a premium course
And it's amazing and you'll love it, I promise (and guarantee it).
![course image](/images/slides/accelerator/introduction.jpg)
Welcome!
A few things to know before we get rolling.
![course image](/images/slides/accelerator/vue-react.jpg)
A Look at Vue and React
Many people want to know the difference between these projects. That's what we'll discuss in this video.
![course image](/images/slides/accelerator/vue-nuxt.jpg)
How Vue and Nuxt Work
The basics of Vue and Nuxt
![course image](/images/slides/accelerator/meet-nuxt.jpg)
Meet Nuxt
Let's get to know Nuxt and why it exists.
![course image](/images/slides/accelerator/walkthrough-start.jpg)
Getting Started
We're ready to go! The introductory stuff is out the way, let's do the Walkthrough.
![course image](/images/slides/accelerator/menus-styling.jpg)
Menus, Data-driven UI, Styling
We need to think about design from the very start as we'll be called for a demo at any moment. Count on it.
![course image](/images/slides/accelerator/site-data.jpg)
Sitewide data and more menus
Plugging in Vuetify for a quick CSS win.
![course image](/images/slides/accelerator/hello-components.jpg)
Components and Wireframes
Working with components and building the home page.
![course image](/images/slides/accelerator/simple-cms.jpg)
Simple CMS with Nuxt Content
Every application needs some form of content management (CMS), so let's not wait - we'll plug in Nuxt Content.
![course image](/images/slides/accelerator/pinia.jpg)
Application state with Pinia
It's time to think about a centralized state store and working with Pinia.
![course image](/images/slides/accelerator/course-page-start.jpg)
Blocking the Course Page
Adding content-specific components and page blocking.
![course image](/images/slides/accelerator/vuetify-hell.jpg)
Molecules and Vuetify hell
Now let's move on to the tough stuff: the course page. This is where the fun really starts...
![course image](/images/slides/accelerator/course-molecules.jpg)
Try That Again: Molecules
Problems are how we learna and yes, they're frustrating, but wow the experience! It's very valuable.
![course image](/images/slides/accelerator/lesson-video-text.jpg)
Adding Videos
I took a small break and edited the first set of videos - I wanted to get an idea of pace! Now let's get to the heart of the matter: videos!
![course image](/images/slides/accelerator/pinia-refactor-next-prev.jpg)
Refactoring Pinia
It's important to avoid technical debt so we're going to make sure we're doing Pinia right. We'll also keep moving forward with our course page!
![course image](/images/slides/accelerator/styling-session.jpg)
First Pass at Styling
It's been my experience that dressing up a web app from day one can only be a good thing. People like looking at nice things - so let's do that now.
![course image](/images/slides/accelerator/layout-details.jpg)
Digging in to Vuetify Layout
I've been copy/pasting my way through Vuetify, which has worked for me over the years, but I think it's a good idea to understand the layout more.
![course image](/images/slides/accelerator/auth-part-1.jpg)
Authentication, Part 1
Can't show a video to just anyone, can we? Let's start down the road of adding authentication to the app.
![course image](/images/slides/accelerator/auth-part-2.jpg)
Authentication, Part 2
Now that we know what JWTs are, let's plug 'em in!
![course image](/images/slides/accelerator/auth-part-3.jpg)
Authentication, Part 3
We're finishing up the UI (I hope), ideally not getting stuck this time!
![course image](/images/slides/accelerator/auth-part-4.jpg)
Authentication, Part 4
Going a little slower than I wanted, but that's how it goes innit?
![course image](/images/slides/accelerator/authorization-1.jpg)
Authorization, Part 1
In this episode we'll dig in to Sequelize, the Node.js ORM that will power our API.
![course image](/images/slides/accelerator/authorization-2.jpg)
Authorization, Part 2
We have most of our model build out, let's plug it in.
![course image](/images/slides/accelerator/supabase-intro.jpg)
Hello Supabase!
Things went to hell in the last episode, let's get back on track.
![course image](/images/slides/accelerator/supabase-auth.jpg)
Supabase Authentication
In this video we roll our auth scheme over to Supabase
![course image](/images/slides/accelerator/supabase-final.jpg)
The Full Rollover
In this video we finish rolling over to Supabase
![course image](/images/slides/accelerator/stripe-hello.jpg)
Meet Stripe
We need to process payments, so let's hook up Stripe
![course image](/images/slides/accelerator/stripe-webhook.jpg)
Creating the Stripe Receiver
We need a webhook receiver so we know when people bought something!
![course image](/images/slides/accelerator/netlify.jpg)
Deploying to Netlify
We're ready to roll - let's ship!
![course image](/images/slides/accelerator/firebase.jpg)
Using Firebase
Let's see what it takes to roll our site to Firebase
![course image](/images/slides/accelerator/playwright.jpg)
Testing with Playwright
I've avoided testing until now - let's fix that.