A fully functional, elegant, and responsive Todo application built with React, TypeScript, and Vite. This project replicates the core functionalities of the classic TodoMVC specification, featuring state management via React Context API and data persistence with LocalStorage.
Check out the live application here: https://whomngmnt.github.io/ToDo--App/
- State Management with React Context: Scalable and clean architecture using React Context to share data across components seamlessly.
- Persistent Storage: Automatic synchronization with
localStorageensures your tasks are saved even after refreshing the page. - Dynamic UI Elements: The application adapts to user behavior (e.g., the input field is focus-optimized, and footer controls appear conditionally based on task count).
- Comprehensive Filtering: Easily filter tasks by their current status: All, Active, and Completed.
- Toggle & Clear Actions:
- Individual task completion toggling.
- A "Toggle All" master checkbox that automatically triggers when all items are completed.
- A "Clear Completed" button to purge finished tasks instantly.
- Advanced Inline Editing:
- Double-click any todo title to enter edit mode.
- Press
Enterto save changes (automatically trims whitespace). - Saves automatically on blur (
onBlur). - Press
Escapeto discard changes and return to normal mode. - Deletes the todo automatically if the edited title is left empty.
- Frontend Library: React 18+
- Language: TypeScript (Strict mode enabled)
- Build Tool: Vite (Ultra-fast development server and production bundler)
- Styling: TodoMVC CSS Base / Bulma / Custom Sass (depending on implementation)
- Deployment: GitHub Pages (
gh-pages)
Follow these steps to run the project locally on your machine.
-
Install dependencies Bash npm install
-
Run the development server Bash npm run dev Open http://localhost:5173 in your browser to see the application in action.
-
Build for production Bash npm run build
git clone [https://github.com/whomngmnt/todo-app-final.git](https://github.com/whomngmnt/todo-app-final.git)
cd todo-app-final