Build Rich Text Editor + Image Upload (Tiptap + UploadThing + Prisma)

Description

In this video, I show you how to add image upload functionality in Tiptap Rich Text Editor using UploadThing in a Next.js App Router project. You’ll also learn how to save posts to a PostgreSQL database with Prisma, making a complete blog or CMS editor from scratch. How build Rich Text Editor use TipTap: https://youtu.be/QVffer2fRfg How to add auth before upload file: https://youtu.be/CTvew1iIc54 Blog - Setup Prisma in Nextjs: https://ckriswinarto.medium.com/installing-and-configuring-prisma-in-next-js-app-router-d02a5ee4d0b5 🛠️ Tools & Packages Used: - [Nextjs]: https://nextjs.org/ - [Template Editor TipTap]: https://tiptap.dev/docs/ui-components/templates/simple-editor - [Uploadthing]: https://uploadthing.com/ - [Prisma]: https://www.prisma.io/ ⏱️ Timestamps: 00:00 - Introduction 02:37 - Install and set up Next.j 03:08 - Install and set up Tiptap Rich Editor template 07:20 - Install and set up Prisma 11:04 - Create and customize the Rich Editor form UI 17:46 - Get value from Rich Text Editor and save it to state 21:05 - Create and integrate API to fetch and create posts 28:38 - Create blog detail page 31:42 - Create read-only Rich Text Editor 35:42 - Create posts page 38:12 - Install and set up UploadThing for image upload 43:40 - How to upload a file 🌐 Check out more content: - My Portfolio: https://www.cand.site/ - Medium: https://medium.com/@ckriswinarto 💻 Get the Source Code: - GitHub: https://github.com/candraKriswinarto/template-blog-tiptap 🌐 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! #Nextjs #Tiptap #UploadThing #Prisma #PostgreSQL #WebDevelopment #Coding #FullStackDevelopment