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.
When launching Heartbeat, users are first met with a login screen. Behind the scenes, the authentication process validates credentials against my SQL database using bcrypt for secure password hashing. This ensures that login data is never stored or transferred in plain text, maintaining user privacy and data integrity.
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 the number of recorded workouts against headache occurrences for a clear monthly overview.
The navigation menu is kept clean and minimal for usability. It provides access to all core modules: data input forms, the statistics section, and a dedicated overview of my personal perfume collection.
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 reduces friction during training sessions and keeps interactions streamlined.
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 patterns over time without digging through raw logs.
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 both a macro and micro perspective of trends.
As a passion project within the app, I added a perfume module. It serves as a personal catalog of my fragrance collection, including brand descriptions, personal notes, and ratings. It’s a fun yet structured way to log and explore something I truly enjoy.
This section allows me to input new perfumes along with an image upload. A custom PHP script automatically resizes the uploaded image – both in pixel dimensions and file quality – to ensure consistent performance and storage efficiency across the database.
While out shopping, I can quickly pull up my perfume list to avoid duplicates – or even use it with staff to find a new scent based on my existing collection. Each entry dynamically loads its name, description, and image from the database, providing a fast and mobile-friendly experience.