A modern, responsive Task Tracker web application built with React + Vite and Tailwind CSS v4, featuring dark/light mode, smooth animations, and a clean professional UI.
This project was developed as part of the ASTU CSEC Bootcamp, focusing on real-world frontend practices and UI quality.
👉 Deployment URL:
https://astu-csec-bootcamp-task-tracker.vercel.app
- ✅ Add, complete, and delete tasks
- 🌗 Dark / Light mode with persistent theme
- 💾 Tasks stored in LocalStorage
- 📊 Statistics page (total, completed, remaining)
- 🎨 Modern UI with animations
- 📱 Fully responsive design
- ⚡ Fast development using Vite
- React 18
- Vite
- Tailwind CSS v4
- React Router DOM
- Context API
- LocalStorage
src/
│── components/
│ ├── Header.jsx
│ ├── TaskInput.jsx
│ ├── TaskItem.jsx
│ └── TaskList.jsx
│
│── pages/
│ ├── Home.jsx
│ └── Stats.jsx
│
│── store/
│ └── taskContext.jsx
│
│── App.jsx
│── main.jsx
│── index.cssgit clone https://github.com/YOUR_USERNAME/task-tracker-frontend.git
cd task-tracker-frontendnpm installnpm run devDark mode is implemented using React Context + Tailwind’s dark class.
- Theme preference is saved in LocalStorage
- The
darkclass is toggled on<html>
document.documentElement.classList.toggle("dark", darkMode);The Stats page dynamically shows:
- Total number of tasks
- Completed tasks
- Remaining tasks
All values update instantly based on task state.
- React Context API for global state
- Persistent data using LocalStorage
- Tailwind CSS v4 utility-first styling
- Clean component architecture
- Professional UI/UX patterns
- Routing with React Router
This project is open-source and available under the MIT License.
Reiko Wakbeka Frontend Developer ASTU CSEC Bootcamp
---