Creating moodfulness, a Mood-Tracking Web App

I’ve recently been working on a web app called moodfulness, which lets users enter whether they are happy or sad and then plots those moods on a map. In developing this app, I focused on usability, such as ensuring consistency and conducting A/B testing, and data visualization.

Project management

I used an agile development approach to moodfulness. After designing the foundation of the app, I created and prioritized a list of desired features. I kept track moodfulness homeof feature suggestions, bug tracking, and improvements in a self-hosted instance of Jira Core.

When I experienced issues creating features during a sprint, I moved the features to the backlog and focused on other features in the sprint. This worked well because I would revisit the features in the backlog with a fresh set of eyes and often quickly resolve the issues I had experienced.

Technologies used for creating the app

To create the app, I used the following technologies:

  • CSS. Coding language used for design consistency.
  • HTML. Primary coding language used for developing the app.
  • JavaScript. Coding language used for providing interactive components.
  • MySQL/MariaDB. Database used for storing user data.
  • Leaflet. Lightweight JavaScript library based on OpenStreetMaps designed for mobile devices.
  • Nginx. Server used for delivering and storing app data.
  • PHP. Coding language used for passing user input from JavaScript to MySQL.

Data storage and visualization

moodfulness stores the following data to a database in MySQL/MariaDB:

  • verified_users table
    • username. Account username.
    • email. Account email address.
    • password. Account password.
    • date. Registration date.
  • moods table
    • mood. Happy or sad emoji.
    • date. YYYY-MM-DD format.
    • lat. Latitude coordinates.
    • lon. Longitude coordinates.
    • browser. Browser type and version.

moodfulness mapI’ve secured user data from unauthorized access by disabling root access and remote access on the database. In addition, I’ve installed a TLS/ SSL certificate and a firewall on the server to prevent intrusion attempts.

moodfulness gets the mood data from the moods table and plots the user’s moods in the form of emojis on the Leaflet-based map. If the user did not allow the app to access its location, the app places the emoji in the Pacific Ocean near Africa. This happens because the geocoordinates are 0,0.

Other instances of user-accessible data include deleting mood data and managing account information.

Consistent user experience

In designing moodfulness, I used the responsive web design approach. This provides users with a consistent user experience across mobile and desktop platforms.

moodfulness mobile and desktop ui

The A/B test that had the biggest influence on development was button location. I had my own opinions on button placement and design, but the insight I gained from friends and family was invaluable. In particular, I needed to consider where to place buttons to ensure easy access for those using a smartphone with one hand.

The A/B tests spanned a variety of devices, including mobile and touchscreen and non-touchscreen displays. To ensure a consistent user experience across all platforms, I used the Selenium IDE plugin to automate bug testing and conduct QA.

Looking forward

Creating moodfulness has helped refresh my front-end and back-end engineering skills and improved my project management skills.

In future web apps, I’d like to take advantage of React, a JavaScript library for developing consistent user interfaces. This will reduce QA testing, provide users with a modern user experience, and save time on usability-related research.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.