Next.js Projects: Build an Issue Tracker

7h 1m 57s
English
Paid
June 6, 2024

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.

More

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
1 Troubleshooting
2 Additional Exercises

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

Full Stack Development

Full Stack Development

Duration 4 hours 24 minutes 36 seconds
MERN React Node Next.js Multi User SEO Blogging Platform

MERN React Node Next.js Multi User SEO Blogging Platform

Duration 20 hours 25 minutes 13 seconds
Server side rendering with Next + React

Server side rendering with Next + React

Duration 29 hours 43 minutes 19 seconds
Stripe for SaaS

Stripe for SaaS

Duration 1 hour 11 minutes 29 seconds
The Joy of React

The Joy of React

Duration 25 hours 35 minutes 33 seconds
Build a Microservices app with .Net and NextJS from scratch

Build a Microservices app with .Net and NextJS from scratch

Duration 31 hours 42 minutes 57 seconds
Next.js 14 & React - The Complete Guide

Next.js 14 & React - The Complete Guide

Duration 36 hours 13 minutes 15 seconds
Next.js - The Full Course

Next.js - The Full Course

Duration 1 hour 14 minutes 14 seconds