Building an App for Coffee Roasting

Hot off the end of the Full-Stack Engineer Professional Certification course from Codecademy, I'm launching into a new project to build out my portfolio. I don't want to make something that just sits on a shelf. I want to make something that I'll actually use!

The Idea

My family calls me a "coffee-snob."

That might be true, but, I like to say that "I enjoy the finer things." The obsession started when I got a French Press for my birthday about 6 years ago. After buying a bunch of gadgets, I realized one truth:

"Quality coffee is expensive."

Well, I was a trombonist turned ministry-worker, so I didn't have a lot of money to spare. But, I found that if you bought unroasted coffee and roasted it yourself, you could save a lot of money. So, $60 later and two weeks shipping later, I had a stovetop popcorn maker and my first bag of green coffee.

I've been roasting now for about 2 years, and I like to keep track of my roasts to keep them consistent, (and to know when I've screwed up). I track the starting weight of the coffee, the ending weight, the weight loss percentage, when the first crack happened, how long the total roast time was, the temperature drop over the first minute.. etc.

I've been tracking all of this in a notebook, but juggling a notebook, the stopwatch on my phone and a pen while I'm trying to keep the popper spinning is a balancing act to be sure.

"What if there was an app that just let me hit one button to log each step that I take!"

And the idea for Roast was born!

Building In Public

Instead of holing up and sharing this project on my LinkedIn profile when it's done, I want to share the process with the development community. I'd love feedback, suggestions, criticism, support, or a pat on the back in the comments if you have a second!

My goal is to write a post for each day that I work on the project, and hopefully, if you're reading along, you can learn from my mistakes in your next project!

Day 1: Design and Development Environment

Since this is a full-stack web application, I decided to start with a general idea of the structure, and then dive straight into design.

As far as technologies go, the frontend of the app is going to be built in React, with a couple libraries for icons and the font and such. I'll be using an Express API in Node to communicate between the frontend and the PostgresSQL database. I'll likely host the database and API on an AWS EC3 instance.

What you see above are three of the primary pages that will be accessible from the footer buttons! The left two are the "Roasting" screen in different states followed by the library and account pages. The app will store a history of the different roasts that you create in the library and it will move any favorites in your account page!

I love a clean looking UI, and I'm very excited about this one. The roasting tile with the timer on it is going to take some work, but it'll be worth it.

Once I got the unique page designs laid out in Figma, I finally got to open VS Code! I set up my initial project structure. I don't think this app has so much functionality that I'll need a full MVC model, so I went with two folders: frontend, and backend.

roast/
|-- backend/
    |-- app.js 
        * this is where my express server will live
|-- frontend/
    * React boilerplate
    |-- node_modules/
    |-- src/
        ...
        |-- App.js

I bootstrapped my React app within the frontend folder, and got started on putting my global styles into the :root so that I can access them quickly!

There's a lot of work to do, but having a design finished gives me a very solid idea of what the goal is. A very productive first day, but tomorrow I get to put my editor in Zen mode and type away!

I'm excited to get building and to share what I'm working in with you all!