/awdev/blog/2024/06/10

Written by awdev 0/00/2024

Zen

Hello, 'tis me, Aaron.

Over the past weekend, I've been working on a very cool project for Illuminate, a hackathon hosted by [Code The Stars](https://codethestars.org/), a non-profit organization. Anyways, this blog is more about the project than the hackathon. Let's proceed.

The Beginning

There were three tracks (or ideas) we could have taken for this project:

The given tracks

I've already done an environment app and the education app space is already super saturated. So why not do healthcare?

Mental health has been super important for everybody lately, and not enough people have been able to get help. My teammate and I decided that we were going to build a mental health app in 42 hours (minus a very large amount due to timezone shift that I do no wish to calculate).

I chose to create this project as a PWA (progressive web app). Mozilla has a great article about PWAs and that article is actually what taught me about PWAs a few years ago. I just didn't take action to try to build one until now, since I didn't really have an applicable use for one. It's surprisingly easy to build and install one, and I can't recommend it enough! It's a good way to impress people who see your very own app on their phone's home screen.

Design

For the design portion of the project, my teammate and I used Figma and Figjam to create concepts of what the site could look like.

Landing page & dashboard

Home/landing page

On the left is the landing page, and on right with is the dashboard that I designed. Pretty basic, but keep in mind that this is designed to be shown as a mobile app. Users are able to see anything they need to, with the addition of a randomized daily quote.

Mindful breathing pages

Home/landing page

The page on the left allows users to select an audio to listen to that guides them through various mindful activities such as a body scan or deep breathing. Somehow, the actual front-end version of the website looks relatively similar to the Figma design. The dev vs. designer memes have been banished!!!

meme

Development

The development portion was pretty easy. I chose to use a single-page design.