The Next.js 13 Bootcamp - The Complete Developer Guide

Focused View

Laith Harb

14:13:49

616 View

1. Introduction

1. Course Outline.mp4

06:29

2. Course Setup.mp4

03:19

2. File Based Routing and Navigation

1. Create a Next App.mp4

07:09

2. Exploring the Files and Folders.mp4

02:04

3. Adding Tailwind CSS.mp4

08:41

4.1 html.zip

4. Your Two Options.mp4

01:49

5. Defining the Pages We Want.mp4

04:23

6. Understanding File Based Routing.mp4

07:12

7. Creating Those Pages.mp4

05:01

8. Challenge Solution.mp4

03:32

9. The Two Ways of Navigating Between Routes.mp4

02:49

10. The Link Component.mp4

06:33

11. Programmatic Navigation With the useRouter Hook.mp4

05:28

3. Next Components (Server and Client)

1. Cleaning Our Code With Components.mp4

07:12

2. Refactoring Our Pages.mp4

14:02

3. Some More Refactoring.mp4

05:01

4. Server vs Client Components.mp4

10:56

5. Exploring Which Components Should Be Client and Which Should Be Server.mp4

06:13

4. Defining Page Layouts and Head Meta

1. Our Code is Not Very DRY.mp4

03:38

2. Placing Universally Used Components in the Root Layout.mp4

06:04

3. Nested Components.mp4

05:06

4. Updating the Head Meta for Each Page.mp4

07:05

5. Fetching Data in Server Components

1. A Little SQL Lesson.mp4

08:31

2. Connecting to a Postgres Database.mp4

05:59

3. Defining Our SQL Schema.mp4

17:08

4.1 seed.ts

4. Seeding Our Database.mp4

01:51

5. How We Fetch Data in Server Components.mp4

02:50

6. Fetching Data in a Server Component.mp4

04:23

7. A Little TypeScript Lesson.mp4

07:25

8. Rendering the Fetched Data.mp4

07:07

9. A Common Error You Might Encounter.mp4

02:04

10. Fetching a Restaurant By Slug.mp4

09:32

11. Populating the Data in the Restaurant Page.mp4

10:34

12. Fetching the Restaurants Menu.mp4

07:54

6. Time to Get Your Hands Dirty

1. Challenge 1 - Add Query Params.mp4

02:21

2. Solution for Challenge 1.mp4

01:44

3. Challenge 2 - Fetch Restaurants By Location.mp4

01:52

4. Solution for Challenge 2.mp4

09:51

5. Challenge 3 - Populating Data.mp4

00:59

6. Solution for Challenge 3.mp4

05:23

7. Challenge 4 - Fetching Data for Side NavBar.mp4

00:31

8. Solution for Challenge 4.mp4

04:33

9. Challenge 5 - Adding Query Params.mp4

01:36

10. Solution for Challenge 5.mp4

12:20

11. Challenge 6 - Filtering By Query Params.mp4

00:34

12. Solution for Challenge 6.mp4

08:10

13. Challenge 7 - Defining the User and Review Model.mp4

02:30

14. Solution for Challenge 7.mp4

04:28

15. Challenge 8 - Fetching Reviews Data.mp4

04:11

16. Solution for Challenge 8.mp4

17:24

17.1 icons.zip

17. Adding a Stars Component.mp4

10:46

18. More Star Components Stuff....mp4

04:05

7. Handling Loading and Error States

1. Introduction to Loading State.mp4

02:13

2. Adding a Loading State.mp4

05:46

3. Overriding the Default Loading State.mp4

03:04

4. Handling Error States.mp4

08:34

5. Rendering the Stars Component.mp4

04:05

6. Handling Not Found States.mp4

02:50

8. Implementing Authentication

1. What is Authentication.mp4

02:15

2. Adding Material UI.mp4

11:38

3. Adding the Modal Content.mp4

13:37

4. Completing the Modal Functionality.mp4

10:06

5. Steps to Implement Authentication.mp4

04:52

6. Creating an Endpoint.mp4

06:07

7. Validating the Users Input.mp4

11:39

8. Validating That the Users Doesnt Already Have an Account.mp4

03:51

9. Exploring Password Storage Solutions.mp4

10:06

10. Hashing Our Password.mp4

02:01

11. Creating a User.mp4

01:32

12. Creating and Sending a JSON Web Token.mp4

09:06

13. Implementing the Sign in Endpoint.mp4

12:14

14. Identifying Users With Json Web Token.mp4

16:05

15. Adding Middleware.mp4

13:00

9. Global State With Context API

1. Adding Client Side Validation.mp4

05:37

2. Creating a Custom useAuth Hook.mp4

08:31

3. Discussing the Authentication State.mp4

04:23

4. Creating a AuthContext Component.mp4

15:54

5. Handling the Loading State.mp4

08:07

