NextJS + Postgres and Error Monitoring - Full Stack Support Ticketing System

Build a full-stack support ticketing system using Next.js, Neon PostgreSQL, Prisma, and Sentry for error monitoring in this comprehensive tutorial from Traversy Media. Learn how to create a complete application with user authentication, ticket creation, management, and error tracking. Follow along as the instructor guides you through setting up the development environment, implementing database models, creating server actions, building the user interface, and adding custom JWT authentication. Master practical features like form validation, notifications with Sonner, priority color coding, and access control. The tutorial includes detailed explanations of JWT authentication flow, error logging with Sentry, and proper database management with Prisma. By the end, you'll have created a functional support system with user registration, login functionality, ticket creation, viewing, and closing capabilities.

Syllabus

0:00 - Intro
3:24 - Project Plan Slides
8:33 - Next.js App Setup
12:18 - Sentry Setup
15:30 - Sentry Example
20:21 - Neon PostgreSQL Setup
21:40 - Prisma Initiliazation
23:00 - Ticket Model
25:10 - Prisma Migration & Generate Client
26:51 - Prisma Studio
27:23 - Git Init
28:27 - Welcome Page
32:30 - New Ticket Page
34:20 - Start New Ticket Action
38:30 - useActionState Hook
41:31 - Form Validation & Sentry Logging
45:50 - Sentry Log Level
47:00 - Capture Exceptions
50:20 - Global Prisma Instance
54:00 - Sentry addBreadcrumb
55:40 - Test New Ticket Functionality
56:47 - Sentry Helper Function
1:05:34 - Redirect On Submit
1:08:15 - Sonner Notifications
1:11:00 - Custom Ticket Form Component
1:13:59 - Get Tickets Action
1:16:10 - Show Tickets
1:23:12 - Priority Colors
1:25:50 - Get Single Ticket Action
1:28:30 - Ticket Details Page
1:34:43 - Navbar
1:37:25 - Start Custom Authorization
1:38:40 - User Model & Ticket Relation
1:44:00 - JWT Explanation
1:46:11 - Authentication Flow
1:48:58 - Create Main Auth File
1:50:58 - signAuthToken Function
1:53:47 - verifyAuthToken Function
1:56:40 - setAuthCookie Function
1:59:54 - getAuthCookie Function
2:01:01 - removeAuthCookie Function
2:02:30 - Register Users
2:14:40 - Register Page & Form Hook Up
2:20:40 - Get Current User
2:25:15 - Conditional Nav Links
2:27:15 - Logout User
2:35:00 - Login Page & Action
2:48:30 - Check Sentry Logs
2:51:00 - Ticket Authorization & Access Control
2:58:57 -TicketItem Component
3:01:55 - Close Ticket
3:16:25 - Disable Closed Tickets