This project is a Trello-like task management web application built with the MERN Stack (MongoDB, Express.js, React, Node.js) and Vite. It features a modern Kanban-style board with drag-and-drop support, light/dark themes, and mock backend data.
- MERN Stack – Full-stack JavaScript application.
- React + Vite – Fast front-end with hot module reload.
- Express.js + Node.js – RESTful API server setup.
- MongoDB Integration (Planned) – Structured storage for boards, lists, cards, and users.
- Material UI (MUI) – Prebuilt responsive components with theming support.
- Drag and Drop – Smooth reordering of columns/cards using
@dnd-kit. - Theme Toggle – Switch between light/dark/system modes.
- Mock Data – Demo board data defined in
src/apis/mock_data.js. - Modular Codebase – Reusable components and services.
| Layer | Tech |
|---|---|
| Frontend | React, Vite, MUI, dnd-kit |
| Backend | Node.js, Express.js |
| Database | MongoDB (Planned integration) |
| Styling | Material UI, SCSS (optional) |
| Dev Tools | ESLint, Prettier, Git |
├── index.html
├── public/ # Static files
├── src/
│ ├── App.jsx # App root
│ ├── components/ # Reusable UI components
│ ├── pages/ # Page-level components (Boards, Users, Auth)
│ ├── utils/ # Helpers and utilities
│ ├── apis/ # Mock API services
│ └── theme.js # MUI theme configuration
├── server/ # Backend server (Express)
│ ├── routes/ # API route handlers
│ ├── controllers/ # Request logic
│ └── app.js # Entry point for Express
├── vite.config.js # Vite config
├── package.json
└── README.md
🛠️ Note: MongoDB database integration and full CRUD API for cards/columns are planned features.
# Frontend
cd client/
yarn install # or npm install
# Backend
cd server/
yarn install # or npm installFrontend:
cd client/
yarn dev # or npm run devAccess at: http://localhost:5173
Backend:
cd server/
yarn dev # or npm run devAccess API at: http://localhost:5000/api/...
# Frontend
cd client/
yarn build # or npm run buildcd client/
yarn preview # or npm run previewCreate a .env file in /server with:
PORT=5000
MONGO_URI=mongodb://localhost:27017/trello_clone💡 Update values based on your MongoDB config.
- Drag & Drop with dnd-kit
- Theme switching (light/dark)
- Board layout with MUI
- Connect with MongoDB
- Add user authentication (JWT)
- Real-time updates (Socket.IO or polling)
- REST API for cards, lists, boards
This project is for educational purposes. You are welcome to use and modify it as needed.
Pull requests are welcome! For major changes, please open an issue first to discuss what you would like to change.
- Trello (for UI inspiration)
- Vite, React, MUI
- dnd-kit (amazing drag-and-drop lib)