Tood - See the Big Picture: Get Organized with Tood!

What I built

A tool where you can create to do list using a pie chart so that you can see how much stuff you have in your plate that you want to do and can plan new task accordingly.

Category Submission:

Choose Your Own Adventure

App Link

https://tood.netlify.app/to-do

Screenshots

Description

I think Pie charts are a great way to organize your to-do list. It can be used to visualize the amount of time or resources allocated to each task, allowing for better planning and improved time management. Additionally, a pie chart can provide a visual representation of how much progress has been made on the tasks, which can be helpful in motivating you to keep going.
Do your task keep piling up???
Do you plan to do many things for the time you'r gonna work?
I am trying to build Tood for helping you plan your day efficiently.

Link to Source Code

Frontend - https://github.com/raibove/tood
Backend - https://github.com/raibove/tood-service

Permissive License

MIT License

Background

The basic idea came after thinking on the amount of pending task from most of the to-do list...

I wanted to try using on d3 in my project and I thought this Hackathon is a great opportunity to do so.
I could have build other interactive things using d3.js too but I decided to build a to-do app because one common issue I face while planing my task is that I keep on making a long list and planning lot of stuff which might not be possible for that day. So I tried building MVP for this app, there is lot of improvement I want to make in future for this app.

How I built it

I mainly used MongoDB atlas to store the data.
I built the application using React, Nodejs, MongoDB and D3.js
Before starting with the development I tried creating the pie-chart and faced many difficulties, I have added the base code here and understanding and creating dynamic piechart using d3 took most of the time I spent working for this Hackathon. I had also posted this on twitter.

Difficulties I faced

This was a time consuming process but I learned a lot and enjoyed working on this too...

• In creating handle and adding constraints in it for it to move front-back in the pie chart
• Adding auto focus to modal every time user creates a new task
• Converting the html sample prototype I made to React code.
• The state updates in react weren't working well initially with d3 since it was an svg image and it wasn't re-rendering after dragging the handle, so I had to update the code again.

Features I want to add in future

• I want to add shades to the pie chart using https://www.npmjs.com/package/values.js package.
• I want to add light and dark mode.
• I want to add options to add icon to pie chart.

You can connect with me on Twitter. LinkedIn

Thank you.