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. Clear. Concise. Comprehensive. Tired of piecing together disconnected tutorials or dealing with rambling, confusing instructors? This course is for you! It's perfectly structured into a series of bite-sized, easy-to-follow videos that cover both theory and practice.

Read more about the course

What You'll Learn

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

Watch Online Next.js Projects: Build an Issue Tracker

Join premium to watch
Go to premium
# Title Duration
1 1- Welcome 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

Read Book Next.js Projects: Build an Issue Tracker

#Title
1Troubleshooting
2Additional Exercises

Similar courses to Next.js Projects: Build an Issue Tracker

The No-BS Solution for Enterprise-Ready Next.js Applications

The No-BS Solution for Enterprise-Ready Next.js ApplicationsJack Herrington

Category: Next.js
Duration 8 hours 20 minutes 31 seconds
Next.js From Scratch 2024

Next.js From Scratch 2024Brad Traversy

Category: Next.js
Duration 11 hours 54 minutes 9 seconds
Build a Jira clone

Build a Jira cloneCode With Antonio

Category: React.js, Next.js
Duration 16 hours 26 minutes 4 seconds
Server side rendering with Next + React

Server side rendering with Next + Reactudemy

Category: React.js, Next.js, MongoDB, OpenGL Shading Language (GLSL)
Duration 29 hours 43 minutes 19 seconds
Next.js and Apollo - Portfolio App (w/ React, GraphQL, Node)

Next.js and Apollo - Portfolio App (w/ React, GraphQL, Node)udemy

Category: React.js, Next.js, Node.js, GraphQL
Duration 28 hours 38 minutes 19 seconds
Complete Next.js with React & Node - Beautiful Portfolio App

Complete Next.js with React & Node - Beautiful Portfolio Appudemy

Category: Next.js
Duration 59 hours 43 minutes
Build A Slack Clone

Build A Slack CloneCode With Antonio

Category: Next.js
Duration 15 hours 13 minutes 30 seconds
Ecommerce on the Jamstack with Snipcart, Next.js, & WordPress

Ecommerce on the Jamstack with Snipcart, Next.js, & WordPressleveluptutorials

Category: Next.js, Wordpress
Duration 4 hours 18 minutes 15 seconds