This is a simple to-do app built with React and Redux, to practice working with the Redux store and creating our own reducers and actions.

In the finished product, users can add, remove and toggle the completion of tasks. The user can filter the tasks by switching tabs, from "All", to "Done", to "Not Done". When the task list is empty, different empty states are shown depending on what tab the user is on.

I first researched designs and functionality commonly used in todo-apps, and then created a Figjam file with all my inspiration. The functionality I wanted to add was structured according to "need to have" and "nice to have", to help me approach it in a good way. At first, I tried to understand the flow of the user for certain features, and what actions needed to be done in the code to make it happen in the UI.

As usual, I started with the main functionality, setting up the store and making sure the data is moving properly between my components and the Redux store, via console.logs and the Redux DevTools. When I finished adding, removing and toggling tasks, I went on to styling and left the "nice to haves" for later.

I tried to push myself a bit regarding the styling, working with a lot of layers and positioning, while still trying to make the design responsive. Challenging but fun! I spent a lot of time working on the tabs, thinking of how to make them work for all devices. Also, a lot of time was spent researching how to style checkboxes.

This week was also filled with a lot of practicing JavaScript logic and arrays. Much needed.

If I had more time there are tons of things I would like to add! I would like to add even more functionality, trying out more of the stretch goals and get more comfortable with animations.

https://matildas-todos.netlify.app/