About the Journal

Concept & Originality

This project is designed for mental health recoverees. During my own therapy sessions, professionals frequently recommended journaling as a healing tool. However, for recoverees who are in an emotional valley, picking up a pen and deciding what to write can be overwhelming.

I tried several mood journal apps on the market, but I found that most of them were overcomplicated. For instance, many apps offer more than ten distinct emotion selections. While it could record the moment precisely, this abundance of choice creates “decision fatigue,” deterring users who are already experiencing low energy due to mental health disorders from logging their feelings.

To solve this, I used a minimalist approach when designing the journal, inspired by a traffic light system. In this mood journal, users only need to choose one out of three colour-coded pulses. They could also add a trigger label and a brief thought if they feel up to it. In addition, the webapp also provides a daily and monthly view, allowing users to track their emotional cycles and reflect on their well-being over time.

The Build & Technical

The project consists of three main pages, including Home (for emotional logging), My Journey (for date tracking and visualisation), and About (for project introduction).

In terms of UI & Styling, I used UIkit as the foundation of the layout and simple animations, such as scrolling, notifications, and containers. I also used custom CSS to override the default styles and achieve a minimalist aesthetic.

To better protect users’ privacy and considering the sensitive nature of mood tracking, I used localStorage instead of a cloud database such as SQL or GoogSheet. This could ensure all journal entries remain strictly on the user's personal device.

To make the webapp responsive, I used JavaScript as the engine, including DOM manipulation, data aggregation, and event handling. For instance, I used it to render the daily and monthly logs, using array methods (such as filter, map, and find), to extract specific dates and calculate the average mood score of a day if a user logged multiple entries, and to capture user inputs from the interactive canvas circles.

Challenges & Solutions

During the development process, I confronted several challenges, including data visualisation and data processing.

Initially, I wanted to use the Apache ECharts library to visualise the user’s monthly mood trends. I explored the heatmap layout, but then I realised that the template was too rigid and didn’t blend well with the design. Therefore, I used a template from FullCalendar to replace the Echart. Instead of using the traditional calendar events, I used its background event display feature. By feeding my JavaScript average mood calculations into FulCalendar, I transformed the calendar blocks into a dynamic colour-coded heatmap to match my custom colour palette (Red, Yellow, Green).

In addition, as all entries are saved in the array, the biggest challenge was to process the data and display it, especially the logic when the user logged multiple moods on the same day. To resolve this, I wrote a custom JavaScript function to loop through all entries, group them by their date string, and calculate an average score for each day. This taught me how to handle JS Objects Keys and mapping functions to format the output that fits the needs of FullCalendar.

Future Improvements

To further develop the project, I would like to explore data export and backup options, trigger and mood correlation analytics, and the yearly view tracker.

Currently, all data is stored in the browser’s localStorage in order to better protect user privacy. However, it means the journal entries will be lost if a user clears their browser cache. Therefore, I think it should add a data export feature, allowing users to download their logs as a JSON or CSV file. This move could ensure that users could secure their data and enable them to share their mood history with their therapists if necessary.

In addition, while the calendar provides a visual overview of daily moods, I think it is worth adding simple data analytics. For instance, by cross-referencing the mood score with the selected triggers (e.g. work, connections), the app could generate a monthly summary chart, enabling users to identify hidden patterns and triggers.

Furthermore, on top of the monthly calendar, the app could add a macro-level “Yearly View,” to provide a long-term insight for the users, especially to understand their emotional trends, such as seasonal patterns.