my-tasks

📘 Project Title: MyTasks — A Personal Task Manager

---

📝 Overview:

Build a simple full-stack task manager web app where users can:

• Add new tasks
• View all tasks
• Delete tasks
• Mark tasks as completed

Store tasks in memory for now (not in a database)

---

✅ Functional Requirements:

1. Add a Task

• Form with input for:

  • Task title (required)
  • Optional description

• When submitted:

  • Send a POST request to the backend
  • Task is added to the task list

2. View Tasks

• List all tasks on page load

• Each task must show:

  • Title
  • Description (if present)
  • Status: ✅ Completed or ❌ Pending
  • A “Delete” button
  • A “Mark as Completed” button (if pending)

• Data must be fetched using a GET request from the backend

3. Delete a Task

• Clicking “Delete” sends a DELETE request
• The task disappears from UI without page reload

4. Mark Task as Completed

• Clicking this sends a PUT or PATCH request
• Updates task’s status to “completed”
• UI updates accordingly

---

💡 Bonus Features (Optional):

• Filter tasks: Show only “completed” or “pending”
• Add a due date
• Sort tasks by date or status
• Save tasks to a JSON file (use fs module)

---

📁 File Structure:

mytasks/
├── public/
│   ├── index.html
│   ├── style.css
│   └── script.js
├── server.js
├── package.json

---

🔌 API Endpoints:

Method	Endpoint	Description
GET	/api/tasks	Get all tasks
POST	/api/tasks	Add a new task
DELETE	/api/tasks/:id	Delete task by ID
PATCH	/api/tasks/:id	Mark task as completed

---

📦 Task Object Structure (Example)

{
  "id": 1,
  "title": "Study Express.js",
  "description": "Build a full-stack project",
  "completed": false
}

---

🎯 User Experience Requirements:

• Clear, clean UI
• Form validation (task title must not be empty)
• Smooth task updates (no page reloads)
• Mobile responsive (bonus)

---

🚀 How to Start:

• Set up Express server to serve static files (public/)
• Create API routes for each function
• Connect the frontend using Fetch API to backend routes