Taskline — Smart Task Manager

The finished demo app for the React bootcamp. Full CRUD, real-time search, status filters, a live stats dashboard, dark mode, and localStorage persistence — matching everything in Day 1 + Day 2 Sessions 1–2.

Run it locally

npm install
npm run dev

Open the URL printed in the terminal (usually http://localhost:5173).

Project structure

src/
  main.jsx              entry point
  App.jsx                state, effects, and all handlers live here
  App.css                all component styling + the notebook-rail signature
  index.css              CSS variable tokens for light/dark theme
  components/
    Header.jsx            title + dark mode toggle
    AddTaskBar.jsx         the "add a task" input + button
    StatsBar.jsx           total / active / done / % complete
    Toolbar.jsx            search input + All/Active/Completed filter pills
    TaskList.jsx           maps tasks -> TaskCard
    TaskCard.jsx           a single task row (checkbox, title, delete)
    EmptyState.jsx         shown when there are no tasks to display

No extra libraries beyond React itself — every feature is built with useState, useEffect, and plain CSS, matching exactly what's taught in the sessions.

Deploying to Vercel (Day 2, Session 2)

git init
git add .
git commit -m "Smart Task Manager"
# create a new empty repo on GitHub, then:
git remote add origin <your-repo-url>
git push -u origin main

Then go to vercel.com → Import Project → select the repo → Deploy. Vercel auto-detects the Vite setup, no config needed. You'll get a live URL in under two minutes.

Notes for the demo

• Data is stored per-browser in localStorage. Clearing the demo before a session: open dev tools → Application/Storage → clear taskline-tasks and taskline-theme, or just open the page in a private window.
• The visual style is intentionally a "notebook" theme (the vertical rule
  • hole-punch strip on desktop, the highlighter-style strike on completed tasks) so it reads as something built with a point of view, not a default template — good talking point if a student asks "how do I make mine look different from the demo."