Trello Clone

Trello Clone is an open-source, learning-focused project management web application built with Next.js, TypeScript, Chakra UI, and MongoDB that recreates Trello's kanban board features such as boards, cards, labels, and JWT authentication.

What is Trello Clone?

Trello Clone is a clone application built for learning purposes, replicating Trello's core kanban workflow. It accepts user-created boards and cards and produces a synchronized task management UI. It runs on Next.js with TypeScript, uses Chakra UI for the component library, and stores data in MongoDB — either locally or via Mongo Atlas in production. The project is maintained by Ankit Kumar and includes a demo deployed at trello-clone-one.vercel.app.

What makes Trello Clone stand out?

This project demonstrates a complete full-stack feature set in a single Next.js application:

• JWT authentication — login and registration with token-based authentication, using a JWT_SECRET_KEY environment variable.
• Board management — create, update, and delete boards, with an optional background image library.
• Card management — add, update, move, and delete cards within boards.
• Background image library — supports an Unsplash-powered gallery; an Unsplash API key is required.
• Labels — add color-coded labels to cards.
• Detailed descriptions — cards support detail descriptions.
• User invitations — board owners can invite other users to collaborate.
• Card assignment — assign cards to specific users.

Who should use Trello Clone?

Full-stack developers looking for a realistic example of authentication, CRUD operations, and database modeling in Next.js. Self-hosting teams that want a lightweight, MIT-licensed kanban tool can run it locally or with Docker. Open-source contributors can extend it; the project's roadmap includes adding card comments and Cypress testing.

What can you do with Trello Clone?

• Learners: trace how JWT auth, MongoDB, and Chakra UI are wired together in a real app.
• Small teams: self-host a private board to manage short-term tasks, with user invites and card assignments.
• Contributors: pick up the roadmap items, such as comments and Cypress end-to-end tests, to practice feature development.

How does Trello Clone work?

After cloning the repository, create a .env.local file with LOCAL_MONGODB (pointing to a local MongoDB instance) and a JWT_SECRET_KEY. Run yarn install then yarn dev (or docker-compose up with a Docker MongoDB service). For the Unsplash gallery, you also need an API key. The app then connects to MongoDB and serves the Next.js front end.

Pros and cons

• Pros: Open-source under the MIT license; full-stack Next.js with TypeScript; optional Docker setup; includes a demo link.
• Cons: Requires an Unsplash API key for the background-image gallery; card comments are not implemented yet (listed as a next step in the roadmap).

FAQ

Is Trello Clone free?

Yes. The project is open-source and released under the MIT license. You can run it locally or deploy it yourself without a licensing fee, though external services such as MongoDB Atlas and Unsplash may have their own costs.

How do I run Trello Clone locally?

Clone the repository, create a .env.local file with LOCAL_MONGODB and JWT_SECRET_KEY, run yarn install, and then yarn dev. Alternatively, use Docker with the provided docker-compose setup, which spins up a MongoDB service automatically.

Does Trello Clone need an Unsplash API key?

Only for the background-image gallery. Without a key, the gallery won't load, but the core board and card features work. Generate a free key from the Unsplash developer portal.

Can I add comments to cards?

Not yet. The roadmap explicitly lists "Comment on the card" as a planned feature, along with Cypress testing. Contributions are welcome.