Leda

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.

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.