Skip to main content
CF

Next.js Projects: Build an Issue Tracker

7h 1m 57s
English
Paid
Updated September 2026

Next.js Projects: Build an Issue Tracker is a 87-lesson 7 hours 1 minute self-paced course by Mosh Hamedani (Code with Mosh). Rather than another Next.

Course facts

Lessons
87
Duration
7 hours 1 minute
Level
All levels
Language
English
Updated
2026-09-11
Instructor
Mosh Hamedani (Code with Mosh)
Price
Premium

Rather than another Next.js "todo app," this 87-lesson course builds a full issue tracker — the kind of project that actually forces you to deal with routing, a database, and authentication together.

The stack

You'll work with Next.js 13+ and the App Router, TypeScript, Prisma for the database layer, and Tailwind with Radix UI for the interface.

What the project covers

  • Routing and navigation with the App Router
  • Building RESTful APIs and connecting them to a database through Prisma
  • User authentication with NextAuth.js
  • Structuring a Next.js project cleanly as it grows
  • Performance and SEO considerations, plus deploying the finished app

Lessons are kept short and bite-sized, mixing theory with practice rather than long, meandering walkthroughs.

Who teaches Next.js Projects: Build an Issue Tracker? Mosh Hamedani (Code with Mosh)

Mosh Hamedani (Code with Mosh) thumbnail

Mosh Hamedani is the founder of Code with Mosh, one of the highest-volume independent online instructors in software education. He has been publishing courses continuously since the early Udemy era and has taught over a million students across his Udemy catalog and his standalone Code with Mosh platform. His teaching style is patient, rigorously structured, and deliberately beginner-tolerant — the courses are widely cited as some of the most accessible introductions to their respective topics.

The Code with Mosh catalog covers an unusually wide span: web development with HTML / CSS / JavaScript / React / Angular / Node.js, Python and Django, C# and .NET, mobile development with React Native and Flutter, SQL and database fundamentals, and the algorithm / data-structure interview prep tracks. Few independent instructors maintain this much breadth at consistent quality.

The CourseFlix listing under this source carries over 35 Code with Mosh courses spanning that range. Material is paid; Code with Mosh runs on per-course pricing on the original platform. Courses are aimed primarily at developers picking up a new technology from a clean start through to working production proficiency.

What lessons are included in Next.js Projects: Build an Issue Tracker?

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

#TitleTypeOpen
1Troubleshooting PDF
2Additional Exercises PDF

What courses are similar to Next.js Projects: Build an Issue Tracker?

More courses by Mosh Hamedani (Code with Mosh)

Frequently asked questions

What are the prerequisites for enrolling in this course?
This course requires a basic understanding of JavaScript and familiarity with React. The prerequisites lesson will help you ensure you have the foundational knowledge needed to get the most out of the course. Knowledge of databases and general web development concepts is also beneficial.
What will I be building throughout the course?
You will build a full-stack issue tracker application. This includes setting up a MySQL database using Prisma, creating RESTful APIs, and implementing user authentication with NextAuth.js. You'll also create modern UIs using Radix UI and Tailwind, and optimize your application for performance and SEO.
Who is the target audience for this course?
This course is targeted at developers who want to learn how to build full-stack applications using modern technologies such as Next.js, TypeScript, and Prisma. It is suitable for those looking to enhance their skills in building web applications with a focus on best practices and efficient workflows.
How does this course compare to other Next.js courses in terms of depth?
This course provides an in-depth exploration of building full-stack applications with Next.js 13+. It covers a wide range of topics, including setting up a development environment, implementing user authentication, and deploying applications. The course's focus on practical application, such as building an issue tracker, distinguishes it from more theoretical courses.
What specific tools and platforms are used in this course?
The course utilizes several tools and platforms, including Next.js for the framework, TypeScript for type safety, Prisma for database integration, Tailwind and Radix UI for styling, and NextAuth.js for user authentication. These tools are integrated into the project to demonstrate real-world application development.
What topics are not covered in this course?
The course does not cover advanced database management techniques outside of Prisma, in-depth server-side rendering strategies beyond the basics, or other state management libraries like Redux. While it provides a comprehensive look at building an application with Next.js, it focuses on the specific tools and techniques listed in the course content.
What is the expected time commitment for completing this course?
With 87 lessons, the course is designed to be completed at your own pace. The series of bite-sized, easy-to-follow videos allow for flexible learning, though a dedicated approach over several weeks is recommended to fully grasp the concepts and complete the project.