A Progressive Web App to track calories

how to use

Select a date from the calendar and start adding food to keep track of calories.

technologies

core features

food blocks

The food blocks are stored in localStorage which allows the web app to perform CRUD operations offline.

The food blocks were designed for ease of use and to look fun by giving it a cartoonish feel.

To ease the flow of creating a food block there is a button on the home page thats add a food block.

Clicking on a food block opens a modal to edit the food block.

duplicate and merge previous day

One of the previous 10 days can be duplicated and merged with the current day.

food dictionary

I noticed there was a pain point where I need to find out how many calories a certain food has and calculate how many calories the food I am eating has.

This lead to the creation of the food dictionary page which allows you to create a list of food blocks that automatically calculate calories.

An item in the food dictionary can be connected to a food block.

The connected food dictionary item is used to automatically calculate the calories for the amount.

snackbars

I noticed when I submitted forms it seemed that they didn’t do anything because there weren’t any visual cues. I decided to use Snackbars to make it clear that the forms were submitted.

reward system

Confetti falls from the top of the screen when the calorie goal is met.

☀️ themes 🌙

It auto detects and applies preferred theme.

add to home screen

You can add it to your home screen to easily revisit it again.