How Much Oxalate
A few months ago I wrote a post about side projects. How Much Oxalate is one of those side projects that can move to the completed column.
Back in September I wrote about side projects. Since then, I've made regular progress on one of those side projects, and now reached a point where I can launch it to the world. Let me introduce you to How Much Oxalate?.
How Much Oxalate? was born out of the desire to build something that I would use myself. I designed and developed this site from scratch, spending numerous nights and weekends over the past five months agonizing over pixel decisions and development methodologies.
I wanted to share a bit more context about what exactly How Much Oxalate? is. As I've written about previously, I suffer from calcium oxalate kidney stones. One of the things I need to do to help reduce my risk of forming new stones is keep an eye on the foods and drinks I ingest that contain a substance called oxalate (oxalate is what you get when oxalic acid and minerals combine). When calcium (a mineral) and oxalic acid combine in the kidney, they form crystals (stones).
How Much Oxalate? is a site that contains research Harvard University has made freely available. That research resulted in testing over 500 different kinds of foods and drinks to evaluate their oxalate content (measured in milligrams). In effect, the higher the oxalate content, the greater the chance of developing stones.
Defining the strategy
I defined an overarching strategy to help guide my work on this side project. Even though this was a side project, it was important for me to define a scope of work and ensure I established a clear path to completion. For this site, my strategy was pretty straightforward: develop something useful for calcium oxalate kidney stone sufferers.
From a tactical standpoint, I needed to figure out how users would consume the data in a way that was useful for them.After several iterations, I narrowed down the design to three specific paths to consume the data:
- All foods – a table listing of the data that is filterable; essentially a raw data dump
- Foods by group – a page listing with cards of all foods in specific food groups, automatically sorted by highest to lowest oxalate
- Foods by rating – a page listing with cards of all foods and drinks that match specific ratings
Narrowing it down to three distinct paths helped ensure I had a solid foundation in place. Also, it allowed for users to quickly find the oxalate content of common foods and drinks to make informed decisions about the foods they consume.
As I mentioned earlier, I wanted to build something useful, but also useful to me. Now if I'm shopping for groceries or evaluating a new recipe, I can check the oxalate content of those ingredients to ensure I'm avoiding foods that are too high in oxalate.
It feels really good to get this launched! I'm working on a new portfolio entry for this project to showcase the UX/UI/development work I did, and I'll update this post with that link once it's up.
Until then, check out How Much Oxalate? for yourself.
P.S. — If you're interested in taking a peek at the source code, go ahead and view the GitHub repository (don't mind my messy TODOs though 😉).