Final Project: Task Management SaaS

1Responsive React Frontend

React 18 + Tailwind CSS

Build a fully responsive task management UI with React. Users should be able to view, create, edit, delete, and filter tasks. Implement a "Summarize Tasks" button that calls your AI endpoint.

Requirements Checklist

Task list with Create / Edit / Delete / Complete toggle
Filter bar (All / Active / Completed)
React Router: /tasks, /login, /dashboard routes
JWT-protected routes using PrivateRoute pattern
Loading spinners and error toasts with Axios interceptors
AI Summarize button — calls backend AI endpoint
Fully responsive (mobile, tablet, desktop) with Tailwind CSS

Starter Code Reference

// Example: TaskList component with AI Summarize button
import { useState, useEffect } from 'react';
import axios from 'axios';

const API = import.meta.env.VITE_API_URL || 'http://localhost:5000/api';

export default function TaskList() {
  const [tasks, setTasks] = useState([]);
  const [summary, setSummary] = useState('');
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const token = localStorage.getItem('token');
    axios.get(`${API}/tasks`, {
      headers: { Authorization: `Bearer ${token}` }
    }).then(r => setTasks(r.data));
  }, []);

  const summarizeTasks = async () => {
    setLoading(true);
    const res = await axios.post(`${API}/ai/summarize`, { tasks });
    setSummary(res.data.summary);
    setLoading(false);
  };

  return (
    <div className="p-6">
      {tasks.map(t => <TaskCard key={t._id} task={t} />)}
      <button onClick={summarizeTasks} disabled={loading}>
        {loading ? 'Summarizing...' : '🤖 Summarize with AI'}
      </button>
      {summary && <div className="ai-summary">{summary}</div>}
    </div>
  );
}

Your Implementation Notes / Component Structure:

Pro Tip: Write your notes in the text areas above for each deliverable. Click "Mark Complete" once you have implemented that deliverable. All 3 must be complete to unlock your certificate!

Task Management SaaS with AI Summarization

Your Progress

1Responsive React Frontend

Requirements Checklist

Starter Code Reference

2Secured Express API with JWT

Requirements Checklist

Starter Code Reference

3MongoDB CRUD + AI Summarization

Requirements Checklist

Starter Code Reference

All Steps Complete!