✨ Task Manager

A modern, full-stack Task Management Application built with React, TypeScript, and Node.js. Features a beautiful UI with smooth animations, priority management, calendar view, and notification system.

🔗 Live Demo: task-management-application-khaki-seven.vercel.app

---

🚀 Features

• Create Tasks — Add tasks with title, description, priority level, due date, and importance flag
• Manage Tasks — Mark as complete, edit, or delete tasks with confirmation
• Priority System — Assign Low, Medium, or High priority to tasks
• Sort & Filter — Sort tasks by date, title, or completion status
• Calendar View — Visualize tasks on a monthly calendar with color-coded priorities
• Notifications — View pending tasks filtered by priority and importance
• Settings — Configure theme, notification preferences, and auto-archive
• Smooth Animations — Framer Motion powered transitions and micro-interactions
• Responsive Design — Works on desktop and mobile devices

---

🛠️ Tech Stack

Frontend

Technology	Purpose
React 18	Component-based UI library
TypeScript	Static typing for safer code
Vite	Fast dev server & build tool
Ant Design	UI component library
Tailwind CSS	Utility-first CSS framework
Framer Motion	Animations & transitions
Zustand	Lightweight state management
Lucide React	Icon library

Backend

Technology	Purpose
Node.js + Express	REST API server
MongoDB + Mongoose	NoSQL database & ODM
CORS	Cross-origin request handling
dotenv	Environment variable management

---

📁 Project Structure

├── src/                        # Frontend source code
│   ├── main.tsx                # React entry point
│   ├── App.tsx                 # Main layout & navigation
│   ├── index.css               # Global styles
│   ├── store/
│   │   └── taskStore.ts        # Zustand state management
│   └── components/
│       ├── TaskForm.tsx         # Task creation form
│       ├── TaskList.tsx         # Task grid with actions
│       ├── Calendar.tsx         # Calendar modal view
│       ├── Notifications.tsx    # Pending tasks panel
│       └── Settings.tsx         # App settings modal
│
└── sample_backend/             # Backend API server
    ├── index.js                # Express server & DB connection
    ├── models/
    │   └── Task.js             # Mongoose task schema
    └── routes/
        └── tasks.js            # CRUD API routes

---

⚡ Getting Started

Prerequisites

• Node.js (v18 or higher)
• MongoDB (local or Atlas cloud)

1. Clone the Repository

git clone https://github.com/mayuriphad/Task-Management-Application.git
cd Task-Management-Application

2. Run the Frontend

npm install
npm run dev

The app will be available at http://localhost:5173

3. Run the Backend (Optional)

cd sample_backend
npm install

Create a .env file in sample_backend/:

PORT=5000
MONGODB_URI=mongodb://localhost:27017/taskmanager

Start the server:

npm start

The API will be available at http://localhost:5000

---

🔌 API Endpoints

Method	Endpoint	Description
GET	/api/tasks	Fetch all tasks
POST	/api/tasks	Create a new task
PATCH	/api/tasks/:id	Update a task
DELETE	/api/tasks/:id	Delete a task

---

📸 Screenshots

Run the project locally to see the beautiful UI with glassmorphism effects, gradient backgrounds, and smooth animations.

---

🤝 Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

---

📄 License

This project is open source and available under the MIT License.

---

Made with ❤️ by Mayuri Phad