Task Manager - MERN Stack Application

A professional task management web application built with the MERN stack (MongoDB, Express.js, React.js, Node.js) featuring a modern, responsive UI with Bootstrap styling.

🚀 Features

• Task Management: Create, read, update, and delete tasks
• Status Tracking: Three status levels - To Do, In Progress, Done
• Responsive Design: Modern UI built with React-Bootstrap
• Real-time Updates: Instant UI updates after API operations
• Form Validation: Client-side validation with error handling
• Professional UI: Clean, modern interface with gradient backgrounds

🛠️ Tech Stack

Frontend

• React.js 19.1.0 - UI framework
• React-Bootstrap 2.10.10 - UI components
• Bootstrap 5.3.7 - CSS framework
• Axios 1.10.0 - HTTP client
• React Icons 5.5.0 - Icon library

Backend (To be implemented)

• Node.js - Runtime environment
• Express.js - Web framework
• MongoDB - Database
• Mongoose - ODM for MongoDB

📁 Project Structure

task-manager-frontend/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── components/
│   │   ├── TaskForm.jsx      # Task creation form
│   │   └── TaskList.jsx      # Task display and management
│   │   └── Home.jsx          # Main application page
│   │   └── App.js            # Main app component
│   │   └── App.css           # Custom styles
│   │   └── index.js          # Application entry point
│   ├── services/
│   │   ├── apiRequest.js     # Base API configuration
│   │   └── taskApiCall.js    # Task-specific API calls
│   ├── package.json
│   └── README.md

🚀 Getting Started

Prerequisites

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

Installation

1. Clone the repository

   git clone <repository-url>
   cd task-manager-frontend

2. Install dependencies

   npm install

3. Start the development server

   npm start

4. Open your browser Navigate to http://localhost:3000

📡 API Endpoints

The frontend expects the following REST API endpoints:

Base URL: http://localhost:5000/api (configurable)

Method	Endpoint	Description	Request Body
GET	/tasks	Get all tasks	-
POST	/tasks	Create new task	{ title, description, status }
PUT	/tasks/:id	Update task status	{ status }
DELETE	/tasks/:id	Delete task	-

Task Schema

{
  "_id": "ObjectId",
  "title": "string (required)",
  "description": "string",
  "status": "string (To Do | In Progress | Done)",
  "createdAt": "Date",
  "updatedAt": "Date"
}

🎨 UI Components

TaskForm Component

• Bootstrap-styled card form
• Input validation (title required)
• Status dropdown selection
• Loading state during submission

TaskList Component

• Responsive Bootstrap table
• Inline status updates via dropdown
• Delete functionality with confirmation
• Empty state message

Home Page

• Main application layout
• Error and success message handling
• Loading spinner for API calls
• Responsive grid layout

🔧 Configuration

API Configuration

Update the base URL in src/services/apiRequest.js:

const BASE_URL = 'http://localhost:5000/api'; // Change to your backend URL

Environment Variables

Create a .env file in the root directory:

REACT_APP_API_URL=http://localhost:5000/api

🧪 Testing

Run the test suite:

npm test

📦 Build for Production

Create a production build:

npm run build

🚀 Deployment

Frontend Deployment

1. Build the application: npm run build
2. Deploy the build folder to your hosting service (Netlify, Vercel, etc.)

Backend Deployment

1. Set up your Node.js backend with the required API endpoints
2. Deploy to platforms like Heroku, Railway, or DigitalOcean
3. Update the API URL in the frontend configuration

📝 Postman Collection

Sample cURL Commands

Get All Tasks

curl -X GET http://localhost:5000/api/tasks

Create New Task

curl -X POST http://localhost:5000/api/tasks \
  -H "Content-Type: application/json" \
  -d '{
    "title": "Complete Project",
    "description": "Finish the MERN stack task manager",
    "status": "In Progress"
  }'

Update Task Status

curl -X PUT http://localhost:5000/api/tasks/TASK_ID \
  -H "Content-Type: application/json" \
  -d '{"status": "Done"}'

Delete Task

curl -X DELETE http://localhost:5000/api/tasks/TASK_ID

🔒 Error Handling

The application includes comprehensive error handling:

• Form validation errors
• API error responses
• Network connectivity issues
• User-friendly error messages

📱 Responsive Design

• Mobile-first approach
• Bootstrap responsive grid system
• Optimized for all screen sizes
• Touch-friendly interface

🎯 Known Limitations

• Requires backend API to be running
• No offline functionality
• No user authentication (can be added)
• No task categories or tags (can be extended)

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests if applicable
5. Submit a pull request

📄 License

This project is licensed under the MIT License.

👨‍💻 Author

[Your Name] - MERN Stack Developer

---

Note: This is the frontend implementation. The backend API needs to be implemented separately with the corresponding endpoints and MongoDB integration.