Trello Clone - Next.js

A modern project management tool inspired by Trello, built with Next.js, Supabase, and Clerk. This full-stack application provides a comprehensive board experience with drag-and-drop functionality, real-time collaboration, and subscription-based features.

Demo

• Live Preview: https://trello-clone-by-shan.vercel.app

Features

Core Functionality

• Kanban Board Management: Create, edit, and organize boards with customizable colors and titles
• Drag & Drop Interface: Intuitive task management with smooth drag-and-drop using @dnd-kit
• Column Management: Create, edit, and delete columns to organize your workflow
• Task Management: Add tasks with titles, descriptions, assignees, priorities, and due dates
• Real-time Updates: Live synchronization of board changes across sessions

Security & Data Protection

• Row Level Security (RLS): Database-level security ensuring users can only access their own data
• User Isolation: Complete data separation between different user accounts

User Experience

• Modern Authentication: Secure sign-in/sign-up with Clerk integration
• Responsive Design: Beautiful UI built with Tailwind CSS and Shadcn UI components
• Dashboard Overview: Centralized view of all your boards with statistics
• Advanced Filtering: Filter tasks by priority, assignee, and due dates
• Search Functionality: Quick search across boards and tasks

Subscription Features

• Free Tier: Limited to 1 board for free users
• Premium Plans: Unlimited boards and advanced features via Clerk's pricing integration
• Upgrade Prompts: Seamless upgrade flow for free users

Technical Features

• TypeScript: Full type safety throughout the application
• Server-Side Rendering: Optimized performance with Next.js 15
• Database Integration: Supabase for real-time data management
• Component Architecture: Modular, reusable components with feature-based organization

Screenshots

• Modern landing page with feature highlights

• User registration with Clerk

• User dashboard with board overview and statistics

• Filter Dropdown on Dashboard Page

• Interactive kanban board with drag-and-drop functionality

• Subscription plans and pricing options

Run Locally

Clone the project

git clone https://github.com/Mshandev/Trello-Clone.git

Go to the project directory

cd trello-clone

Install dependencies

npm install

Setup Environment Variables

Create a .env file in the root folder and add the following variables:

# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key

# Supabase Database
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_key

Start the development server

npm run dev

Open http://localhost:3000 in your browser.

Tech Stack

Frontend

• Next.js 15 - React framework with App Router
• TypeScript - Type-safe JavaScript
• Tailwind CSS - Utility-first CSS framework
• Shadcn UI - Beautiful, accessible components
• Lucide React - Icon library

Backend & Database

• Supabase - Backend-as-a-Service with PostgreSQL
• Clerk - Authentication and user management

Drag & Drop

• @dnd-kit - Modern drag-and-drop toolkit for React

Development Tools

• ESLint - Code linting
• PostCSS - CSS processing

Deployment

The application is deployed on Vercel.

Contributing

Contributions are always welcome! Just raise an issue, and we will discuss it.

Feedback

If you have any feedback, please reach out to me here