# To-Do List Web Application
## Backend Code (Node.js with Express)
### Step 1: Install Dependencies
```bash
npm init -y
npm install express body-parser cors uuid
```
### Step 2: Create server.js
```javascript
const express = require("express");
const bodyParser = require("body-parser");
const cors = require("cors");
const { v4: uuidv4 } = require("uuid");
const app = express();
app.use(bodyParser.json());
app.use(cors());
let tasks = [];
// Routes
app.get("/tasks", (req, res) => {
res.json(tasks);
});
app.post("/tasks", (req, res) => {
const { title, description, dueDate } = req.body;
if (!title) return res.status(400).json({ error: "Title is required" });
const newTask = { id: uuidv4(), title, description, dueDate, status: "To Do" };
tasks.push(newTask);
res.status(201).json(newTask);
});
app.put("/tasks/:id", (req, res) => {
const { id } = req.params;
const { title, description, dueDate, status } = req.body;
const task = tasks.find((task) => task.id === id);
if (!task) return res.status(404).json({ error: "Task not found" });
if (title) task.title = title;
if (description) task.description = description;
if (dueDate) task.dueDate = dueDate;
if (status) task.status = status;
res.json(task);
});
app.delete("/tasks/:id", (req, res) => {
const { id } = req.params;
tasks = tasks.filter((task) => task.id !== id);
res.status(204).send();
});
const PORT = 5000;
app.listen(PORT, () => console.log(`Server running on port ${PORT}`));
```
## Frontend Code (React)
### Step 1: Install React and Axios
```bash
npx create-react-app todo-app
cd todo-app
npm install axios
```
### Step 2: Create Task Components
#### App.js
```javascript
import React, { useState, useEffect } from "react";
import axios from "axios";
const App = () => {
const [tasks, setTasks] = useState([]);
const [newTask, setNewTask] = useState({ title: "", description: "", dueDate: "" });
useEffect(() => {
axios.get("http://localhost:5000/tasks").then((res) => setTasks(res.data));
}, []);
const addTask = () => {
axios.post("http://localhost:5000/tasks", newTask).then((res) => {
setTasks([...tasks, res.data]);
setNewTask({ title: "", description: "", dueDate: "" });
});
};
const deleteTask = (id) => {
axios.delete(`http://localhost:5000/tasks/${id}`).then(() => {
setTasks(tasks.filter((task) => task.id !== id));
});
};
return (
<div>
<h1>To-Do List</h1>
<input
type="text"
placeholder="Title"
value={newTask.title}
onChange={(e) => setNewTask({ ...newTask, title: e.target.value })}
/>
<input
type="text"
placeholder="Description"
value={newTask.description}
onChange={(e) => setNewTask({ ...newTask, description: e.target.value })}
/>
<input
type="date"
value={newTask.dueDate}
onChange={(e) => setNewTask({ ...newTask, dueDate: e.target.value })}
/>
<button onClick={addTask}>Add Task</button>
<ul>
{tasks.map((task) => (
<li key={task.id}>
{task.title} - {task.status}
<button onClick={() => deleteTask(task.id)}>Delete</button>
</li>
))}
</ul>
</div>
);
};
export default App;
```
### Conclusion
This setup covers the basics of a full-stack To-Do List application with Node.js backend and React
frontend. Extend this application with advanced features like authentication and persistent storage
for a complete experience.
