BrandMark
BrandMark

FULL STACK PROJECT
Final Capstone Project

Task Management SaaS with AI Summarization

Build a production-ready full stack SaaS application: React frontend + Node/Express API + MongoDB + OpenAI/Gemini AI summarization feature.

React + Tailwind Node + Express MongoDB AI Integration
3
Deliverables
8-12h
Est. Time

Your Progress

0%
React Frontend
0%
Secured API
0%
MongoDB + AI

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...' : '[AI] Summarize with AI'} </button> {summary && <div className="ai-summary">{summary}</div>} </div> ); }

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!