6. Handling the Error State.mp4

02:07

7. Saving the JWT to Our Browsers Cookie.mp4

10:13

8. Doing the Same Thing For the Signup Function.mp4

07:27

9. Persisting an Auth State.mp4

13:29

10. Fixing the Issue... Sorry.mp4

02:43

11. Conditionally Rendering UI Based on the Auth State.mp4

05:09

12. Implementing the Logout Functionaility.mp4

03:53

10. Building an Availability System

1. Intro to Scheduling and Availability.mp4

01:23

2. The Rules We Will Follow.mp4

04:11

3. Rendering the Party Size Options.mp4

04:52

4. Rendering a DatePicker Component.mp4

05:49

5. Dynamically Rendering the Time Options.mp4

12:39

6. Understanding Many to Many Relationships.mp4

09:18

7. Defining Our New Models.mp4

08:29

8. The Availability Endpoint Overview.mp4

03:54

9. Building the Availability Endpoint.mp4

06:39

10. Step 1 Determining the Search Times.mp4

04:24

11. Step 2 Fetching the Bookings.mp4

14:36

12. Step 3 Compressing the Booking.mp4

04:57

13. Step 4 Fetching the Restaurant Tables.mp4

01:36

14. Step 5 Reformatting the Search Times.mp4

02:15

15. Step 6 Filtering Out the Booked Tables.mp4

02:55

16. Step 7 Determining the Availability.mp4

04:45

17. Step 8 Filtering by Restaurant Time Window.mp4

05:00

18. Building a useAvailabilities Hook.mp4

08:04

19. Storing the Reservation Criteria in State.mp4

12:55

20. Rendering the Available Time Options.mp4

09:52

21.1 convertToDisplayTime.ts

21. Converting the Time to a Displayable Time.mp4

03:08

11. Building the Scheduling System

1. The Reservation Endpoint.mp4

04:18

2. Step 1 Validation.mp4

04:31

3. Step 2.0 Extracting the Table Availability Logic Into its Own Function.mp4

07:42

4. Step 2.5 Determining the Available Tables.mp4

07:43

5. Step 3 Count the Tables Based on Seats.mp4

02:41

6. Step 4 Determine the Tables to Book.mp4

04:31

7. Step 5 Creating the Booking and Linking it to the Tables.mp4

14:57

8. Dynamically Rendering Data for the Reserve Header.mp4

05:46

9. Extracting the Query Params.mp4

06:14

10. Storing Our Inputs in State.mp4

08:50

11. Creating a useReservation Hook.mp4

04:00

12. Making a Reservation From the Client.mp4

09:06

13. Showing a Success State.mp4

06:05

12. Appendix A - Building the UI

1. The Nav and Header.mp4

10:04

2. The Search Bar and Restaurant Card.mp4

13:34

3. The Restaurant Page.mp4

03:38

4. The Title and Description.mp4

07:55

5. The Image Gallery.mp4

08:54

6. The Reservation Card.mp4

08:53

7. The Menu Page.mp4

07:42

8. The Search Page.mp4

15:31

9. The Reserve Page.mp4

08:57

Description

Learn all the new features of Next.js 13 by building a restaurant reservation app.

What You'll Learn?

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

Who is this for?

Next developers that want to learn about all the changes in version 13

React developers that want to learn a higher level framework

More details

Description
NextJS 13 is an amazing higher level framework, built on top of React, that will totally change the way you think about and build web applications.
In this course, we will learn all about the amazing features NextJS 13 has to offer by building a restaurant reservation application where people can view restaurants and reserve tables.
Firstly we are going to explore the file system in NextJS 13. We are going to learn how to create static and dynamic routes by simply defining files and folders.
We are then going to look at how to handle loading, error, not found, and success states within our application.
Then we will move onto the rendering modes of React components. We will learn about the differences between server and client components and when we should use one over the other.
Following that, we will dive into the server side of NextJS. We will spin up a Postgres database and define the models we need with Prisma (ORM). We will learn how to fetch data from this database, depending on the component we are utilizing.
We will then move to the backend and start defining some authentication endpoints. We will implement authentication for scratch by utilizing middleware, hashers and json web tokens.
The authentication endpoints will be consumed by our client and the user data will be storedÂ globally with the context API.
We then move onto the completing our application by building the availability and scheduling system. We will utilize multiple algorithms and logical thinking to accomplish this.
Who this course is for:
Next developers that want to learn about all the changes in version 13
React developers that want to learn a higher level framework

User Reviews

Rating

average 0

Total votes0

Focused display

Next JS

Laith Harb

Instructor's Courses

I am a software engineer at Prodigy Education and an instructor on YouTube. I helped thousands of individuals learn tech with my instructional videos. I have over 3 years of experience in the industry and thus have accumulated tons of knowledge about software development. I am excited to be your next instructor!

Udemy

View courses Udemy

Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.