A modern and efficient Todo application built with React + Vite + TailwindCSS that helps users manage tasks with an intuitive interface, dark mode support, and persistent storage.
- ✅ Add new tasks - Create tasks with ease
- ✏️ Edit existing tasks - Modify tasks as needed
- ❌ Delete tasks - Remove completed or unwanted tasks
- ☑️ Mark tasks as completed - Toggle task completion status
- 👆 Quick toggle - Click anywhere on a task to toggle completion
- 👀 Show / hide completed tasks - Filter your view
- 🌙 Dark mode support - Black & Yellow theme for comfortable viewing
- 💾 Persistent storage - Data saved in localStorage across sessions
- 📱 Responsive UI - Works seamlessly on all devices
- ⚡ Lightning fast - Built with Vite for optimal performance
| Technology | Purpose |
|---|---|
| React | UI library |
| Vite | Build tool & development server |
| TailwindCSS | Utility-first CSS framework |
| React Icons | Icon library |
| UUID | Unique ID generation |
| LocalStorage API | Client-side data persistence |
src/
├── components/
│ ├── Navbar.jsx
│ ├── TodoInput.jsx
│ ├── TodoList.jsx
│ └── TodoItem.jsx
├── App.jsx
├── main.jsx
├── index.css
└── theme.css
- Node.js (v14 or higher)
- npm or yarn
- Clone the repository
git clone https://github.com/YOUR_USERNAME/react-todo-app.git
cd react-todo-app- Install dependencies
npm install- Start the development server
npm run dev- Open in your browser
http://localhost:5173
- Type your task in the input field and click "Add" or press Enter
- Click on any task to mark it as completed
- Completed tasks will be visually distinguished
- Click the edit icon to modify a task
- Click the delete icon to remove a task
- Toggle dark mode using the button in the navbar
- Your preference is saved and persists across sessions
The app supports a beautiful dark mode with a black and yellow theme. Your theme preference is automatically saved to localStorage, ensuring it persists even after closing the browser.
All your tasks are stored in the browser's localStorage. No data is lost when you refresh the page or close the browser. Your todos are always there when you return!
- 🔍 Search functionality for tasks
- 📅 Due dates and reminders
- 🏷️ Priority labels and tags
- 📊 Task statistics and progress tracking
- 🔗 Backend integration (Node.js / Firebase)
- 🌐 Cloud sync across devices
- 📱 Mobile app version
Durga Prasad
- 🔗 GitHub: @sleepingCoder7
⭐ If you find this project helpful, please consider giving it a star! ⭐