ProgressPlanted

Main screen showing a tree with information on a task
Editing a task

Inspiration

We’ve all been there before. You sit at your desk and want to get work done, but you don’t know where to even start. Homework gets left undone, tasks are left to do later, goals get unfulfilled. Even though we want to be productive, it’s super easy to constantly procrastinate.

When we brainstormed for a Hackathon idea, we all related to this feeling. So we thought: “What if there was a way to visualize our goals and feel more satisfied with our progress?” One fun idea we had came from skill trees in video games. That’s where ProgressPlanted comes in.

What it does

ProgressPlanted is a web application that allows you to visually organize tasks into trees. Each task is represented by a bubble and divided through branches into smaller sub-goals. You can add, edit, and connect tasks together to build your own personalized tree. As you travel through the tree, your progress is dynamically displayed while completing various challenges.

We designed ProgressPlanted while making sure it’s easy to use and accessible to users of all different goals. With user experience in mind, our platform is focused on providing you with a fun and rewarding way to improve your productivity.

How we built it

Front end: Built primarily with HTML, CSS, and JavaScript. We used React to make the dynamic interactions with the trees and the overall website.

Back end: Using node.js and the Express.js Framework for RESTful API requests and Firebase Realtime Database to store user information and the trees.

Challenges we ran into

We ran into a variety of technical issues with our code. JavaScript types were mismatched when we weren’t looking carefully and bugs from single spelling errors caused a ton of headaches. When putting it all together, we were searching for why there was a CORS permission error in the back end only to find that the front-end requests sent empty JSONs. We also had to pull ourselves away from side quests when there were still basic components to make. Fortunately, we were persistent enough to mend these issues.

Accomplishments that we're proud of

We’re happy to see our coordination throughout the hackathon. We got to split up the work and collaborate with all parts of the website’s development.

What we learned

We got to try out a lot of new tools during this hackathon. We practiced handling interactions between React, Firebase, Railway, and Express.js on the fly during the hackathon. One member barely had experience with JavaScript, HTML, and CSS but was able to code in the project by the end.