detail hero

Coffeeroasters

Gatsby.js (React), Atomic Design, GraphQL, Framer Motion, Mobile First, Styled Components

Most introductions start casually over a cup of coffee don’t they? Coffeeroasters was built with Gatsby.js and GraphQL. It features colors that are meant to evoke a feeling of nature, tranquility, and peace. Aren’t you starting to feel refreshed already? Brew yourself a fresh artisan coffee and let’s dive into this project.

Gatsby.js (React), Atomic Design, GraphQL, Framer Motion, Mobile First, Styled Components

Project Background

Coffeeroasters aims to improve the morning ritual by providing people with access to a growing range of artisan coffees delivered right to your door. You can customize your options by selecting the roast style, grind type, and even choose the frequency of delivery. It was essential that I was able to pass selection data throughout different components. I was able to create a useBetween and useSummary hook to handle state changes as an alternative to Redux or React Context. Visit the site or check out my GitHub to learn more about the implementation.

Static Previews

static preview one
static preview two

Interested in doing a project together?