Skip to content

NoorayFatima/TODO-React

Repository files navigation

To-Do Manager ✅

A clean and interactive To-Do List Application built with React.js, designed as part of my “Learning by Doing” project series. It helps users manage daily tasks, stay organized, and visualize progress with a stats graph.


✨ Features

  • Add Tasks – Create new todos quickly
  • Mark as Completed – Toggle tasks done/not done
  • 📝 Edit Tasks – Update any existing todo
  • Delete Tasks – Remove tasks easily
  • 🧹 Clear Completed – One-click cleanup
  • 🔍 Filter Tasks – Show All / Active / Completed
  • 💾 Persistent Storage – Saves tasks with localStorage
  • 📊 Stats Bar with Graph – Visualize completed vs active tasks
  • 🎨 Modern UI – Responsive, clean design with TailwindCSS

🚀 Live Demo


🛠️ Tech Stack

  • React.js – Frontend framework
  • TailwindCSS – Styling & responsiveness
  • localStorage API – Data persistence
  • Chart.js + React Chart.js 2 – Graph/Stats visualization

⚡ Getting Started

1. Clone the Repository

2.Install Dependencies

  • npm install

3. Run the Development Server

  • npm run dev

4. Build for Production

npm run build

📸 Screenshot

img

💡 Future Enhancements

  • 🔔 Add task reminders/notifications
  • 📱 PWA support for offline usage
  • ☁️ Backend integration with database (MongoDB/Firebase)
  • 🌙 Dark/Light mode toggle

🙌 Acknowledgements

Inspired by the “Learning by Doing” approach

About

A clean and interactive To-Do List Application built with React.js, designed as part of my “Learning by Doing” project series. It helps users manage daily tasks, stay organized, and visualize progress with a stats graph.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors