← All work

Heartbeat

Heartbeat was born from a personal challenge: I often struggle with headaches and needed a way to understand if there was a pattern related to my everyday habits or training sessions. I searched for an app that was simple, flexible with custom inputs, stable – and most importantly, one that respected my data privacy. When I couldn’t find a solution that met all those needs, I decided to build one myself.
The result is a scalable web app developed in PHP, JavaScript, and CSS, with a custom backend running on my own SQL server. Each day, I log headache details including intensity, type, medication, and mental well-being. I also log my workouts: which exercises I did, the weights used, and the number of repetitions. Everything is visualized using Chart.js graphs, giving me a clear and immediate overview of trends.
The app starts with a login screen that authenticates through bcrypt-encrypted passwords. Once logged in, I’m taken to a homepage with two main buttons: “Daily” and “Workout” – making it easy to start tracking. The menu is intentionally simple, providing access to logs, statistics, and my little bonus: a personal perfume collection database.
In the statistics section, I can see the latest entry for each tracked category. Clicking on any of them opens a detailed graph and table, making it easy to spot trends. The workout overview guides me through each exercise step by step, removing the need to scroll or search.
As a fun addition, I built a perfume module where I keep track of the fragrances I own, complete with photos, personal ratings, and manufacturer descriptions. It’s handy when I’m shopping and want to avoid duplicates or find something new based on what I already have.
Heartbeat is a living project – constantly evolving with my needs – and most importantly, it gives me full control of my data and tools.
Once logged in, the user is taken directly to the dashboard, which features two primary actions: "Daily" and "Workout" – enabling fast and intuitive data entry. Below these, a dynamic bar chart (rendered with Chart.js) visualizes monthly data, comparing t
Once logged in, the user is taken directly to the dashboard, which features two primary actions: "Daily" and "Workout" – enabling fast and intuitive data entry. Below these, a dynamic bar chart (rendered with Chart.js) visualizes monthly data, comparing t
Entering the Workout section presents a list of my custom exercise routines. The interface is optimized for flow – once an exercise is completed and logged, the app automatically returns to the overview and scrolls to the next pending exercise. This reduc
Entering the Workout section presents a list of my custom exercise routines. The interface is optimized for flow – once an exercise is completed and logged, the app automatically returns to the overview and scrolls to the next pending exercise. This reduc
The Statistics section offers a structured overview of all tracked categories. Each item displays the most recent logged entry, making it easy to glance when the last workout was completed or when a headache was last recorded. This helps with identifying
The Statistics section offers a structured overview of all tracked categories. Each item displays the most recent logged entry, making it easy to glance when the last workout was completed or when a headache was last recorded. This helps with identifying
Diving into a specific dataset presents a detailed graph that visualizes the tracked values over time, again using Chart.js for clarity and responsiveness. Below the chart, a corresponding table provides exact dates and associated data points, offering bo
Diving into a specific dataset presents a detailed graph that visualizes the tracked values over time, again using Chart.js for clarity and responsiveness. Below the chart, a corresponding table provides exact dates and associated data points, offering bo