CourseFlix

Ultimate Next.js Course 2024 Edition

29h 39m 9s
English
Paid

Master the art of building dynamic and efficient web applications using React and Next.js with our comprehensive course. Dive into essential topics such as authentication, ORM integration, and creating responsive user interfaces. You will also learn to incorporate advanced technologies like Stripe for seamless payment processing. By leveraging tools like Algolia, Framer Motion, and React Hook Form, you will be equipped to craft visually appealing and user-friendly applications. Concluding this course, you will confidently develop sophisticated web apps, enhance user experience, and stay competitive in the job market with practical projects and real-world scenarios.

Course Overview

This course provides an in-depth exploration of the following key components and libraries to ensure you gain industry-relevant skills:

Build Modern Applications

Understand the processes and techniques for creating responsive and functional user interfaces that cater to diverse needs and devices.

Authenticate Users

Implement robust authentication strategies with Next-Auth to secure your applications efficiently.

Database Management with Drizzle ORM and PostgreSQL

Learn to handle data interactions and schema management with Drizzle ORM and PostgreSQL, ensuring a reliable backend system for your applications.

Optimized State Management using Zustand

Delve into Zustand for simplified and predictable state management in your React applications.

Advanced Features

  • Payment Integration: Seamless integration with Stripe Elements for secure payment processing.
  • Search Functionality: Utilize Algolia to deliver fast and relevant search results.
  • Animation and Motion: Enhance user experience with Framer Motion for interactive animations.
  • Forms Handling: Streamline user input and validation with React Hook Form.

Tech Stack

  • Next.js 14.2
  • Next-Auth V5
  • Drizzle ORM
  • PostgreSQL
  • Zustand
  • Algolia
  • Framer Motion
  • NeonDB
  • Resend
  • React Hook Form
  • Shad/CN
  • Stripe Elements

About the Author: developedbyed.com

developedbyed.com thumbnail
Learn exciting technologies from web development, design, game development and more!

