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

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

Channel Name: Code With Antonio

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

Description: Discord for any problems/errors/bugs: Code With Antonio Discord
Github & Live Website: Trello Clone Project
Clerk: Clerk Link

Overview: In this 12-hour tutorial, you will learn how to create a fullstack Trello clone with features like workspaces, boards, lists, cards, audit logs, member roles, and more. The key features include authentication, organizations/workspaces, board management, Stripe integration for subscriptions, MySQL database, Prisma ORM, and UI using TailwindCSS.

Steps:

1. Environment Setup (Timestamp: 08:53)

   • Set up your development environment with Next.js, React, Prisma, Stripe, and MySQL.

2. Folders Setup (Timestamp: 21:12)

   • Organize your project folders for better structure and management.

3. Marketing Page (Timestamp: 42:27)

   • Create a landing page with the Unsplash API for fetching random cover images.

4. Authentication (Timestamp: 01:15:52)

   • Implement user authentication for secure access to the Trello clone.

5. Organizations (Timestamp: 01:39:54)

   • Create and manage workspaces/organizations for grouping boards.

6. Sidebar (Timestamp: 02:04:30)

   • Design and implement a sidebar for easy navigation within the application.

7. Workspace Settings (Timestamp: 02:55:39)

   • Configure settings for workspaces, such as permissions and roles.

8. Server Actions (Timestamp: 03:03:46)

   • Implement server-side actions for handling board and card operations.

9. Form Components (Timestamp: 04:18:00)

   • Create reusable form components for adding/editing data.

10. Board Popover Form (Timestamp: 04:36:10)

    • Design a popover form for creating new boards.

11. Board Server Action (Timestamp: 05:07:13)

    • Define server actions for managing boards, like renaming and deleting.

12. Board List & Page (Timestamp: 05:49:09 & 05:56:54)

    • Develop components for displaying board lists and individual board pages.

13. List & Card Components (Timestamp: 06:42:20 & 07:18:11)

    • Create components for lists and cards with functionalities like drag-and-drop.

14. Card Modal & Actions (Timestamp: 08:32:13 & 09:06:19)

    • Implement a modal for detailed card view and actions like renaming and deleting.

15. Activity / Audit Logs (Timestamp: 10:09:34)

    • Track and display activity logs for boards and cards within the organization.

16. Stripe Integration & Board Limits (Timestamp: 10:48:46)

    • Integrate Stripe for subscription payments and set limits for boards per organization.

17. Deployment (Timestamp: 11:47:30)

    • Deploy your fullstack Trello clone to make it accessible to users.

Summary: This tutorial guides you through building a feature-rich Trello clone using Next.js, React, Prisma, Stripe, TailwindCSS, and MySQL. By following the steps outlined in the video, you can create a fully functional application with authentication, organization management, board operations, and more. Feel free to refer back to the timestamps for specific sections as you work on each part of the project.