Exercise 2: Make Todo List Great Again!

Howdy, guys! In this task you are challenged to used some redux knowledge you have gained so far. I suggest you to go through the basic parts of redux way of doing things to refresh your knowledge and be comfortable with actions and what happens when you dispatch them, what are reducers and how to connect redux store to your project.

The project that we worked on is broken into pieces again, however I scattered some comments in the every code so pay attention 👀

NOTE1: In this task we local use dev-server and I believe you are already know how to rig it up. Styles and class names are provided so you don't need to design anything, but keep in mind if you wish to add something on your own, feel free to do so 🎉🎉🎉

NOTE2: You are starting with an App already being connected to redux store and even though thunk and dev tools are supported of the box, check out the way it is done. If you will have any questions, do not hesitate to ask.

NOTE3: Avoid switching to master branch, since it contains working example of the project.

What you need to do

• Make Todo filter work as it's displayed on the screeshots below:
  • Tasks should be filtered based on filter selected
  • Selected filter button should be highlighted
• Adding new tasks should work as expected
• Fix app messages so they are showing proper message and are disappearing after some time (you can add more styling, animation and different color for different statuses) - NOTE: How to do this task is absolutely up to you
• EXTRA TASK: Delete and or Edit tasks. This task is optional and I haven't implemented that part at all, so adding these functionalities into the project will make you sweat a bit, but I ensure you will have a better understanding of how things work in this pattern and will get a good experience.

HAPPY HACKING! 🙌

This is how the app was looking before I messed everything up again :very_sad_emoji: ...

Todo list now have a filter options with tree different options:

Display All Tasks

Completed Tasks

Active Tasks

Available setup

After cloning the repo you need to start npm project, meaning, download all dependencies(npm install) and then you can run following scripts:

npm start

Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.

npm run dev-server

Starts local dev-server run on the port 8686.