A social media for Coffee lovers

Roasted is an Online app for Coffee Lovers.

It's pretty interesting for a school project. The app is build in React using PostgreSQL, Datagrip, Docker, Node and Express. For now, it has a SignUp/Login, a feature that let users post online comments and a feature that let you manage your friend list.

The Brand

I built the brand fairly quickly. In an hour or so, I had already designed the logo and selected a name.

Here are some of the initial sketches:

This quick logo was the perfect kick starter for a MVP product.

I also did a quick sketch for the landing page's Illustration:

The Style Guide

To be able to collaborate quickly with the team, I designed the style guide before the first lines of codes were written. That means that if I'm not available to design a feature, they have the necessary toolset to make it look on brand.

Docker and Apple's M1 Chips

We chose to use Docker to simplify our lives as web developers. Of course, it wasn't that easy. The container for PostgreSQL, React, Node and Express was working well with a simple command line. Until I tried it on my 2020 13in Macbook pro, featuring Apples M1 chip.

It took us a few hours, before one of my colleague Zacharie-William Gagné found a solution. Before running NPM i in the Docker files, we needed to add this line (Only for M1 mac) - Even if the app dosen't require python.

RUN apk add --update python make g++\&& rm -rf /var/cache/apk/*

Branding in UI

Bean Buddies

Instead of adding "friends", we chose to call the Bean Buddies. That means that the icon had to reflect that too.

Success animation

It's still pretty rough and was meant to validate the concept, but this features an espresso handle as a validation animation. I'll update the codepen when it's done.

Profile Pic: Coffee Head NTF

Since it's a school projet and adding a profile pic is not in the required features, we decided to let the user pick a profile picture among ou image bank. So I started to think: what if I designed a couples of Heads, bodies, and props and generate random characters out of it? Here's a quick sketch of what it could look like:

That's it for now! Come back soon to see the progress of this project!