Health Tracker 2,000,000 – Building a Simple Web Tool for Family

My sister-in-law wanted a simple tool to track water, fruit and vegetables, and protein intake kind of like what she and others are used to with WW (WeightWatchers) and so my wife asked if I had the skills to build something like that.

This is what they wanted me to replicate.

It seemed like a cool and quick little project, so I started thinking about how I could do it quickly and easily. I considered creating an actual Android app, but realized that the learning curve would make it too large of a project for me, and one of the main users is an iOS user, and I am not paying a hundred dollars to publish a pet project.

I then thought about using Godot to make it but that came with the same set of problems as I don’t currently know how to use the Godot UI options well enough. I wanted something I could whip up in a few hours and not a few weeks.

PHP to the Rescue

I have done some web development using PHP over the last seventeen years. I am by no means a good coder, but I can pretty much hack together any simplistic thing without too much fuss.

At first, I was thinking I’d install WordPress and customize a Gravity Forms form to do what they need, but decided against that when I realized you would actually have to click a “save and continue” button and that it wouldn’t just remember your selections on the form.

So, I guess my best choice was to build it from scratch…

I don’t think I’d ever want anyone to look at my code as I know there are better, faster, and cleaner ways to build what I put together, but over the course of an evening on one day and a morning on another, I put together Health Tracker 2,000,000!

This is what I built.

v1 Features and Functionality

So I decided on a very simplistic way of managing things without user accounts: cookies. I create a cookie when a user selects a checkbox and then when anyone comes to the site, I check for the cookie and if they have it, I use the cookie value to retrieve what values were last checked off.

The cookie is just a hashed reference ID. I take that cookie and use it to check the database to see what is checked off. The cookie is set to expire on the same day as it is created but at midnight Eastern time.

The database just stores a unique, auto-increment ID number, the hashed reference ID, the date the record was created and which fields have been checked off.

Overall, it is pretty simplistic and seems to work on computers, Android phones, iPhones and more.

v2 Thoughts

Ideally, the tool would include some basic login system so that you could start the checklist on your phone and finish it on your tablet or computer. With the references already being stored in the database, creating a basic user management system wouldn’t be too difficult as I would just have to associate the unique IDs from one table with a unique user ID in another table.

It would also be nice to have some kind of archive to see how you did on previous days. If I add in the user management feature, this shouldn’t be too difficult either.

My wife would like it to have charting to present the data nicely and everyone seems to want it to have some kind of gamification features/functions. I don’t know what kind of charts I’d create, but I could maybe use something like canvasJS to build out the charts.

As for gamification features, I’ll probably release a small update to v1 that includes a congratulations for completing all the checkboxes in a day.

Conclusion

Adding complexity to something like this takes time, more than I think most people realize for someone with my development skills, but here and there, this might be a cool challenge to pick up and move forward a bit more.

I also have to keep in mind that it will likely only ever have around four users. This isn’t something I’m trying to make a service out of. There are plenty of tools in the marketplace that do similar things. I also have many other projects that need more attention going forward, so as much as these diversions can be fun, teach me new things, and help out family, I have to balance it with the work that pays the bills.

Including all HTML, CSS, JavaScript (except jQuery) and PHP, the tool comes to around 300 lines of code. It took me around six hours to build from start to finish including researching how to do certain things, dealing with roadblocks and sorting out the icons that I used.

It was a fun project, and I am hopeful that it serves the needs of those using it as a great way to remind them to eat better, drink more water, exercise every day and try not to go too crazy on junk food.

1 comment

Add Yours

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.