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.
Day 2 of Development
Learning about TailwindCSS
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.
First pass of the Login screen
On Day 1, Miguel and I decided that I would build the log-in and account set-up screens while he focused on the feed screen and updating the wireframe. I am a firm believer in developing in stages. This means building out the structure (HTML) first, then styling (CSS), and then later functionality (JavaScript). This following image is my first pass at building the login screen.
Second pass of the log-in screen
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.
The picture below is a screenshot of the wireframe I am trying to build:
What's Next
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.
Top comments (0)