Skip to content

README.md

Latest commit

 

History

History
132 lines (102 loc) · 2.58 KB

README.md

File metadata and controls

132 lines (102 loc) · 2.58 KB
Raw

📝 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 🚀