Effortless Weight Tracker | Daniel.Me

A tracking app that keeps things simple, visually, but there's a lot going on behind the scenes

For visualizing the data on a graph, the classic, but powerful D3 Javascript library was used. D3 takes out a lot of the complication with math to map data onto a graph or diagram, and gives you the power to customize the design and animation to build just the way you had dreamed up.

The UI is dressed up using Tailwinds CSS, used primarily to get a feel for this popular CSS utility library.

A Typescript app bundled with the emerging build manager, Snowpack

Like many of my recent projects, Typescript was chosen to it's versatility in developing code, and type safety. Instead of a traditional webpack bundler used like on my previous project, Effortless Calorie Tracker, I went with Snowpack. Snowpack provides instant startup, lightning-fast builds powered by Javascript's native module system (ESM), and HMR + Fast Refresh out-of-the-box. If time is money, all modern projects need to take advantage of modern build tools like Snowpack.

Signup and login, and data storage is provided by Firebase

For keeping track of basic data such as a weight number, date, and userId, a fancy relational SQL database isn't really needed. I chose Firebase, a cloud-based NoSQL database from Google. Google has excellent secure authentication, and the database provides real-time updates for user data. Combined with D3, you'll see the graph visualization triggered with any update such as adding or deleting.

Effortless Weight Tracker

Effortless Weight Tracker is a Typescript app, designed to make it easy to effortlessly track your weight. This app uses Firebase for authentication and storing data. On the frontend, D3 is used to visualize the user's data on an interactive graph. Snowpack was used for hot refresh and speedy deployment, and it's strong support for Typescript.

Tech Stack:





    Tailwind CSS