Swan emoji


An app used to keep track of body measurements, set goals, and see how far off you're from those goals.

Technologies Used





Tailwind CSS


Notable Features

  • Track various body measurements
  • Track weight
  • Sign up with Email, Google, or Github
  • Set goals and see how far off you are from them
  • View progress as a graph
  • View past entries as list in table as rows
  • Create recurring reminders (daily, biweekly, weekly, monthly, yearly)

Why was this built

I’ve always wanted an app that I can track my progress with, and view that progress in a nicely drawn graph.

Generating Charts

Using Chart.js (opens in a new tab) to generate charts was straight-forward.

We simply generate labels from each data entry, and supply that to the Line component of react-chartjs (opens in a new tab)

Displaying a Progress Bar

  • Calculate lineCount using Math.ceil(percentage / 100)
  • Generate an array with lineCount length
  • Use array to generate div elements
  • Make line darker for each line, filter: brightness(calculatedBrightess)

Creating Reminders

Explored a few options, and the first was creating a custom Next.js server (opens in a new tab) , but it turns out that wasn’t recommended.

So I turned into creating a separate microservice (reminders webserver) (opens in a new tab) which depends on node-cron (opens in a new tab) to make recurring jobs, cron-parser (opens in a new tab) to compute next due date, and hyper-express (opens in a new tab) as a backend framework.

1. User creates reminder 2. Server stores it in DB 3. Server was started before 4. Server checks for due reminders 5. Server sends reminder email only if due date is today 6. Server updates reminder due date

Diagram: showing the current architecture of the reminders microservice

Lessons Learned

Learning about Chart.js (opens in a new tab) to plot charts, NextAuth (opens in a new tab) for managing authentication, and Prisma (opens in a new tab) for DB operations.

In addition to that, learning about scheduling jobs and recurring tasks.


If you have any feedback about the site or want to connect, email me at contact@leda.dev, or if you prefer you can use the form below: