Todo Application MD is a Simple Todo Application. React.js was used to build this project.This Todo Application uses react redux concepts. It showcases the Traditional method of using redux -- before Redux Toolkit came into Picture. TodoApp is a Task Tracker app that only does CRUD operations, unlike many other apps.
This project aimed to understand and use React.js and traditional Redux concepts together. Plain CSS is used for styling. Hence, it does not feature any advanced tasks Tracking features. Additionally, I tried to implement various techniques that we may use in a production application. This project is not complete (as no web app could ever be sufficiently called complete) as we could always enhance the existing feature, fix bugs and add new features. I plan to revisit this project when I want to try something new.
This project is hosted on Github Pages.
One can type his Tasks using the Add a task and Add it using ➕ button.
The task when added will get added in the list. Each Task has three Options:
- Edit the Task: User can Edit the Task Description using ✏️ option. Once the user has made the changes User can save it using ✅ button
- Mark as Done: User can Mark the Task as Done using ⭕ button. Once the Task is marked as complete the buttton changes to 🎯. Which shows the task is complete. Also as the task is complete the user is no more allowed to edit the task, So the Edit Button is disabled for all the Completed Tasks.
- Delete Task: User can Delete the task using the 🗑️ icon Button. This will remove the task from the List permanently.
The Project uses localStorage of the Window object to store the Todos. Since every browser will have its own local storage.
This means that one can directly start using the Application without any need to install and run on local machine.
- Clone the Repository
git clone https://github.com/D-Ankita/todoApp-redux-MD.git
- Install all the required Dependencies
npm install
incase you face errors while installing, Install using
npm install --force
- Run the file
npm start
This command Runs the app in the development mode.
Open http://localhost:3000 to view it in your browser.
