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 - • How to Build a Rich Text Editor in Next.js...
🛠️ Tools & Packages Used:
[nextjs docs] - https://nextjs.org/docs
[clerk docs] - https://clerk.com/docs/quickstarts/ne...
[shadcn ui docs] - https://ui.shadcn.com/docs/installati...
[ngrok] - https://ngrok.com/
[Isomorphic DOMPurify] - https://www.npmjs.com/package/isomorp...
mock-data.ts - https://gist.github.com/candraKriswin...
🗒️ Medium blog
[medium-setup prisma] - / installing-and-configuring-prisma-in-next-...
[medium-rich text editor] - / how-to-build-a-rich-text-editor-in-next-js...
💻 Code
[github-my rich text editor] - https://github.com/candraKriswinarto/...
[Final code] - https://github.com/candraKriswinarto/...
⏱️ 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: / ckriswinarto
💻 Get the Source Code: https://github.com/candraKriswinarto/...
🌐 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
