#Compraaospequenos (#buyfromsmallbusinesses) is a movement created by Menos Hub at the beginning of the COVID-19 lockdown period in 2020. Its main pillar is an online directory of small businesses, allowing businesses to list themselves and users to seek their products and services.
Menos Hub is a nonprofit working directly with small businesses in Portugal. At the beginning of the lockdown, Menos focused on helping the small businesses in the country to gain visibility and to reinvent themselves to survive and thrive during and after the lockdown situation imposed by the government.
The movement started as a Google Spreadsheet with a list of small businesses and independent workers that had special offers during the lockdown and evolved to a list of over 500 businesses.
Marzee Labs was responsible for developing the web platform, making the directory more visually appealing and facilitating its use, so the movement could reach more businesses and people.
The first step was to create a visual identity to the movement and replicate this to the web design we were envisioning for the platform. The main idea was to have a very clean look and feel and to provide an intuitive experience both for the businesses aiming to register at the platform and for potential customers looking for their services and products.
The platform had to go live as soon as possible, so businesses could survive the lockdown period. The chosen approach was to work with what was already in place (Google Sheets) and make the best use of Open Source technologies to have a website live fast and within our reduced resources.
We needed a Static Site Generator to build the website pages and we’ve chosen to use Gatsby. First of all, Gatsby is very easy and quick to set up, and most importantly it allows you to easily fetch data from any source to build the website’s content. In addition to that, our in-house team has a liking for React and we thought it made sense to choose a React-based Static Site Generator stack.
For the implementation of the style, and having in mind that we had a limited time frame to launch the website, we decided to integrate Material-UI to make it easier to style all the website's components from the buttons to the filters. We usually prefer to style the websites we build using our own CSS components, so we have bigger control over the code we produce and the visual impact we want to implement.
We got the support from Netlify that was offering an extension of their free services for people working in solutions for the current COVID-19 crisis. We must say, though, that Netlify was always our choice of CDN even before they confirmed their support. A big part of the websites we build is using Netlify services.