Skip to content

usama247550/todo-app-react

Repository files navigation

📝 Todo App – React & Redux Toolkit

A simple and clean Todo Application built with React, Redux Toolkit, and Vite.
This project demonstrates state management using Redux Toolkit with common todo features like add, edit, delete, complete, and clear all todos.


🚀 Features

  • ➕ Add new todos
  • ✏️ Edit existing todos
  • ✅ Mark todos as complete / incomplete
  • 🗑️ Delete a single todo
  • ❌ Remove all todos
  • 🔔 Toast notifications using react-toastify
  • ⚡ Fast development with Vite

🛠️ Tech Stack

  • React.js
  • Redux Toolkit
  • React Redux
  • Vite
  • CSS
  • React Toastify

📂 Project Structure

  src/
│── App.jsx
│── TodoApp.jsx
│── main.jsx
│
├── store/
│ ├── index.js
│ └── slices/
│ └── TodoSlice.jsx
│
└── index.css

⚙️ Redux Logic (TodoSlice)

Redux Toolkit is used to manage todos efficiently.

Available Actions:

  • addTodo
  • toggleComplete
  • editTodo
  • removeTodo
  • removeAllTodo

📦 Installation & Setup

Clone the repository:

git clone https://github.com/usama247550/todo-app-react.git

Navigate to the project folder:

cd todo-app-react

Install dependencies:

npm install

Run the development server:

npm run dev

📸 Screenshots

🙋‍♂️ Author

Usama MERN Stack Developer

Passionate about building scalable and user-friendly web applications.

⭐ Support

If you like this project, don’t forget to star ⭐ the repository!

About

A Todo application built with React and Redux Toolkit as a learning project to understand global state management and modern React workflows.

Topics

Resources

Stars

Watchers

Forks

Releases

Packages

Used by

Contributors

Languages