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 6 of Development

At the end of Day 5 I had finished the pull request recommendations from my project's partner, Miguel Hernandez. Day 6 focus is on using TailwindCSS to style background images and resubmitting the pull request. Later in the day, we had a virtual meeting to discuss what's next for the front-end development, how to deploy to DigitalOcean, and implementation of a back end server.

Add the background image to the TailwindCSS config file

What made this a challenge was I normally have a hard time with background images using regular CSS. With TailWindCSS, if you want to use a non-gradient background, you first must import the image into the tailwind.config.json file. Here is a excerpt from their documentation.

// tailwind.config.js
  module.exports = {
    theme: {
      extend: {
        backgroundImage: theme => ({
         'hero-pattern': "url('/img/hero-pattern.svg')",
         'footer-texture': "url('/img/footer-texture.png')",
        })
      }
    }
  }

Restyling all screens with a background image

The real challenge was finding what combination of CSS background's properties such as size, repeat, and position worked for each responsive screen size. The combination for the mobile view didn't work for the desktop view or the tablet view.

What I learned about TailwindCSS

I want to pass on this learning experience I had. If you are using TailwindCSS responsive design utilities, be aware that you have to code for the normal (mobile) and the additional break points. An example is:

Show the background image on mobile but not on tablet or larger screen sizes

<section class="bg-hero-pattern bg-cover sm:bg-none">...</section>

Show the background image on mobile and larger screen sizes but contained and not repeating.

<section class="bg-hero-pattern bg-cover lg:bg-contain lg:bg-no-repeat">...</section>

Recap of the virtual meeting

• For the Hackathon, we plan to focus on a slim down version of the app as the MVP. The idea is to show proof of concept and implement only the most important features.
• My pull request got approved and merged. YEAH!!!!!!!!!!!!!!!
• The initial attempt to deploy the app to the DigitalOcean app platform failed. Miguel will be looking into this and getting that matter fixed.
• Wonderful discussion on handling of user's sensitive information.
• Discussed what open source resources that can be used to help with certain functionalities of the app for the MVP and future versions.
• My new marching order is to build out the app communications pages based on the wire-frame.

I want to share a tip for anyone working in a team project. Schedule regular meetings, so everyone is on the same page and potential problems can be identified/shared. Even better is to have an expected agenda, so meeting isn't about everything imaginable.

What's Next

My first order of business is to break the communications pages wireframes into components that can be used across the multiple content pages. This will be followed by organizing dummy data into a standard data format to be shared throughout the app. If the planning is helpful, I can quickly build the content pages in one day. Wish me luck!!!!!

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