UI Additions, Components, and an Installable Application

Lot’s of progress today, but I’m going to try to keep this post short! So, wish me luck.

UI Additions

The four primary pages have the UI mostly complete! The Home component was giving me some trouble with how its displaying on different screen sizes, so I’m going to have to revisit that tomorrow. I’m particularly happy with the simplicity and flexibility of the “button” component that I created.

import React from 'react'
import './Button.css'

function Button({ color, text }) {

    return (
        <div className="Button"
            style={{backgroundColor: color}} >
            <p>{text}</p>
        </div>
    )
}

export default Button

Having the button built this way lets me render it in with it’s styling and text without ever having to leave the component I’m working in:

<Button color="var(--blue)" text="Start a new roast" />

This button doesn’t do anything yet, so I’ll still have some more work to do on it. But, I’ll also likely add a callback prop so that I can maintain the ease of use with it.

Aside from these, I’ve also implemented:

• Card component that renders from mock data, and manages state of the favorite button
• CardList componenet where you pass an array of data that is mapped to cards
• A utility function that returns the roast level based on the percentage given

It's Installable Now!

This is what I’m most excited about, and it hardly took any time at all. The application is now installable on my device! I’d share it with you, but it’s only hosted on my local network for now.

Here’s how I did it.

In a file named manifest.json I added the following code:

{
  "short_name": "Roast",
  "name": "Roast",
  "description": "An application to help you roast coffee at home.",
  "start_url": "/",
  "theme_color": "#202020",
  "background_color": "#202020",
  "display": "standalone"
}

Then I visisted my localhost in my Safari browser, hit share and “Add To Home Screen”. Done!

I haven’t added an icon or anything yet, but it’s thrilling to have a working prototype served to my phone as soon as I save changes!

This is a feature of a PWA (Progressive Web Application), and I learned about this from this article by Kasie Udoka on Dev.to. She goes into much more detail about what you can do with PWAs and how to implement them, so check out the article!

What's Next?

Tomorrow morning, I want to explore why the Home screen is displaying at the height it is currently and see if I can find a solution that works across different devices. I spent my last couple of minutes implementing a nested scroll to make the prototype feel more like an application and less like a website. It seems like a problem that could take longer than I want to solve… but such is life!

If you’re following along, let me know and leave a comment! Cheers!