calorie tracker

visit web app

visit GitHub

calorie tracker dashboard

what is this

A Progressive Web App to keep track of calories that works offline.

how to use

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


HTML SASS JavaScript React Next.js localStorage

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.

calorie tracker food block

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.

calorie tracker edit food block modal

duplicate and merge previous day

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

calorie tracker duplicate previous 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.

food dictionary

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

connect food dictionary to food block

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


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.

calorie tracker dark theme

add to home screen

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

next project


a platform to post content about web development