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 user can send a message with their location to one person or everyone in their community. The goal is to build a trusted community around the user with private conversations and a system to show their emotions. This will help the trusted people to be aware of the user's range of emotions.
The first learning opportunity in this experience was using TailwindCSS. TailwindCSS is a utility-first CSS framework. My project co-worker, Miguel Hernandez, set up the codebase to use TailwindCSS at the end of Day 1. When I started coding on Day 2, I discovered that TailwindCSS strips all elements of their default styling. To my surprise, my headers didn't look or act like headers. I learned you literally have to style everything from scratch using utility classes. In my mind it doubled my development time, but at the end of the day I was amazed at what I could accomplish without having to fight preset styling.
On the first pass I focused on the basic structure of the log-in page. The second pass I fleshed out each element while learning how to style with TailwindCSS.
Tomorrow I want to focus on the problems I couldn't overcome today:
- How to add and use font families that weren't available by default within Angular?
- How to add an icon inside an input field to look like the wireframe?
- How to add and use an icon? Before this project I had experimented with Angular and failed to utilize an icon.
- During development I had multiple input fields that look the same. But React has taught me that it's better to make something into a component if it will be reused multiple times. This led to the issue of how to convert the input fields into reusable components.
- How to add a text-shadow to the app's title, so it would match the title on the wireframe.