Task Management App 📝

A simple and efficient Task Management application built using the MERN stack (MongoDB, Express, React, Node.js) with authentication and task CRUD operations.

🚀 Features

• User authentication (Login/Register)
• Create, update, and delete tasks
• Mark tasks as completed or incomplete
• Pagination (10 tasks per page)
• Toast notifications for user interactions
• Mobile-friendly UI

🖼️ Screenshots

• Task List View
  

• Task Creation Modal
  

• Authentication Pages

  Signup page	Login page

🖥️ Tech Stack

Frontend:

• React.js with TypeScript
• TailwindCSS for styling
• Axios for API requests
• React Toastify for notifications

Backend:

• Node.js with Express.js
• MongoDB with Mongoose
• JSON Web Token (JWT) for authentication
• bcrypt.js for password hashing

📂 Project Structure

Frontend:

└── src/
├── App.css
├── App.tsx
├── index.css
├── main.tsx
├── assets/
├── components/
│ ├── Modal.tsx
│ └── Navbar.tsx
├── pages/
│ ├── Login.tsx
│ ├── Signup.tsx
│ ├── TaskForm.tsx
│ ├── TaskList.tsx
│ └── Tasks.tsx
├── routes/
│ ├── ProtectedRoute.tsx
│ └── routes.tsx
└── services/
└── apis.ts

Backend:

└── src/
├── index.js
├── config/
│ └── database.js
├── middlewares/
│ └── authentication.js
├── models/
│ ├── task.model.js
│ └── user.model.js
└── routes/
├── task.routes.js
└── user.routes.js

🔧 Installation & Setup

1. Clone the repository:

   git clone https://github.com/VrushabhVeer/kazam-ev-assignment.git
   cd kazam-ev-assignment
   npm install

   git clone https://github.com/VrushabhVeer/Kazam-ev-backend
   cd Kazam-ev-backend 
   npm install

2. Set up .env files in backend (server):

   MONGO_URI=your_mongodb_connection
   JWT_SECRET=your_secret_key

   Run the backend server:

   cd Kazam-ev-backend 
   npm run dev

   Run the frontend server:

   cd Kazam-ev-assignment 
   npm run dev
   Open http://localhost:5173 in your browser.
   

🔌 API Endpoints

Auth Routes:

POST /api/auth/register - Register a new user
POST /api/auth/login - Login user

Task Routes:

GET /tasks/mytasks?page=1 - Get paginated tasks (10 per page)
POST /tasks/create - Create a new task
PUT /tasks/update/:id - Update a task
DELETE /tasks/delete/:id - Delete a task
PUT /tasks/complete/:id - Mark task as completed/incomplete

📌 Future Enhancements

• Drag and drop task reordering ✅
• Due date reminders 📅
• Task statistics dashboard 📊