A production-ready, full-stack project management application inspired by Trello. Built with Next.js 15, TypeScript, Supabase, and Clerk—featuring real-time collaboration, drag-and-drop Kanban boards, and subscription-based access control.
Live Preview: https://trello-clone-by-shan.vercel.app
- TypeScript — Full type safety, interfaces, generics, and strict mode
- Modern ES6+ — Async/await, destructuring, spread operators, modules
- Type-safe API design — End-to-end type consistency across frontend and backend
- Type inference & utility types — Efficient type composition and inference
- AI-ready architecture — Modular, extensible design for future ML/AI integrations
- Structured data models — Clean schemas suitable for AI-powered analytics and suggestions
- Context-aware filtering — Smart task filtering by priority, assignee, and due dates
- Search & discoverability — Fast, queryable data layer for AI-assisted search
- React 19 — Latest React with Server Components and concurrent features
- Next.js 15 — App Router, Server-Side Rendering, route handlers
- Component-based architecture — Reusable, composable UI with clear separation of concerns
- Experience with: Tailwind CSS, Shadcn/UI, Radix UI, and utility-first CSS
- Kanban Board Management — Create, edit, and organize boards with customizable colors and titles
- Drag & Drop Interface — Smooth task reordering with @dnd-kit
- Column Management — Create, edit, and delete columns to structure workflows
- Task Management — Tasks with titles, descriptions, assignees, priorities, and due dates
- Real-time Updates — Live sync of board changes across sessions via Supabase
- Row Level Security (RLS) — Database-level security so users only access their own data
- User Isolation — Complete data separation between accounts
- Modern Authentication — Secure sign-in/sign-up with Clerk
- Responsive Design — UI built with Tailwind CSS and Shadcn UI
- Dashboard Overview — Centralized view of boards with statistics
- Advanced Filtering — Filter tasks by priority, assignee, and due dates
- Search — Search across boards and tasks
- Free Tier — Limited to 1 board for free users
- Premium Plans — Unlimited boards and advanced features via Clerk pricing
- Upgrade Prompts — Seamless upgrade flow for free users
- Full TypeScript — Type safety across the app
- Server-Side Rendering — Next.js 15 for performance
- Supabase — Real-time database and authentication
- Feature-based architecture — Modular, maintainable codebase
| Home | Sign Up | Dashboard |
|---|---|---|
 |
 |
 |
Modern landing page • User registration with Clerk • Board overview and statistics
| Filters | Board | Pricing |
|---|---|---|
 |
 |
 |
Filter dropdown • Interactive Kanban board • Subscription plans
| Category | Technologies |
|---|---|
| Framework | Next.js 15, React 19 |
| Language | TypeScript 5 |
| Styling | Tailwind CSS 4, Shadcn UI, Radix UI |
| Database | Supabase (PostgreSQL) |
| Auth | Clerk |
| Drag & Drop | @dnd-kit |
| Icons | Lucide React |
| Tooling | ESLint, PostCSS, Turbopack |
git clone https://github.com/healer-125/pro-trello-clone.git
cd pro-trello-clonenpm installCreate a .env file in the project root:
# Clerk Authentication
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY=your_clerk_publishable_key
CLERK_SECRET_KEY=your_clerk_secret_key
# Supabase
NEXT_PUBLIC_SUPABASE_URL=your_supabase_url
NEXT_PUBLIC_SUPABASE_ANON_KEY=your_supabase_anon_keynpm run devOpen http://localhost:3000 in your browser.
pro-trello-clone/
├── app/ # Next.js App Router
├── components/ # Shared UI components
├── features/ # Feature modules (auth, boards, dashboard, pricing)
├── lib/ # Utilities, Supabase client, services
└── providers/ # React context providers
Deployed on Vercel with automatic builds from the main branch.
healer-125
- GitHub: @healer-125
- Project: pro-trello-clone
This project is available for portfolio and educational use. For questions or feedback, please open an issue on GitHub.