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

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:
whatsapp.com/c...
React tutorials:
• React.js Tutorials
JavaScript Tutorials and Projects:
• JavaScript Tutorial an...
Angular Tutorials:
• Angular 16 Life Cycle ...
Docker Tutorials & CI/CD:
• Docker Tutorials & CI/CD
Angular 16 Crash Course For Beginners:
• Angular 16 Crash Course
Tech Tutorials - Random:
• Postman Tutorial - Tes...
Complete Next.js 13 Tutorials: • Next.js 13 Tutorials -...
Next.js 14 Tutorials:
• Next.js 14 Tutorials -...
Node Express MongoDB Bootcamp: • Build REST API with No...
ChatGPT Tutorials: • ChatGPT
Join our facebook group:
/ 996305460498149
Repo (GIve it a Start):
github.com/uma...
Reference Link:
clerk.com/docs...
Contact us for development services:
/ umair-jameel-24aa5368

[@clement-touz]

For those who search how to link clerk database with your own database : 1:11:23

[@skverskk]

Absolutely awesome! And I'm talking about the webhooks portion. I;m still in search of a tutorial showing user roles and pernissions in Clerk. Thank you

[@ItsMeHelel]

It breaks around 12:50 when trying to generate, says that Error: Cannot find module 'dotenv/config'

[@ProgrammingwithUmair321]

Make sure you are using same versions of techs as I am using. Otherwise you can refer to docs and this is what I do.

[@renchandara389]

you need go to terminal npm i dotenv before npx drizzle-kit generate

[@rahulchourasiya4148]

Can you please make a video for single sign on, like centralised authentication website using next-auth, without any workos or any paid library for multiple saas website

[@umerxa]

Hi! Loved the tutorial. I have a newbie question. Will Clerk middleware also protect the server actions, or can anyone with the server action ID access your actions using tools like Postman?

[@ProgrammingwithUmair321]

Server actions are not directly exposed through any url like actual api, so no body can trigger server action functions directly from postman

[@TaskerTech]

Hey great tutorial, I have a question, since the action to delete a todo item doesn't validate the user does it mean that any user can delete any todo item by just calling the API with the id?
export const deleteTodo = async (id: number) => {
await db.delete(todos).where(eq(todos.id, id));
revalidatePath("/");
};

[@ProgrammingwithUmair321]

Server action are auto protected, means external apps like postman etc. can’t trigger server action to delete any note.
Server actions are not APIs in terms of it accessibility as there is no url of server actions just like apis.

[@TaskerTech]

@@ProgrammingwithUmair321 got it, I could see it in the network tab so I thought anyone could make an API call.

[@muhammadjamshed2823]

Now it's my request. Please make an ecomerce website which should be based on MUI and NextJs not any other css please

[@regilearn2138]

with typescript redux and react query tanstack tables

[@ganeshsrambikal3614]

dadabase !. Love the tutorial ❤

[@muhammadjamshed2823]

I am your first viewer.

[@sunny-g1m6z]

so many youtubers using so many databases mf not inteesred in learning every thing