compraaospequenos.pt

Helping local shops to survive and thrive during the COVID-19 outbreak

2020

#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.

compraaospequenos.pt
  • Gatsby
  • Netlify
  • Material UI
  • UI/UX
  • Jamstack
  • Web Design
  • Front End
  • Back End

Project development

  • Identity and Web design

    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.

  • Development

    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.

  • Static Site Generetor

    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.

  • Filter and Search

    Once we had Gatsby ready and the API integration with Google Sheets working we had to implement the filter for the directory of shops in the platform. After some research, we’ve decided to use itemsjs, a free search engine in javascript, created to perform a fast search on small JSON datasets.

  • Theme and Style

    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.

  • Content Delivery System

    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.