Watch Online 131 lessons

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 131 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: 1. Project Introduction
All Course Lessons (131)
#Lesson TitleDurationAccess
1
1. Project Introduction Demo
09:07
2
2.Setting Up Node
03:12
3
3.Project Structure
05:58
4
4.Routing
05:21
5
5.Layout
05:19
6
6.Page Component
10:01
7
7.Route Groups
01:45
8
8.Parallel Routes
03:17
9
9.Loading Page
01:21
10
10.Error Page
01:22
11
11.Route Handlers
02:09
12
12.Middleware
02:49
13
1. Caching
07:15
14
2.Setting up NeonDB with Drizzle
04:42
15
3. Schemas and Migrations
07:01
16
4.Server Actions
06:33
17
5.Mutating and Revalidating
05:30
18
6.Progressively Enhanced Forms
04:03
19
1. Tailwind Intro
08:26
20
2. Tailwind Config and extensions
03:10
21
3.Layers and components
02:31
22
4.Adding shadcn to our project
06:19
23
1.Which Auth Solution To Use?
04:44
24
2. Next-Auth V5
07:33
25
3.Setting Up Google and Github Providers
04:57
26
4. Save Users With Drizzle Adapter to your DB
07:31
27
5.Creating Our Navbar
08:57
28
6. Sign In Button
04:43
29
7.Login Page
18:11
30
8.Styling Our Login Page
10:33
31
9. React-Hook-Form + Zod Part 1
11:11
32
10. React-Hook-Form + Zod Part 2
12:13
33
11.Creating Our Sign In Action
07:21
34
12.Form Error and Success Components
08:59
35
13.Creating Our Register Page
12:25
36
14.Register Action
12:33
37
15.Email Token Drizzle Schema
05:01
38
16.Generate Verification Tokens
14:02
39
17.Resend
15:17
40
18. Confirm Users Email Address
13:21
41
19. Login Authorize
14:41
42
20.Password Reset Form
19:48
43
21.Finishing Up Password Resets + HTTP and Websockets
22:53
44
22. User Dropdown Menu
19:09
45
23. Theme Your App
18:50
46
24. User Preferences
29:06
47
25. JTW and Session Callbacks
10:26
48
26. Update User Preferences
14:36
49
27. Two Factor Tokens
30:40
50
28. Setting up UploadThing
16:06
51
1. Animations with Framer Motion
25:20
52
2. Create Product Form
19:45
53
3. Drizzle Product Schema
03:42
54
4. Integrating TipTap Rich Text Editor
19:54
55
5. Create/Edit Product Server Action
09:58
56
6. Sonner Notifications
08:29
57
7. Setting Up Tanstack Table
20:00
58
8. Edit and Delete Products
13:15
59
9. Finishing our Server Actions
13:48
60
10. Filtering and Pagination
11:08
61
11. Drizzle One/Many Relations
11:51
62
12. Product Variant Wrapper
15:18
63
13. Server Component Shananigans
04:44
64
14. Variant Form
14:19
65
15 Input Tags
18:44
66
16. Variant Images with Uploadthing
34:48
67
17.Variant Actions
21:53
68
18.Deleting Variants
05:19
69
19.Indexing With Algolia
14:34
70
20. Shifting Layout Fix
02:21
71
21. Bad State Call Fix
01:50
72
1. Displaying our products
17:21
73
2. Adding our products
03:51
74
3. URL Routing with Product Picker
27:19
75
4. Shad/CN Carousel
17:33
76
5. Review Form
19:38
77
6. User Review Action
13:35
78
7. New Drizzle Kit Config
04:42
79
8. Star System
19:47
80
9. Review Chart
16:51
81
10. Zustand
16:41
82
11. Add To Cart
16:05
83
12. Remove From Cart
14:36
84
13.Price Animation and Local Storage Persist
25:21
85
14.Cart Progress
17:24
86
15.Order Table
04:53
87
16.Stripe Elements
35:22
88
17.Creating Orders
17:07
89
18.Order Confirmation Page
09:23
90
19.Order Details Dialog
24:00
91
20.Quality Of Life Improvements
15:28
92
21. Stripe CLI and Webhooks
17:41
93
22. Analytics Page
24:10
94
23. Recharts
36:39
95
24. Cart Progress Animation
11:57
96
25. Algolia Search
25:36
97
26. Tag System
15:16
98
Deployment
20:31
99
1. Getting Started
00:37
100
2. Setting up Next with Tailwind
06:02
101
3. Prisma Schemas
15:35
102
4. Next Auth With Prisma
21:39
103
5. Creating A Stripe Customer
15:52
104
6. Creating our Navbar
23:17
105
7. Fetching Stripe Products
16:32
106
8. Formatting Prices
10:11
107
9. Styling our home page
09:51
108
10. Product Description Page
23:01
109
11. State Managment With Zustand
16:18
110
12. Adding Products to Cart
26:40
111
13. Cart UI
09:58
112
14. Adding and Removing Products
12:11
113
15. Empty Carts
04:45
114
16. Adding Google Fonts
06:03
115
17. Total Price Format
04:04
116
18. Framer Motion
16:10
117
19. Keeping It Mobile Friendly
03:35
118
20. Getting Started with Stripe
17:11
119
21. Stripe Order Data
26:57
120
22. Saving orders
32:49
121
23. Rendering Stripe Form
30:34
122
24. Success Page
28:37
123
25. Stripe Webhooks
26:47
124
26. Dashboard Page
30:20
125
27. More Dashboard Styling
06:58
126
26. Lottie Animations
11:10
127
27. Daisy UI
17:22
128
28. Adding a dropdown
10:02
129
29. Dark Light Mode
18:05
130
30. Stripe Darkmode
13:15
131
31. Adding Different Fonts
03:56
Unlock unlimited learning

Get instant access to all 130 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription