? React To-Do List App
A fast, scalable, and responsive To-Do management application built with React.js and Material UI (MUI). This project demonstrates clean architecture using the Context API and useReducer for predictable and maintainable state management.
? Live Demo:
? https://precious-salamand...
? Features
✅ Full CRUD Operations: Easily create, read, update, and delete tasks.
? Smart Filtering: Switch between All, Active, and Completed tasks.
? Persistent Storage: Tasks are saved using LocalStorage API.
? Modern UI/UX: Clean and responsive design using Material UI with dark mode support.
⚙️ Advanced State Management: Built using the Reducer Pattern for better scalability.
?️ Tech Stack
Technology Description
React.js Core library using Hooks (useState, useEffect, useReducer, useContext)
Material UI UI components, icons, and theming
Context API Global state management
UUID Unique ID generation for tasks
LocalStorage Data persistence in browser
? Project Structure
src/
├── components/ # Reusable UI components (Task, AddTask, Dialogs...)
├── Contexts/ # Global state (TasksContext)
├── Reducers/ # State logic (TodosReducer)
├── App.js # Main app component
└── index.js # Entry point
⚙️ Getting Started
Follow these steps to run the project locally:
1. Clone the repository
git clone https://github.com/your-u...
2. Navigate into the project
cd react-todo-reducer
3. Install dependencies
npm install
4. Start the development server
npm start
The application will run on: ? http://localhost:3000/tod...
? Key Learnings
Reducer Pattern: Centralized state updates for predictable behavior.
Avoiding Prop Drilling: Using Context API for clean state sharing.
Performance Optimization: Lazy initialization with LocalStorage.
Clean Code Practices: Separation of concerns between UI and logic.
? Future Improvements
Add drag & drop functionality
Add due dates and reminders
Integrate backend (Node.js / Firebase)
Add authentication system
?? Authors
Ahmed Eid
Adel ahmed
islam hamdy
⭐ Support
If you like this project, consider giving it a ⭐ on GitHub!