DEV Community

Cover image for I made a simple weight tracker that displays progress in a graph - a web app without HTML/JS.
Erika Kacelnik
Erika Kacelnik

Posted on • Updated on

I made a simple weight tracker that displays progress in a graph - a web app without HTML/JS.

I’ve been learning Python for a few months, and really wanted to share one of my projects with friends and online. Learning HTML/CSS/JS or any framework for front-end seemed like a whole lot of work for such a simple wish.

I solved this by using Abstra's lib (full disclaimer: I've been working for them!). I was able to generate a UI and navigation from my script just by updating the commands, for example from “input” to “read”. The entire web app is just 1 Python file + 1 tsv file.

I used an authentication widget to share with friends, but opted for a simple username here so everyone could test it without hassle. Apart from the hackerforms library, I used Pandas and Plotly to build and display the graph.

It’s a really simple script, but I loved how it’s possible to build such a useful tool in just a few lines of code.

Click here to try out the tracker

Image description

Source code:

from hackerforms import *
import pandas as pd
from os.path import exists
import time
import datetime
import as px

user = read("What's your username? Choose one and use it everytime to see your progress!")

option = read_multiple_choice(f'Hey {user}. What would you like to do?', ['Insert new weight', 'See progress'], button_text=None)

if not exists("weights.tsv"):
    with open("weights.tsv", "a") as f:

if option == 'Insert new weight':
    now = time.localtime()
    year = now.tm_year
    month = now.tm_mon
    day = now.tm_mday

    date = read_date("Add date of measurement",,month,day))

    weight = read_number("Fill your weight")

    with open("weights.tsv", "a") as f:

df = pd.read_csv("weights.tsv", delimiter="\t") ='datetime64')
df = df.sort_values('date')
df = df[df.user == user]

fig = px.line(df, x='date', y='weight')
Enter fullscreen mode Exit fullscreen mode

Top comments (0)