In the middle of my portfolio project I end up watching The Beginner’s Guide to React by Kent C. Dodds and it was great to refresh my memory with what I had learned previously, but also to fixate Hook’s related concepts and see a hands-on on how to use it properly.

Since I was in an advanced part of the portfolio, I feel like starting a new one to try using Hooks and, as I had recently developed a way to plan my work routine, I thought it would be a good idea to make a tool for that.

So I came up with a weekly planner to add tasks per day or in a week log, that could be fixed or a one-time thing, and that could be related with a category, so I could visually see where I was spending more or less time. I also wanted it to be flexible, being able to drag and drop tasks through days and the week log. Last but not least, I wanted a button to “clean” the week, so I could start a new one, only with the fixed tasks.

I started searching about the drag and drop feature since it would be a structural part of the app, and I found a few options and read some articles comparing them, so I choose react-beautiful-dnd. I struggled a little but looking at the documentation and examples I started building the base of my app.

I also reviewed some .useState() and .useEffect() examples to implement the creation and deletion of the tasks. At first, I was focusing on having only the basic functionalities, and when I accomplished that, I moved on to integrating the tasks management with the drag and drop functionality, also adding the fixed option and category choosing.

To persist the data I choose local storage, as I wanted to use it as soon as possible and would only access it in one place, but I intend to evolve the app to make it cross-devices. I have other ideas to improve the app, but for now, I accomplished my goal to practice Hooks and have the tool to plan and go through my week with flexibility.

You can access my week planner here: https://weekplanner.anadev.com.br/ and see the code here: https://github.com/aluiza22/routine_planner/. Hope you enjoy it!

Ana (: