📦 Tech Stack

🔧 Backend Setup (/server)

📁 Folder Structure

/server
 ┣ /models
 ┃ ┗ Task.js
 ┣ /routes
 ┃ ┗ tasks.js
 ┣ .env
 ┣ server.js
 ┗ package.json
      

a. server.js

const express = require('express');
const mongoose = require('mongoose');
const cors = require('cors');
require('dotenv').config();

const app = express();

app.use(cors());
app.use(express.json());

mongoose.connect(process.env.MONGO_URI)
  .then(() => console.log('MongoDB Connected'));

app.use('/api/tasks', require('./routes/tasks'));

const PORT = process.env.PORT || 5000;
app.listen(PORT, () => console.log(`Server running on ${PORT}`));
      

b. models/Task.js

const mongoose = require('mongoose');

const TaskSchema = new mongoose.Schema({
  title: String,
  completed: Boolean
});

module.exports = mongoose.model('Task', TaskSchema);
      

c. routes/tasks.js

const express = require('express');
const router = express.Router();
const Task = require('../models/Task');

router.get('/', async (req, res) => {
  const tasks = await Task.find();
  res.json(tasks);
});

router.post('/', async (req, res) => {
  const task = new Task(req.body);
  await task.save();
  res.json(task);
});

router.put('/:id', async (req, res) => {
  const task = await Task.findByIdAndUpdate(req.params.id, req.body, { new: true });
  res.json(task);
});

router.delete('/:id', async (req, res) => {
  await Task.findByIdAndDelete(req.params.id);
  res.json({ success: true });
});

module.exports = router;
      

d. .env

MONGO_URI=mongodb://localhost:27017/taskdb
      

🌐 Frontend Setup (/client)

📁 Folder Structure

/client
 ┣ /src
 ┃ ┣ /components
 ┃ ┃ ┗ TaskList.jsx
 ┃ ┗ App.jsx
 ┣ .env
 ┗ package.json
      

a. .env for Axios

VITE_API_URL=http://localhost:5000/api
      

b. Install Axios

npm install axios
      

c. App.jsx

import React from 'react';
import TaskList from './components/TaskList';

function App() {
  return (
    

      
Task Manager 2025
      
    
  );
}

export default App;
      

d. TaskList.jsx

import React, { useEffect, useState } from 'react';
import axios from 'axios';

const API = import.meta.env.VITE_API_URL;

const TaskList = () => {
  const [tasks, setTasks] = useState([]);
  const [newTitle, setNewTitle] = useState('');

  const fetchTasks = async () => {
    const res = await axios.get(`${API}/tasks`);
    setTasks(res.data);
  };

  const createTask = async () => {
    await axios.post(`${API}/tasks`, { title: newTitle, completed: false });
    setNewTitle('');
    fetchTasks();
  };

  const toggleComplete = async (id, completed) => {
    await axios.put(`${API}/tasks/${id}`, { completed: !completed });
    fetchTasks();
  };

  const deleteTask = async (id) => {
    await axios.delete(`${API}/tasks/${id}`);
    fetchTasks();
  };

  useEffect(() => {
    fetchTasks();
  }, []);

  return (
    

      

         setNewTitle(e.target.value)}
          placeholder="New Task"
        />
        
          Add
        
      

      {tasks.map((task) => (
        

           toggleComplete(task._id, task.completed)}
          >
            {task.title}
          
           deleteTask(task._id)}
          >
            Delete
          
        
      ))}
    
  );
};

export default TaskList;
      

✅ Features Covered

• Fetch tasks (GET)
• Create task (POST)
• Toggle complete (PUT)
• Delete task (DELETE)

🧪 Testing

• Use Postman to test API endpoints
• Use React DevTools to test state changes

📦 Deployment

• Use Render or Railway for backend deployment
• Use Vercel or Netlify for frontend
• Use MongoDB Atlas for remote DB