Effortless Calorie Tracker | Daniel.Me

Experimental Typescript mini app

To obtain some hands-on experience learning vanilla Typescript, I settled on creating a mini app, with one goal in mind that it would be an app I'd personally would want to use on a daily basis. Being the holidays, and a lot of good food and holiday cheer, a calorie counting app seemed the way to go.

Just one small dependency, bundled with Webpack

Because of the way Javascript handles dates, and future plans to extend the functionality of this mini app, I made a careful decision to include the Date-fns library to handle time comparison in the app. In previous apps I have used MomentJS, the gold standard of the world, but this time around I needed something comparable, but far more lightweight. Date-fns worked out of the box with Typescript, and has a wonderful API.

Because of the inclusion of a dependency, this app was bundled with Webpack, and was my first use case for building an app that doesn't already have Webpack built-in the framework (Gatsby for instance).

No thrills, just count calories

This app is intended to be a simple way to count calories. Just look at the packaging or menu of what you are consuming, and in the app type in the name of the food and number of calories and press add. No giant search catalog to look through, no bloated features that make the app a pain to use. Just count calories, and see if you stay under the 2,000 daily recommended by the FDA. Includes a delete function, and automatically resets daily.

Tech Stack:

    Typescript


    Webpack


    Date-fns


Contact Me
Menu