The app is called “Help Me” and is designed primarily as an “SOS” (distress signal) to a selected circle of trusted people when someone is going through a mental health crisis. The goal is to build a trusted community around the user with private conversations and a system to show the user's range of emotions.

Day 7 of Development

At the end of Day 6, I learned how to use TailwindCSS to add a background image to the log-in and user account creation pages. Day 7 focus is on building the first of 3 communications/content pages. This is where the user will spend 95% of their time and have the biggest impact on their mental health and safety.

This is the wireframe of that first page designed by my project partner, Miguel Hernandez.

Create an initial component map

For anyone reading this blog series to learn about project development, a great first step is a visual representation of the intended UI (a digital wire-frame, drawing on paper, etc.). It's always best to have an end goal in mind before coding. The next step is breaking it down into logical components. I broke the above wireframe into the header, SOS button area, top 5 profiles, content navigation, and content area.

1st Attempt at building the "Feed" communications page

My thought process was to have a single "screen/page" component that will host all minor components (parent/children relationship) for each communication page. This plan quickly created six individual components. I then created another parent like component call top-view that included all components that will be shared across the three communications pages (header, SOS button, top 5).

Code of the Angular parent component hosting the minor ones

<main>
   <app-content-top-view></app-content-top-view>
   <section class="h-screen">
      <app-content-navigation></app-content-navigation>
      <app-content-emotion-gallery></app-content-emotion-gallery>
   </section>
</main>

A quick tip I want to share is to use dummy data when first building out the UI. After the visual is 100% completed, you can integrate real data. I also build mobile first and later increment responsive redesigns for bigger screen sizes.

Overcoming using Angular ngClass funtionality

While styling the content section, I ran into a hour long block while trying to use Angular's ngClass to dynamically style the profile section. The idea was to have a different background color for each profile based on its index from the array of profile accounts. After lots of debugging (aka "slinging mud on the wall while hoping something sticks), I got something to work. If you can think of a better way to get the result please state leave a message.

Final solution to ngClass issue

<section>
  *ngFor="let profile of arrayOfProfiles; index as i"
  [ngClass]="{'bg-blue-300': i===0, 'bg-green-300': i%2=== 0, 'bg-yellow-300': i%2 !== 0 }"
....
<section>

First attempt at building out the UI based on the wire-frame

Additional restyling of the UI based on the wire-frame

What's Next

Now that I have a basic screen/page layout for a communications page and a standard top view component, tomorrow I can focus on the content portion of the final two pages (messages and connections). I plan to include an Angular service that will integrate data throughout the entire app.

Stay on the lookout for a Day 8 breakdown blog post!!!