Next.js Projects: Build an Issue Tracker

7h 1m 57s
English
Paid

Course description

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

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

Comments

0 comments

Want to join the conversation?

Sign in to comment

Similar courses

Build an LMS Platform

Build an LMS Platform

Sources: Code With Antonio
In this 10-hour course, you will learn how to create your own LMS (Learning Management System) platform from scratch. We will use modern technologies...
10 hours 41 minutes 23 seconds
Build your AI startup in hours using our customizable demo apps | AnotherWrapper

Build your AI startup in hours using our customizable demo apps | AnotherWrapper

Sources: Fekri
Create your AI startup quickly and efficiently using AnotherWrapper's customizable demo apps. Our all-in-one Next.js AI starter kit includes everything you...
Build A Canva Clone

Build A Canva Clone

Sources: Code With Antonio
In this 18-hour course, we will create a platform for graphic design with numerous features. You will learn how to create an intuitive editor for cust...
17 hours 48 minutes 39 seconds
The Joy of React

The Joy of React

Sources: Josh Comeau
The all-new interactive learning experience that teaches you how to build rich, dynamic web apps with React. So, let’s be real. Learning React is hard. Over the past few years...
25 hours 35 minutes 33 seconds