MENU

Fun & Interesting

Fullstack Trello Clone: Next.js 14, Server Actions, React, Prisma, Stripe, Tailwind, MySQL

Code With Antonio 341,744 1 year ago
Video Not Working? Fix It Now

Discord for any problems/errors/bugs: https://www.codewithantonio.com/discord Github & Live Website: https://www.codewithantonio.com/projects/trello-clone Clerk: https://dub.sh/y3MvWRC Hi all 👋 In this 12 hour tutorial you will learn how to create an end-to-end fullstack and trello clone, all with workspaces, boards, lists, cards, audit logs / activity as well as member roles. Key Features: - Auth - Organizations / Workspaces - Board creation - Unsplash API for random beautiful cover images - Activity log for entire organization - Board rename and delete - List creation - List rename, delete, drag & drop reorder and copy - Card creation - Card description, rename, delete, drag & drop reorder and copy - Card activity log - Board limit for every organization - Stripe subscription for each organization to unlock unlimited boards - Landing page - MySQL DB - Prisma ORM - shadcnUI & TailwindCSS Timestamps 00:00 Intro & Demo 08:53 Environment Setup 21:12 Folders Setup 42:27 Marketing Page 01:15:52 Authentication 01:39:54 Organizations 02:04:30 Sidebar 02:55:39 Workspace Settings 03:03:46 Server Actions 03:51:33 useAction abstraction 04:18:00 Form Components 04:36:10 Board Popover Form 05:07:13 Board Server Action 05:49:09 Board List 05:56:54 Board Page 06:42:20 List Component 07:18:11 List Header 07:39:34 List Options 07:59:17 Card Form 08:32:13 Drag n' Drop 09:06:19 Card Modal 09:36:28 Card Actions 10:09:34 Activity / Audit Logs 10:48:46 Stripe & Board Limits 11:47:30 Deployment

Comment