Skip to main content
CF

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: 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.

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

#TitleTypeOpen
1Troubleshooting PDF
2Additional Exercises PDF

Related courses

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.