MindMaple is a modern and simple todo application built with React and Vite. It helps users organize tasks efficiently with features like deadline tracking, smart filtering, theme switching, notes, and task management.
- Create new tasks with a clean and intuitive interface
- Edit existing tasks anytime
- Delete tasks when they are no longer needed
- Add notes or comments to each task
- Update task details and status
- Set due dates using a calendar and time picker
- View remaining time for each task
- Sort tasks by remaining time
- Filter tasks into All, With Time, and Without Time categories
- Switch between light and dark mode
- Save tasks locally using browser storage so data remains available after refresh
- Reminder-style countdowns for upcoming deadlines
- React
- Vite
- Tailwind CSS
- React Calendar
- JavaScript
- LocalStorage
The project follows a component-based architecture with React Context API for state management.
- App state is managed through Context for todos and app-wide behavior
- Components are separated for UI and task logic
- Dark mode is handled through a dedicated context provider
- Todo data is persisted using local storage
- src/components: reusable UI components like TodoForm, TodoItem, Navbar, and Footer
- src/contexts: context providers for todos and dark mode
- src/App.jsx: main app layout and task logic
-
Install dependencies:
npm install
-
Start the development server:
npm run dev
-
Open the local URL shown in the terminal in your browser.
The app is deployed on Netlify:
MindMaple is a lightweight but powerful todo app designed for productivity, task organization, and deadline awareness. It combines a clean user experience with practical features like reminders, task sorting, filtering, and theme customization.