Trello Clone Project

Task management web app inspired by Trello, with real-time collaboration and drag-and-drop boards.

Tan Luc

· Visit Project

ReactJSMongoDBNodeJSMaterial-UIMERNdnd-kit

About the Project

A Trello-inspired task management application with real-time collaboration and an intuitive drag-and-drop interface. Built from scratch to replicate Trello’s core experience, this project helped strengthen both frontend and backend skills.

Trello Clone Main Interface
Main board interface replicating Trello layout with draggable task cards.

Features

  • 🧩 Drag-and-drop task reordering via @dnd-kit
  • 🔐 Authentication system with protected routes
  • ⚡ Real-time UI updates and smooth state transitions
  • 🌗 Dark and light mode toggle support
  • 🎨 Responsive design using Material UI
Dark Theme
Dark mode interface for better focus and low-light environments.
Light Theme
Light mode interface for a clean and bright user experience.

Tech Stack

  • Frontend: ReactJS, Material UI, dnd-kit
  • Backend: NodeJS, ExpressJS
  • Database: MongoDB
  • Architecture: MERN Stack (MongoDB, Express, React, Node)

Technical Implementation

Drag and Drop Logic

The project uses @dnd-kit to implement Trello-style drag-and-drop functionality for moving task cards between columns.

const handleDragEnd = (event) => {
  const { active, over } = event;
  if (!over || active.id === over.id) return;

  const oldColumn = findColumnByCardId(active.id);
  const newColumn = findColumnByCardId(over.id);

  if (oldColumn && newColumn) {
    moveCardBetweenColumns(active.id, oldColumn, newColumn);
  }
};