https://github.com/zul132/React-Todos-List-App
A dynamic and user-friendly Todo List application developed using React, Redux and Material UI.
https://github.com/zul132/React-Todos-List-App
Last synced: 8 months ago
JSON representation
A dynamic and user-friendly Todo List application developed using React, Redux and Material UI.
- Host: GitHub
- URL: https://github.com/zul132/React-Todos-List-App
- Owner: zul132
- Created: 2025-01-16T08:42:29.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-24T17:19:02.000Z (over 1 year ago)
- Last Synced: 2025-01-24T18:24:14.969Z (over 1 year ago)
- Language: JavaScript
- Size: 603 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# TickTickBoom Todos
_TickTickBoom Todos_ is a sleek and intuitive **task management web app** built with **React** and **Redux**. It helps users efficiently **add**, **track**, and **organize** their **daily tasks** with features such as **priority marking** and **completion** status.
I built this Todo List app from scratch under the guidance of [Manoj Satishkumar](https://github.com/ManojSatishkumar) through his Udemy course [React, Redux & Material UI Workshop for Beginners](https://www.udemy.com/share/104QlA3@vy3Ih7F-UW3jTOmX47aqf68XnXqUv_CaPryesrijwM5Du5yLeq_xC1H2Gn3v4UIAmw==/). This hands-on experience strengthened my understanding of **state management**, **UI components**, and **unit testing best practices** and ultimately enabled to me to become a better Web Developer.
## 🚀 Features
- Add and delete todos easily
- Mark todos as completed
- Prioritize important tasks with a star indicator
- Persistent state management using Redux and local storage
- Responsive UI built with Material-UI components
- Automated unit tests for Redux reducers
## 🛠️ Tech Stack
- **Frontend:** React, Material-UI
- **State Management:** Redux, Redux Saga
- **Testing:** JEST
- **Build Tool:** Babel, Webpack
- **IDE:** Visual Studio Code
## ▶️ Demo Video
https://github.com/user-attachments/assets/f9abae0c-01ca-472a-8582-6b75594d53a3
## 📦 Setup & Installation
### Prerequisites
Ensure you have the following installed:
- [Node.js](https://nodejs.org/) (v16+ recommended)
- [npm](https://www.npmjs.com/) (comes with Node.js)
### Installation Steps
1. Clone the repository:
```sh
git clone https://github.com/zul132/TickTickBoom-todos-app-using-react.git
cd TickTickBoom-todos-app-using-react
```
2. Install dependencies:
```sh
npm install
```
3. Start the development server:
```sh
npm start
```
The app will be available at [http://localhost:3000](http://localhost:3000).
## 🏗️ Building for Production
To create an optimized production build, run:
```sh
npm run build
```
This generates a `build/` folder containing the production-ready app.
## 🧪 Running Tests
To execute unit tests:
```sh
npm run test
```
## 📜 License
This project is licensed under the ISC License.
## 👩💻 Author
Developed by **Fathima Zulaikha**
---
Enhance your productivity with **TickTickBoom Todos**! 🚀