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

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

Source: https://www.youtube.com/watch?v=pRybm9lXW2c

Leave a Reply

Your email address will not be published. Required fields are marked *