تفاصيل العمل

? 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!

بطاقة العمل

اسم المستقل
عدد الإعجابات
0
عدد المشاهدات
5
تاريخ الإضافة
تاريخ الإنجاز
المهارات