React Crash Course

Web Development Technologies - A Practical Guide

Vue.js Crash Course

Understanding CORS

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

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

React Crash Course

Web Development Technologies - A Practical Guide

Vue.js Crash Course

Understanding CORS