Next.js Projects: Build an Issue Tracker

7h 1m 57s
English
Paid

Learn to build full-stack apps with Next.js, TypeScript, Prisma, Tailwind, and Radix UI. This course is designed to be clear, concise, and comprehensive. Are you tired of piecing together disconnected tutorials or struggling with rambling, confusing instructors? This well-structured course is for you, featuring a series of bite-sized, easy-to-follow videos that cover both theory and practice.

Course Highlights

The course offers an in-depth look into modern development practices. Here's what you'll learn:

  • Confidently build full-stack apps with Next.js 13+ and TypeScript.
  • Master a methodical approach to software development.
  • Build beautiful, modern UIs with Radix UI and Tailwind.
  • Implement routing and navigation using the new App router.
  • Develop RESTful APIs efficiently.
  • Use Prisma to seamlessly integrate your Next.js apps with a database.
  • Implement user authentication using NextAuth.js.
  • Optimize your apps for performance and SEO.
  • Enhance productivity with VSCode shortcuts.
  • Structure your Next.js projects correctly.
  • Apply the latest techniques and best practices for Next.js.
  • Troubleshoot errors with ease.
  • Deploy your Next.js apps efficiently.

About the Author: codewithmosh (Mosh Hamedani)

codewithmosh (Mosh Hamedani) thumbnail
Hi! I am Mosh Hamedani! I am a passionate and pragmatic software engineer with 20 years of professional experience and I've taught over 10 million people how to code or how to become professional software engineers through my YouTube channel and online courses. I have a Bachelor of Science in Software Engineering and a Master of Science in Networks Systems. My mission is to make coding and software engineering accessible to everyone through courses that are simple to digest, and practical to implement.

Watch Online 87 lessons

This is a demo lesson (10:00 remaining)

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

View Pricing
0:00
/
#1: 1- Welcome
All Course Lessons (87)
#Lesson TitleDurationAccess
1
1- Welcome Demo
02:06
2
2- Prerequisites
00:51
3
3- Source Code
00:39
4
4- How to Take This Course
00:59
5
1- Project Roadmap
02:17
6
2- Setting Up the Development Environment
01:18
7
3- Creating the Project
02:53
8
4- Building the navbar
08:53
9
5- Styling the Active Link
06:19
10
1- Setting Up MySQL
01:59
11
2- Setting Up Prisma
01:47
12
3- Creating the Issue Model
06:41
13
4- Building an API
06:56
14
5- Setting Up Radix UI
02:34
15
6- Building the New Issue Page
04:58
16
7- Customizing Radix UI Theme
04:54
17
8- Adding a Markdown Editor
01:57
18
9- Handling Form Submission
08:44
19
10- Handling Errors
06:50
20
11- Implementing Client-side Validation
06:15
21
12- Extracting the ErrorMessage Component
03:23
22
13- Adding a Spinner
04:22
23
14- Discussion- Code Organization
03:59
24
1- Showing the Issues
05:05
25
2- Building the Issue Status Badge
08:09
26
3- Adding Loading Skeletons
06:20
27
4- Showing Issue Details
06:47
28
5- Styling the Issue Detail Page
04:11
29
6- Adding Markdown Preview
03:35
30
7- Building a Styled Link Component
06:41
31
8- Additional Loading Skeletons
05:16
32
9- Disabling Server-side Rendering
02:59
33
10- Refactoring- Organizing Imports
05:28
34
1- Adding the Edit Button
04:44
35
2- Applying the Single Responsibility Principle
07:32
36
3- Building the Edit Issue Page
06:29
37
4- Building an API
06:45
38
5- Updating Issues
02:04
39
6- Understanding Caching
08:18
40
7- Improving the Loading Experience
06:59
41
1- Adding a Delete Button
07:03
42
2- Adding a Confirmation Dialog Box
04:05
43
3- Building an API
02:44
44
4- Deleting an Issue
02:12
45
5- Handling Errors
04:30
46
6- Improving the User Experience
02:22
47
7- Removing Duplicate Skeletons
04:03
48
1- Setting Up NextAuth
03:48
49
2- Configuring Google Provider
05:47
50
3- Adding the Prisma Adapter
05:29
51
4- Adding the Login and Logout Links
05:19
52
5- Change the Layout of the NavBar
04:31
53
6- Adding a Drop-down Menu
04:23
54
7- Troubleshooting- Avatar Not Loading
03:03
55
8- Refactoring the NavBar
08:08
56
9- Adding a Loading Skeleton
01:50
57
10- Securing the Application
07:46
58
1- Building the Assignee Select Component
02:58
59
2- Populating the Assignee Select Component
05:37
60
3- Setting Up React Query
04:21
61
4- Fetching Data with React Query
06:46
62
5- Add Assigned Issues to Prisma Schema
04:06
63
6- Implementing the API
10:59
64
7- Assigning an Issue to a User
04:39
65
8- Showing Toast Notifications
02:43
66
9- Refactoring the Assignee Select Component
05:17
67
1- Building the Filter Component
05:54
68
2- Filtering Issues
06:42
69
3- Making Columns Sortable
07:20
70
4- Sorting Issues
03:08
71
5- Fix Filtering Bugs
05:21
72
6- Generating Dummy Data
02:52
73
7- Building the Pagination Component
06:15
74
8- Implementing Pagination
04:04
75
9- PaginatingIssues
05:00
76
10- Refactoring- Extracting IssueTable Component
08:38
77
1- Building the LatestIssues Component
07:40
78
2- Building the IssueSummary Component
07:21
79
3- Building the BarChart Component
06:18
80
4- Laying Out the Dashboard
02:30
81
1- Adding Metadata
04:12
82
2- Optimizing Performance Using React Cache
04:22
83
3- Removing.env File
03:25
84
4- Setting Up Error Tracking
03:59
85
5- Setting Up the Production Database
02:34
86
6- Deploying to Vercel
10:31
87
1- Course Wrap Up
00:26
Unlock unlimited learning

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

Learn more about subscription

Books

Read Book Next.js Projects: Build an Issue Tracker

#Title
1Troubleshooting
2Additional Exercises