Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mustafacagri/react-todos

✨ A simple and comprehensive Todo application built using React.js, Redux Toolkit, React Router, and Material-UI (MUI) 🎉
https://github.com/mustafacagri/react-todos

mui react react-router redux redux-toolkit redux-toolkit-query

Last synced: 4 days ago
JSON representation

✨ A simple and comprehensive Todo application built using React.js, Redux Toolkit, React Router, and Material-UI (MUI) 🎉

Awesome Lists containing this project

README

        

## ❤️ React Todos App with Redux Toolkit and Material-UI

### ✨ React, MUI, Store Management (Redux & Redux Toolkit), React Router, API Ready

A simple and efficient Todo application built using React, Redux Toolkit, React Router, and Material-UI (MUI). Jumpstart your React.js project with this repository, complete with a powerful state management setup, responsive design, and API integration / JSON-server as a ready API.

Open Source ❤

## 🔥 Features

- **Effortless Todo Management:** Easily add, edit, and mark todos as completed or pending. Also, there are filter features here.
- **Responsive Design:** Enjoy a seamless experience across different devices and screen sizes, thanks to Material-UI's responsive components.
- **Advanced State Management:** Leverage the power of Redux Toolkit for maintaining a clean and scalable state management architecture.
- **Smooth Navigation:** Utilize React Router for smooth and intuitive navigation between different sections of the app.
- **API Integration:** JSON-server integration provides a ready-to-use API, allowing you to focus on building the frontend without worrying about the backend.
- **Quick Start:** Clone the repository, follow the setup instructions, and start building your own custom Todo application right away.

## 🧑‍💻 Tech Stack

- React
- Redux Toolkit
- React Router
- Material-UI (MUI)
- JSON-server (API)

#### How can run the server and UI together

- `yarn` to set up the dependencies.
- `yarn start:server` to run the server.
- `yarn start` to run the project.

Now you're all set to explore, modify, and enhance the Todo application according to your needs.

### How can I support you?

⭐ Star my GitHub repo

🛠 Contributions are welcome! Whether you're fixing a bug, implementing new features, or improving the documentation, your contributions make this project better for everyone. Feel free to open issues and pull requests.

🚀 Start building your Todo App with Redux, React Router, and Material-UI today! Get productive right from the start with this boilerplate project.

### 📷 Screenshots

https://github.com/mustafacagri/mevn-boilerplate/assets/7488394/dbca4d24-8d35-434d-8d2d-2191e4a51883

![screencapture-localhost-3000-about-2023-07-14-21_40_20](https://github.com/mustafacagri/mevn-boilerplate/assets/7488394/5c47558e-37f5-4e80-9263-5985ff434fe2)
![screencapture-localhost-3000-2023-07-14-21_40_11](https://github.com/mustafacagri/mevn-boilerplate/assets/7488394/427d1af1-f1a9-4877-8c6c-7bd6e1c5a215)
![screencapture-localhost-3000-2023-07-14-21_39_45](https://github.com/mustafacagri/mevn-boilerplate/assets/7488394/4892322d-5180-4956-be37-f0aec4b9a051)
![screencapture-localhost-3000-2023-07-14-21_39_35](https://github.com/mustafacagri/mevn-boilerplate/assets/7488394/b5ae1343-12a9-4519-89de-e5ab1f85c55b)