Overview: Welcome to the Fullstack Trello Clone, a meticulously crafted project offering a comprehensive task management solution. Leveraging the power of Next.js 14, Server Actions, React, Prisma, Stripe, Tailwind, and MySQL, this project stands as a testament to modern web development practices.
Key Features:
-
Authentication: Secure and seamless user authentication ensures a personalized experience for every user.
-
Organizations / Workspaces: Efficiently organize your workflow by creating and managing distinct organizations or workspaces.
-
Board Operations: Empower users to create, rename, and delete boards, with the added aesthetic touch of random beautiful cover images from the Unsplash API.
-
Activity Logging: A comprehensive activity log keeps track of all actions within an organization, providing valuable insights into the workflow.
-
List Management: Create, rename, delete, and effortlessly reorder lists with intuitive drag & drop functionality.
-
Card Operations: Take control of your tasks with features like card creation, renaming, deletion, drag & drop reordering, and duplication.
-
Board Limits and Subscriptions: Set board limits for organizations and unlock the full potential with Stripe subscriptions, enabling unlimited boards.
-
Landing Page: A visually appealing landing page welcomes users and introduces them to the powerful capabilities of the application.
-
Database and ORM: The application is backed by a MySQL database managed through Prisma ORM, ensuring efficient and scalable data operations.
-
UI Frameworks: ShadcnUI and TailwindCSS collaborate to create a sleek and responsive user interface, enhancing the overall user experience.
Prerequisites: Ensure Node.js version 18.x.x is installed on your system before diving into the setup process.
Getting Started:
-
Clone the Repository:
git clone https://github.com/AntonioErdeljac/next13-trello.git -
Install Packages:
npm i -
Set Up Environment Variables: Configure your environment variables, including Clerk, database, Unsplash, Stripe, and app-specific details.
-
Prisma Setup:
npx prisma generate npx prisma db push -
Start the Application:
npm run dev