Helping local shops survive and thrive during the COVID-19 crisis
By: Ana Rossetto
Tags: Covid 19, Shopping, Jamstack, Google Sheets, Gatsbyjs

Helping local shops survive and thrive during the COVID-19 crisis

Using Gatsby, Google Sheets, Material-UI and Netlify to build a directory of small businesses with special offers during the quarantine

www.compraaospequenos.pt

Marzee Labs has partnered with Menos Hub and has just launched a web platform with a directory of small businesses in Portugal trying to survive the current COVID-19 crisis — compraaospequenos.pt. We’ve used Gatsby, Google Sheets, Material-UI and Netlify to build it and we are making the code available on GitHub so anyone around the world can use it to create their local network of shops.

No one was expecting this. COVID-19 took us all by surprise. More than posing a threat to the health and life of a hundred thousand people, this health crisis is having a major impact on the global economy.

Social isolation measures imposed by governments all over the world are directly impacting local businesses. Governments are trying to help as much as they can both companies and individuals with specific measures.

In this scenario, small businesses and independent workers are the ones that are suffering the most, struggling to survive during these tough times. This is a reality in many countries but with different scales. In the case of Portugal, “small businesses correspond to 90% of the companies in Portugal” says João Duarte, the founder of Menos Hub.

With this in mind, the initiative Menos Hub — that works directly with small businesses in Portugal — has created the movement #compraaospequenos (#buyfromsmallbusinesses). The movement started as a Google Spreadsheet with a list of small businesses and independent workers that have special offers during the quarantine trying to survive the current crisis.

Menos is doing more than that and has been helping those local small businesses to reinvent their offer and thus make it through the quarantine period.

Looking to support the movement, Marzee Labs reached out to Menos team and offered to build a web platform by making the directory more visually appealing and, most importantly, facilitating its use, so the movement reaches more businesses and people.

It was 2 weeks ago that we had the first meeting with them and we are happy to be launching the first Minimum Viable Product (MVP) version today. 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 as fast as possible and within our reduced resources.

From the start, we knew that the best way of building a fast and secure website was by using the JAMstack approach. Since Menos Hub was already using Google Sheets, we’ve decided to continue using it as the website’s database.

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.

Once we had Gatsby ready and the API integration with Google Sheets working we had to implement the filtering 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.

For the front-end implementation, 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.

Last but not least, we got support from our friends at Netlify that are 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.

We are very happy with the result — compraaospequenos.pt — and we are ready to start the second phase and further expand this platform. If you are looking to implement something similar or if you are interested in contributing to our current platform, you can find the repository available here.

We are looking forward to seeing this spreading the world.

Stay safe and buy from small businesses.