IIRF Online > Development > Web Development > Next.js > The Next.js 13 Bootcamp - The Complete Developer Guide
The Next.js 13 Bootcamp - The Complete Developer Guide by Udemy
Learn all the new features of Next.js 13 by building a restaurant reservation app.
Course Highlights
- Build a large production ready application with Next 13
- Handle loading, error, success, and not found states appropriately
- The different rendering modes of React components
- Handle authentication with middleware and server routes
Skills you will learn!
Curriculum
2 Topics
Course Outline
Course Setup
12 Topics
[MUST READ] - AN IMPORTANT MESSAGE
Create a Next App
Exploring the Files and Folders
Adding Tailwind CSS
Your Two Options
Defining the Pages We Want
Understanding File Based Routing
Creating Those Pages
Challenge Solution
The Two Ways of Navigating Between Routes
The Link Component
Programmatic Navigation With the useRouter Hook
5 Topics
Cleaning Our Code With Components
Refactoring Our Pages
Some More Refactoring
Server vs Client Components
Exploring Which Components Should Be Client and Which Should Be Server
4 Topics
Our Code is Not Very DRY
Placing Universally Used Components in the Root Layout
Nested Components
Updating the Head Meta for Each Page
12 Topics
A Little SQL Lesson
Connecting to a Postgres Database
Defining Our SQL Schema
Seeding Our Database
How We Fetch Data in Server Components
Fetching Data in a Server Component
A Little TypeScript Lesson
Rendering the Fetched Data
A Common Error You Might Encounter
Fetching a Restaurant By Slug
Populating the Data in the Restaurant Page
Fetching the Restaurant's Menu
18 Topics
Challenge 1 - Add Query Params
Solution for Challenge 1
Challenge 2 - Fetch Restaurants By Location
Solution for Challenge 2
Challenge 3 - Populating Data
Solution for Challenge 3
Challenge 4 - Fetching Data for Side NavBar
Solution for Challenge 4
Challenge 5 - Adding Query Params
Solution for Challenge 5
Challenge 6 - Filtering By Query Params
Solution for Challenge 6
Challenge 7 - Defining the User and Review Model
Solution for Challenge 7
Challenge 8 - Fetching Reviews Data
Solution for Challenge 8
Adding a Stars Component
More Star Components Stuff...
5 Topics
Introduction to Loading State
Adding a Loading State
Overriding the Default Loading State
Handling Error States
Handling Not Found States
15 Topics
What is Authentication
Adding Material UI
Adding the Modal Content
Completing the Modal Functionality
Steps to Implement Authentication
Creating an Endpoint
Validating the User's Input
Validating That the User's Doesn't Already Have an Account
Exploring Password Storage Solutions
Hashing Our Password
Creating a User
Creating and Sending a JSON Web Token
Implementing the Sign in Endpoint
Identifying Users With Json Web Token
Adding Middleware
12 Topics
Adding Client Side Validation
Creating a Custom useAuth Hook
Discussing the Authentication State
Creating a AuthContext Component
Handling the Loading State
Handling the Error State
Saving the JWT to Our Browser's Cookie
Doing the Same Thing For the Signup Function
Persisting an Auth State
Fixing the Issue... Sorry
Conditionally Rendering UI Based on the Auth State
Implementing the Logout Functionaility
21 Topics
Intro to Scheduling and Availability
The Rules We Will Follow
Rendering the Party Size Options
Rendering a DatePicker Component
Dynamically Rendering the Time Options
Understanding Many to Many Relationships
Defining Our New Models
The Availability Endpoint Overview
Building the Availability Endpoint
Step 1: Determining the Search Times
Step 2: Fetching the Bookings
Step 3: Compressing the Booking
Step 4: Fetching the Restaurant Tables
Step 5: Reformatting the Search Times
Step 6: Filtering Out the Booked Tables
Step 7: Determining the Availability
Step 8: Filtering by Restaurant Time Window
Building a useAvailabilities Hook
Storing the Reservation Criteria in State
Rendering the Available Time Options
Converting the Time to a Displayable Time
13 Topics
The Reservation Endpoint
Step 1: Validation
Step 2.0: Extracting the Table Availability Logic Into it's Own Function
Step 2.5: Determining the Available Tables
Step 3: Count the Tables Based on Seats
Step 4: Determine the Tables to Book
Step 5: Creating the Booking and Linking it to the Tables
Dynamically Rendering Data for the Reserve Header
Extracting the Query Params
Storing Our Inputs in State
Creating a useReservation Hook
Making a Reservation From the Client
Showing a Success State
9 Topics
The Nav and Header
The Search Bar and Restaurant Card
The Restaurant Page
The Title and Description
The Image Gallery
The Reservation Card
The Menu Page
The Search Page
The Reserve Page
The Next.js 13 Bootcamp - The Complete Developer Guide
Related Next.js Courses
Thank You!
Your review has been submitted successfully.