Build Notes App using Next.js 14+ | Drizzle ORM | Neon Database and Clerk Authentication

Опубликовано: 11 Октябрь 2024
на канале: Programming with Umair
4,754
144

In this video, you will learn how to build a full stack next.js 14 project using clerk authentication, drizzle orm, neon database, web hooks, tailwindcss and vercel. Learn these technologies by building a small notes app. You will learn how to query data from database using drizzle orm queries. Learn how to build relational schema using drizzle orm and also how to connect clerk auth with our own database.

00:12 Overview and Demo
02:10 Create next.js 14 project
05:01 Integrate drizzle in next.js 14
08:51 Add Neon DB in next.js 14
11:16 Run drizzle migrations
14:36 Create notes directory structure
15:54 Create note interface
16:11 Build components
17:01 Create notes server actions
18:01 Fetch all notes from db
28:18 Create users schema
31:21 Add users notes relations
37:41 Create users server actions
45:06 Run drizzle migrations again
48:11 Query to fetch user having all notes
53:11 Configure Clerk Auth
59:25 Protect routes with middleware
01:04:55 Create Navbar
01:11:11 Update users drizzle schema
01:14:55 Drizzle studio
01:17:00 Create clerk webhook
01:18:15 Deploy project on vercel
01:23:25 Clerk webhook secret
01:26:35 Connect clerk auth with Database
01:36:20 Show todos on UI
01:41:00 Testing

#nextjs14 #clerk #drizzle #database #mysql #neon

Follow Whatsapp Channel:
https://whatsapp.com/channel/0029Va7y...

React tutorials:
   • React.js Tutorials  

JavaScript Tutorials and Projects:
   • JavaScript Tutorial and Projects  

Angular Tutorials:
   • Angular 16 Life Cycle Hooks - Explain...  

Docker Tutorials & CI/CD:
   • Docker Tutorials & CI/CD  

Angular 16 Crash Course For Beginners:
   • Angular 16 Crash Course  

Tech Tutorials - Random:
   • Postman Tutorial - Testing APIs and B...  

Complete Next.js 13 Tutorials:    • Next.js 13 Tutorials - App Directory  

Next.js 14 Tutorials:
   • Next.js 14 Tutorials - App Directory  

Node Express MongoDB Bootcamp:    • Build REST API with Node Express MongoDB  

ChatGPT Tutorials:    • ChatGPT  

Join our facebook group:
  / 996305460498149  

Repo (GIve it a Start):
https://github.com/umairjameel321/dri...

Reference Link:
https://clerk.com/docs/integrations/w...

Contact us for development services:
  / umair-jameel-24aa5368