https://github.com/parvin-noori/todo-list
React task manager using useReducer and LocalStorage with add, edit, delete, and duplicate validation
https://github.com/parvin-noori/todo-list
localstorage-api react-icons react-toastify tailwind4 usereducer-hook
Last synced: 8 months ago
JSON representation
React task manager using useReducer and LocalStorage with add, edit, delete, and duplicate validation
- Host: GitHub
- URL: https://github.com/parvin-noori/todo-list
- Owner: parvin-noori
- Created: 2025-10-18T09:51:26.000Z (8 months ago)
- Default Branch: main
- Last Pushed: 2025-10-18T18:12:26.000Z (8 months ago)
- Last Synced: 2025-10-19T09:59:15.682Z (8 months ago)
- Topics: localstorage-api, react-icons, react-toastify, tailwind4, usereducer-hook
- Language: JavaScript
- Homepage: https://todo-list-iota-lovat-65.vercel.app
- Size: 40 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 🧩 Task Manager – React + Context + useReducer + Tailwind
> A small React project built for practicing **useReducer** and **Context API**.
> Add, edit, delete, and search tasks — all saved in **LocalStorage** with duplicate validation.
> Also includes a **light/dark theme toggle** for styling practice.
---
## 🖼️ Preview
> The image above shows a preview of the app's user interface.
---
## 🌐 Live Demo
Check out the live version on Vercel:
[https://todo-list-iota-lovat-65.vercel.app/](https://todo-list-iota-lovat-65.vercel.app/)
---
## 🚀 Features
- ✨ Add new tasks
- ✏️ Edit existing tasks
- ❌ Remove tasks
- 🔍 Search through tasks
- 💾 Persistent data with LocalStorage
- ⚠️ Duplicate task validation with toast notifications
- 🎨 Light/Dark theme toggle
- ⚡ State management via Context + useReducer
- 🧩 Styled with Tailwind CSS
- 🗂 Task Filtering Tabs:
- **All Tasks** (show all tasks)
- **Completed** (show only completed tasks)
- **Pending** (show only tasks not yet done)
---
## 🧠 Purpose
This project was created to practice:
- Using **useReducer** for centralized state management
- Managing global state with **Context API**
- Persisting tasks in **LocalStorage**
- Implementing a **theme toggle** with Tailwind's dark mode
- Structuring React components cleanly and responsively
---
## 🛠️ Technologies
| Tool | Purpose |
|------|----------|
| ⚛️ React | UI development |
| 🎨 Tailwind CSS | Styling and responsive design |
| 💾 LocalStorage | Data persistence |
| 🧩 useReducer + Context | State management |
| ☕ React Toastify | Toast notifications |