trackit

trackit logo

Inspiration

We wanted to make this after realizing that many people we know, including ourselves, have trouble maintaining their productivity and a healthy lifestyle. This has become an especially prevalent issue, as many of us are confined to the laziness we feel at home in a time of physical distancing.

What it does

Trackit is a web app that allows its users to track their progress in various activities. Ideally, users would be able to customize what they would like to keep track of, but the time limit of this hackathon pushed us to create only 3 default trackers: a “to-do” section based on an embedded Google Calendar, a water intake tracker, and a semi-functional mood tracker that currently provides a different motivational quote on each refresh of the page. The log-in and registration features are fully functional.

How we built it

We used Python Flask, HTML, CSS, and JavaScript to create and design the website, as well as SQL to handle user information. We started with a half-completed project based on a Python Flask tutorial, and slowly added the front-end elements as we figured them out.

Challenges we ran into

One of our biggest issues was inexperience. We are all highschool students who have little to no experience in building websites. We followed tutorials for nearly every component of our program, and spent most of our time troubleshooting. It was our first time using Flask and SQLite as well, which further contributed to the challenge. Unfortunately, we were unable to achieve what we had initially envisioned for this project, but we also achieved way more than we thought we could.

Accomplishments that we're proud of

We’re proud of how much we learned, given our extreme lack of knowledge in the beginning. It was our first time working together as a team, but we managed to create something that, in our opinion, is very cool. We went from not knowing how to put Flask and HTML and CSS and JS together to creating (some) beautifully developed pages.

What we learned

Overall, we learned a lot about web design and how the backend and frontend interact. A few highlights are how we learned to embed calendars within our website and to use CSS libraries to make our pages look nice. Because this was our first hackathon, we also learned a lot about working with a team when given a time limit. Finally, we improved our skills with GitHub and learned how to deal with merge issues.

What's next for trackit

Although we are content with the final product given our time constraints, there are many ways in which we would like to improve our website. Implementing more features such as a meal tracker or sleep tracker would be an interesting way to branch out. Additionally, there are some parts of our current features—for example, a button to clear the “water drank today” counter or our own calendar system instead embedding a Google Calendar—that we had planned. Similarly, we planned to create an “Add tracker” feature that would allow users to customize what they want to record. With the right resources, we would have liked to make our website fully functional and host it publicly. Finally, we’d like to add improvements to the UI such as making the website responsive to screen size and adding our logo.