A full-stack Kanban board application built with the MERN stack (MongoDB, Express, React, Node.js). Manage your tasks with drag-and-drop functionality, priority levels, and real-time database synchronization.

• ✅ Create, read, update, and delete tasks
• 🎯 Three status columns: To Do, In Progress, Done
• 🎨 Priority levels: Low, Medium, High
• 🖱️ Drag and drop tasks between columns
• 💾 MongoDB database integration
• 🎭 Modern and responsive UI
• ⚡ Fast development with Vite

• MongoDB - NoSQL database for storing tasks
• Express.js - Backend web framework
• React - Frontend library with Vite
• Node.js - JavaScript runtime
• Axios - HTTP client for API calls

task24/
├── client/                  # React frontend (Vite)
│   ├── src/
│   │   ├── components/      # React components
│   │   │   ├── KanbanColumn.jsx
│   │   │   ├── TaskCard.jsx
│   │   │   └── TaskModal.jsx
│   │   ├── services/        # API service layer
│   │   │   └── api.js
│   │   ├── App.jsx          # Main app component
│   │   └── main.jsx         # Entry point
│   ├── .env                 # Environment variables
│   └── package.json
├── server/                  # Express backend
│   ├── src/
│   │   ├── models/          # Mongoose models
│   │   │   └── Task.js
│   │   ├── routes/          # API routes
│   │   │   └── taskRoutes.js
│   │   ├── controllers/     # Route controllers
│   │   │   └── taskController.js
│   │   ├── config/          # Configuration
│   │   │   └── database.js
│   │   └── index.js         # Server entry point
│   ├── .env.example         # Environment template
│   └── package.json
├── package.json             # Root scripts
├── .gitignore
└── README.md

• Node.js (v14 or higher)
• MongoDB (local installation or MongoDB Atlas account)
• npm or yarn

git clone https://github.com/alex-web13-2001/task24.git
cd task24

# Install root dependencies
npm install

# Install server dependencies
cd server
npm install

# Install client dependencies
cd ../client
npm install

If you have MongoDB installed locally, it will connect to mongodb://localhost:27017/task24 by default.

1. Create a free account at MongoDB Atlas
2. Create a new cluster
3. Get your connection string
4. Create .env file in the server directory:

cd server
cp .env.example .env

5. Edit .env and add your MongoDB URI:

PORT=5000
MONGODB_URI=mongodb+srv://username:password@cluster.mongodb.net/task24?retryWrites=true&w=majority
NODE_ENV=development

# From the root directory
npm run dev

This will start:

• Backend server on http://localhost:5000
• Frontend app on http://localhost:5173

# Terminal 1 - Start backend server
cd server
npm run dev

# Terminal 2 - Start frontend
cd client
npm run dev

{
  title: String (required),
  description: String,
  status: String (enum: ['todo', 'in-progress', 'done']),
  priority: String (enum: ['low', 'medium', 'high']),
  order: Number,
  createdAt: Date,
  updatedAt: Date
}

1. Create a task: Click the "+ Add Task" button in the header
2. Edit a task: Click the ✏️ icon on any task card
3. Delete a task: Click the 🗑️ icon on any task card
4. Move a task: Drag and drop task cards between columns
5. Set priority: Use the priority dropdown when creating/editing tasks

• npm run dev - Run both client and server concurrently
• npm run client - Run only the React frontend
• npm run server - Run only the Express backend
• npm run install-all - Install all dependencies

• npm start - Start server in production mode
• npm run dev - Start server with nodemon (auto-reload)

• npm run dev - Start Vite dev server
• npm run build - Build for production
• npm run preview - Preview production build

1. Set environment variables on your hosting platform
2. Ensure MongoDB URI is configured
3. Run npm start in the server directory

1. Update VITE_API_URL in client .env to your backend URL
2. Build the app: npm run build in client directory
3. Deploy the dist folder to your hosting platform

• Backend: Heroku, Railway, Render, DigitalOcean
• Frontend: Vercel, Netlify, GitHub Pages
• Database: MongoDB Atlas (free tier available)

PORT=5000
MONGODB_URI=mongodb://localhost:27017/task24
NODE_ENV=development

VITE_API_URL=http://localhost:5000/api

• Make sure MongoDB is running locally, or
• Check your MongoDB Atlas connection string
• Verify network access is allowed in MongoDB Atlas

• Ensure the backend server is running
• Check that CORS is enabled in server/src/index.js

• Open browser console to check for errors
• Verify the API URL in client/.env
• Ensure backend server is running on the correct port

MIT

Created with ❤️ using MERN stack