Fullstack Trello Clone: Next.js 14, Server Actions, React, Prisma, Stripe, Tailwind, MySQL
#Fullstack #Trello #Clone #Next.js #Server #Actions
“Code With Antonio”
Discord for any problems/errors/bugs:
Github & Live Website:
Clerk:
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…
source