A beautiful, feature-rich todo list application built with React and Vite. Stay organized and boost your productivity with this intuitive task management tool featuring a sophisticated black theme design.
- 🌐 Live Demo: View Application
- ✅ Add new tasks with ease
- ✏️ Edit tasks inline (double-click to edit)
- 🗑️ Delete individual tasks
- ☑️ Mark tasks as complete/incomplete
- 💾 Automatic local storage persistence
- 🏷️ Priority levels (High, Medium, Low) with color coding
- 🔍 Filter tasks by status (All, Active, Completed)
- 📊 Real-time progress tracking with visual progress bar
- 🧹 Bulk actions (Complete All, Clear Completed)
- 📈 Task statistics dashboard
- 🎨 Beautiful gradient UI with smooth animations
- 📱 Fully responsive design
- ⌨️ Keyboard shortcuts (Enter to add, Escape to cancel editing)
- 🎯 Intuitive interface
- 🌈 Color-coded priority indicators
- 📊 Progress visualization
- 💾 Data persistence across browser sessions
- Node.js (version 14 or higher)
- npm or yarn package manager
- Install dependencies:
npm install- Start the development server:
npm run dev- Open your browser and navigate to
http://localhost:5173
To create a production build:
npm run buildTo preview the production build:
npm run preview- React 19 - Modern UI library with hooks
- Vite - Fast build tool and development server
- CSS3 - Modern styling with gradients and animations
- UUID - Unique identifier generation
- LocalStorage API - Data persistence
src/
├── components/
│ ├── Todo.jsx # Main todo component
│ └── Todo.css # Todo component styles
├── App.jsx # Root application component
├── App.css # Application styles
├── index.css # Global styles
└── main.jsx # Application entry point
Tasks can be assigned three priority levels:
- 🔴 High Priority - Urgent tasks that need immediate attention
- 🟡 Medium Priority - Important tasks with moderate urgency
- 🟢 Low Priority - Tasks that can be completed when time permits
- All - View all tasks regardless of status
- Active - View only incomplete tasks
- Completed - View only completed tasks
- Visual progress bar showing completion percentage
- Real-time statistics showing total, active, and completed tasks
- Motivational messages to encourage productivity
Your todos are automatically saved to your browser's local storage, so you won't lose your tasks when you close and reopen the app.
Enter- Add new task or save editEscape- Cancel editingDouble-click- Edit task text
- Quick Add: Type your task and press Enter to quickly add it
- Inline Editing: Double-click any task to edit it in place
- Priority Management: Use the priority dropdown to organize tasks by importance
- Bulk Operations: Use "Complete All" or "Clear Completed" for efficient task management
- Filter Focus: Use filters to focus on specific task types
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is open source and available under the MIT License.
- React - The web framework used
- Vite - Build tool and development server
- CSS Gradient - For gradient inspirations
If you like this project, please consider:
- ⭐ Starring the repository
- 🐛 Reporting bugs
- 💡 Suggesting new features
- 🤝 Contributing to the code
Made with ❤️ by Ashutosh Maurya
Connect with me and check out my other projects!