Learn how to create a full-stack blog app in Next.js with a powerful rich text editor using Tiptap, user authentication via Clerk, and a database with Prisma & PostgreSQL.
How to create rich text editor - https://youtu.be/QVffer2fRfg
🛠️ Tools & Packages Used:
[nextjs docs] - https://nextjs.org/docs
[clerk docs] - https://clerk.com/docs/quickstarts/nextjs
[shadcn ui docs] - https://ui.shadcn.com/docs/installation/next
[ngrok] - https://ngrok.com/
[Isomorphic DOMPurify] - https://www.npmjs.com/package/isomorphic-dompurify
mock-data.ts - https://gist.github.com/candraKriswinarto/ceb4c812c59af28053811b0b9569c572
🗒️ Medium blog
[medium-setup prisma] - https://ckriswinarto.medium.com/installing-and-configuring-prisma-in-next-js-app-router-d02a5ee4d0b5
[medium-rich text editor] - https://ckriswinarto.medium.com/how-to-build-a-rich-text-editor-in-next-js-using-tiptap-aee83f4f4366
💻 Code
[github-my rich text editor] - https://github.com/candraKriswinarto/my-rich-text-editor
⏱️ Timestamps:
00:00 - Introduction
00:09 - Demo
02:13 - how to install nextjs
02:44 - Install shadcn ui in nextjs
08:13 - Install and Setup Clerk in Nextjs
15:47 - Install and Setup Prisma in Nextjs
23:29 - Sync User data from clerk into Database use webhooks
35:44 - Styling the Home & Post list component
50:29 - Create form add new post & integrate
01:22:15 - Get Post from database and render on the UI
01:27:26 - Create the detail Blog page
01:42:55 - Create the edit Blog page
02:04:02 - Create Dashboard page
02:13:50 - Create Delete post component
🌐 Check out more content:
- My Portfolio: https://www.cand.site/
- Medium: https://medium.com/@ckriswinarto
💻 Get the Source Code:
🌐 Recommended Digital Tools (Affiliate Links):
- Hostinger: Get 20% Off on Web Hosting - https://dub.sh/zrpWarU
👍 If you found this video helpful, please like, and subscribe!
❓ Any questions? Drop them in the comments below!
#Coding #nextjs #fullstack