A fully functional and beautifully styled Task Manager web application built with React.js from scratch.
Click here to view the live app
- ✅ Add new tasks with a single click
- ❌ Delete individual tasks
- 🟢 Mark tasks as complete / Undo completion
- 🗑️ Clear all tasks at once
- 🔍 Filter tasks — All / Active / Completed
- ⭐ Star bullet indicators for each task
- ℹ️ View task creation timestamp
- 💾 Tasks saved to localStorage — survive page refresh
- 🫧 Animated soap bubble background
- 📱 Clean centered responsive layout
| Technology | Purpose |
|---|---|
| React.js | Frontend framework |
| useState | Managing app state |
| useEffect | localStorage sync |
| CSS3 | Styling and animations |
| localStorage | Persistent data storage |
| Vercel | Deployment |
| GitHub | Version control |
task-manager/ ├── public/ │ └── index.html ├── src/ │ ├── App.js ← Main component │ ├── App.css ← Styles and animations │ └── index.js ← Entry point ├── package.json └── README.md
- Node.js v18 or higher
- npm v9 or higher
# Clone the repository
git clone https://github.com/Sassy72/task-manager.git
# Navigate into the project
cd task-manager
# Install dependencies
npm install
# Start the development server
npm startOpen http://localhost:3000 in your browser.
- Type a task name in the input field
- Click Add Task to add it to the list
- Click Complete to mark it as done — strikethrough appears
- Click Undo to revert completion
- Click Delete to remove a specific task
- Use Filter buttons to view All / Active / Completed tasks
- Click Created On to see when the task was added
- Tasks are automatically saved — refresh the page and they're still there!
This app is deployed using Vercel.
To deploy your own version:
- Push code to GitHub
- Import repository on Vercel
- Click Deploy — done!
Souvik Mondal
- GitHub: @Sassy72