📝 React Todo App - Task Manager Project

A modern React + Vite Todo Application with full CRUD functionality, bulk actions, and localStorage persistence.
Built for practice, learning React state management, and portfolio showcase.

---

🚀 Features

• ➕ Add new tasks
• 🗑️ Delete individual task
• 🧹 Delete all tasks
• ✏️ Convert task to UPPERCASE (single & all)
• ✅ Mark task as done / undone toggle
• 💾 Persistent storage using localStorage
• ⌨️ Add task using Enter key
• ⚡ Real-time UI updates without refresh

---

🛠️ Tech Stack

• React.js (Hooks: useState, useEffect)
• Vite (Fast development build tool)
• JavaScript (ES6+)
• CSS3 (Custom styling)
• UUID (Unique ID generation)
• LocalStorage API

---

📂 Project Structure

ReactJS-Project-Advanced-TO-DO-App/
│
├── src/
│ ├── components/
│ │ └── Todo.jsx         # Single Todo component
│ │
│ ├── App.jsx            # Main application logic
│ ├── App.css            # Styling
│ ├── main.jsx           # React entry point
│
├── index.html           # Root HTML file
├── package.json         # Dependencies & scripts
├── package-lock.json
├── vite.config.js
├── eslint.config.js
├── .gitignore
└── README.md

---

⚙️ How to Run This Project

1. Clone the repository

git clone https://github.com/godhaniyaarbham2000-spec/ReactJS-Project-Advanced-TO-DO-App.git

2. Move to project folder

cd ReactJS-Project-Advanced-TO-DO-App

3. Install dependencies

npm install

4. Start development server

npm run dev

---

💡 Usage

• Type task in input box
• Click Add Task or press Enter
• Use buttons:
  • Delete → remove task
  • UpperCase → convert text
  • Mark Done → toggle task status
• Use bulk actions for all tasks

---

🧠 Key Learning Concepts

• React State Management
• Props Passing between components
• useEffect (Side Effects)
• localStorage Integration
• Array Methods (map, filter)
• Conditional Rendering

---

📸 Preview

• Modern Todo UI
• Dark themed layout
• Real-time task updates
• Persistent storage support

---

⚠️ Notes

• Frontend-only project
• No backend or database
• Data stored in browser localStorage
• Refresh safe application

---

📌 Future Improvements

• Edit task feature
• Search & filter tasks
• Priority system
• Dark/Light mode toggle
• Due date system
• Notifications

---

👨‍💻 Author

Arbham Godhaniya
MERN Stack Developer 🚀

---