Building a mental health crisis app, Day 7: Building the first communications/content page
Tags: dohackathon, codenewbie, mentalhealth
Published: 2021-01-01 14:16:56

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](https://tailwindcss.com) 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._
![Wire-frame of Feed communications page](https://dev-to-uploads.s3.amazonaws.com/i/fvuioipz6qhabgr7lzn4.PNG)
<hr>

#### 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.
![initial component map](https://dev-to-uploads.s3.amazonaws.com/i/z3s6q7z3e8k9cpkegdvv.PNG)
<hr>

#### 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>
```
<hr>

_First attempt at building out the UI based on the wire-frame_
![First pass at the feed communication page](https://dev-to-uploads.s3.amazonaws.com/i/jaw23etg6ov7hd4u1c39.PNG)

_Additional restyling of the UI based on the wire-frame_
![Added more styling to the feed communications page](https://dev-to-uploads.s3.amazonaws.com/i/is6z1u77nf2icbg92hdd.PNG)
<hr>

# 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!!!