데브허브 | DEVHUB | Full Stack React JS Project ( Journal App ) - Next.js 15, Shadcn, Tailwind, Clerk, NeonDB Tutorial 🔥Full Stack React JS Project ( Journal App ) - Next.js 15, Shadcn, Tailwind, Clerk, NeonDB Tutorial 🔥
🔗 Clerk - https://go.clerk.com/xZqJH6D
🔗 NeonDB - https://fyi.neon.tech/rc3
🔗 Arcjet - https://launch.arcjet.com/lntcDjf
➡️ My Frontend Interview Course - https://roadsidecoder.com/course-details (50% Discount)
Build a Full Stack Journal App in React JS with Tailwind CSS, Supabase, Clerk Authentication, Arcjet, Shadcn UI Tutorial. This is an amazing project for your resume which will impress recruiters a lot and showcase your skillset.
🔗 React JS Interview Series -
• Frontend Machine Coding Interview Questions
➡️ Next JS Course Form - https://forms.gle/ABmuVhYATuwhkcmVA
➡️ Source Code - https://github.com/piyush-eon/journal...
➡️ Book a mentorship call with me - https://topmate.io/roadsidecoder
👤 Join the RoadsideCoder Community Discord -
/ discord
🔗 Pagination Tutorial -
• React JS Interview Questions ( Pagination ...
🔗 MERN Stack Chat App Tutorial -
• MERN Stack Chat App with Socket.IO Tutorial
🔗 Complete Data Structures and Algorithms with JS Course -
• Data Structures and Algorithms in Javascri...
🔗 JS Interview Series -
• Javascript Interview Questions ( Var, Let ...
🔗 Cars24 Interview Experience -
• Frontend Interview Experience (Cars24) - J...
🔗 Unacademy Interview Experience -
• Frontend Interview Experience (Unacademy) ...
🔗 Tazorpay Interview Experience -
• Frontend Interview Experience (TazorPay) -...
🔗 React Beginner's Project Tutorials -
• React JS Project Tutorials 🔥🔥
#reactjstutorial #frontend #ReactJS
-------------------------------------------------------------------------
00:00:00 Intro
00:00:50 Project Showcase
00:06:08 Setup Next JS with Shadcn UI
00:14:22 Root Layout Component
00:17:55 Header Component
00:20:49 User Authentication
00:25:30 Custom Login/Signup Page
00:39:29 Setup Postgres SQL DB
00:41:22 ArcJet Setup
00:43:18 Landing Page
01:14:20 Daily Prompts on Landing Page
01:19:23 Database Design
01:23:18 Creating Datbase Models with Prisma
01:32:23 Storing user data in DB
01:36:05 Routing in Next JS
01:40:53 Custom 404 Route
01:42:45 Write New Journal
01:52:34 Journal Entry Page
02:16:59 Custom Hook for Fetching APIs
02:25:19 Rate Limiting Journal Creation API
02:32:34 Create Collection Logic
02:40:14 Create Collection Dialog
02:50:05 Dasboard Page
03:15:34 Mood Analytics
03:36:52 Collection with Entries Page
03:41:30 Journal Filters
03:55:01 Delete Collection Dialog
04:03:29 Adding Shield and Bot Protection
04:07:29 Journal Page
04:17:50 Delete Entry
04:22:34 Edit Journal Entry
04:26:38 Save to Draft Logic
04:29:01 Edit an Draft UI Implementation
04:41:33 Deployment
-------------------------------------------------------------------------
⭐ Support the channel -
/ @roadsidecoder
Special Thanks to our members -