Take your career to the next level with the latest technologies.
Tutorials are great, but you learn the most by building a complete application, both frontend and backend. This course will give you the skills needed to work across the stack and build your own apps from start to finish.
All 29 HD streaming videos
Course Discord channel (happy to help)
Commits for each video (never get lost)
8+ hours of content
Learning the latest technology to help them in their current and future jobs.
Can’t find the answer you’re looking for? Reach out on Twitter
Just finished your course. I learned a lot. Thank you! I like your teaching style, it's a lot of fun to follow!
A complete fullstack app from start to finish
Building an app is hard. What do you start with? What technologies do you use? Security? In this course we'll build a complete fullstack Next.js app from start to finish, introducing dependencies as needed, and explaining every step that we take.
The first video starts by introducing the final app that we will be building and how the course works.
We use a number of popular services during the development of this app (Firebase, Vercel, Cloudinary, Mapbox), and we'll get them set up and configured here.
Starter files are included so we're all on the same page and same version. In this video we get comfortable with the codebase and run `yarn install` for the first time.
We build a reusable Layout component and how to navigate from one page to the next.
Firebase handles authentication for us, and this in video we iniitalize our Firebase app along with building a custom Auth Provider so the rest of the app knows if the user is authenticated or not.
What good is auth if you can't log in? This video covers the authentication page, along with our first look at restricted routes using getServerSideProps from Next.js to limit access.
Time to get to the fun stuff! The goal of this video is to get Mapbox rendering on our home page.
The map is rendering, but there is no data! In this video we use react-hook-form to build an Add House form.
We use Google Places to search for an address and then convert its location into latitude and longitude, a requirement to display it on our map.
In this video we'll create the ability to add and preview the image in our house form, along with collecting the remaining fields and validating input.
We save our houses in Postgres, an extremely popular relational database. To interact with Postgres, we'll use Prisma. It will manage our database schema and allow us to read from and write to the DB.
Using Apollo Server and TypeGraphQL we will build the backend GraphQL API that our React frontend will interact with. Fully typed using TypeScript, it's a great code-first approach to defining our GraphQL Schema.
The backend is almost ready, but we need to initialize Apollo Client for our React code to be able to perform Queries and Mutations on our GraphQL API.
This video covers how to securely upload an image from a form in React to Cloudinary, and we'll also create our first mutation along the way.
We'll now create a mutation that will allow us to save a house in our database... everything has finally come together!
We have houses in our database and its' time to query them and display them on the frontend.
Here we build out the page that displays a single house's details along with its location on a second Mapbox map.
Let's add the ability to query nearby houses, learning about bounding boxes and how to find houses that exist within that bounding box efficiently.
It's annoying to have to find your location on the map over and over again! Let's create a custom hook that will remember the map's location in the browsers local storage.
As the user moves the map around, it will re-query the houses that are currently within the map's bounding box. This can generate A LOT of queries, but using a debounce hook can limit the frequency that they'll request data from our backend.
It's time to query the houses that are going to be displayed on the home page's map, using the debounced values from the previous video. We'll also add a new query to our GraphQL API in order to find them.
We have the houses and it's now time to display them on the map. We'll also add the ability to open an InfoWindow for each one.
There's a disconnect between the houses being listed on the left and the houses on the map on the right. This video connects them by storing state for which house is being hovered over, allowing us to highlight it on the map.
Here we get to reuse the Google Places search created on our Add House Form, allowing the user to find their location easily on the map.
What good is adding homes if you can't edit them? Here we build the Edit House page which is a restricted route, and only available to the owner of the house.
We're going to reuse the form we build to add a house, giving it the ability to edit a house as well.
In this video we introduce a button that the house owner can click to delete a house... we'll need to create and call a new mutation to make this happen as well.
Deployment time! Vercel makes it easy to deploy this fullstack application, and we cover how to set up the environment variables in this new environment.
Oops! We have some security issues. Let's convert our client side cookies into HttpOnly server side cookies, shielding our auth tokens from prying eyes.
I've just finished your course and it was amazing, I really learned a lot of new stuff, everything were well explained, you definitely need to create another course like this, congratulations and thank you!
Whether you're a frontend or backend developer, this course has something for everyone. You'll learn new skills while building a fullstack application that will help you at your current job, or to get the next one.Get Started