NextJS + Postgres and Error Monitoring – Full Stack Support Ticketing System
In this project, we will create a support ticket system with Next.js, Neon PostgreSQL, Prisma and we will implement error tracking and logging with Sentry.
Sentry:
https://sentry.io/signup/??utm_source=traversy&code=traversy
Neon:
https://fyi.neon.tech/2tm
Code:
https://github.com/bradtraversy/quick-ticket
Timestamps:
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
source



