How I created a directory for small businesses affected by COVID-19 with Next.js, Tailwind, Sheets and ZEIT and ran it for FREE
Tags: nextjs, react, zeit, tailwindcss
Published: 2020-04-14 01:36:16

##The Mex vs COVID-19 project
Right now all types of businesses are being affected by the COVID-19 Pandemic, but most of all the small and medium businesses around the world. I know this first-hand as a business owned by my dad has seen declining sales in the last couple of weeks. 

That's why I got extremely excited when I learnt about a project led by a friend of mine called MEX vs COVID-19, this is a platform that started on [Instagram](https://www.instagram.com/mexvscovid19/) just a couple of days ago. The idea is to help this type of businesses in México by getting exposure to potential clients through Instagram as well as live events on important topics such as finance, digital transformation, mental health, etc...

##The Mex vs COVID-19 web directory
To help on this project I decided to create a small web directory for the businesses as most of them are really small and don't even have a website or a lot of digital presence. My hope is that the directory will help them have a greater reach and ultimately more sales.

My goal for this project was to get something ready in the fastest way possible, with a great design -and UI/UX-, an easy way to add/edit/delete content (CMS), amazing performance in mobile (as their main channel is Instagram) and $0 or close to $0 for operational cost. 

So for this post I want to share with you how I got to the current live version of the [https://mexvscovid19.com/](https://mexvscovid19.com/) directory in just a couple of days, as well as show you guys the code which [I've open sourced](https://github.com/cosio55/mexvscovid-web) in case someone else want to contribute, fork, or simply do something similar in your country or city 😄.

![Mex vs COVID-19 front page](https://dev-to-uploads.s3.amazonaws.com/i/h1z0hbq2y04b7zm5834x.png)

##Front-end / Back-end
Lately I've been working a lot with [Next.js](https://nextjs.org/), so naturally that was my choice, this was also the first time that I actually had to connect a Next.js project to some external data source, and as everything I've seen with Next.js it was flawless and the documentation was great. Next.js is a complete React Framework built for production ready sites with a ton of features built-in such as a router and SSR. If you want to start with it take 10 minutes today and go through their [getting started tutorial] (https://nextjs.org/learn/basics/getting-started). Also thanks to the SSR generated from the framework I achieved really good numbers in the Google Chrome audits.

![Google Chrom Audit Results](https://dev-to-uploads.s3.amazonaws.com/i/63srieje74x9m3ofkykl.png)


##Style / CSS Framework
To move fast in the design, I used [Tailwind CSS](https://tailwindcss.com/) a 'utility first' CSS framework that allowed me to get a really amazing UI/UX with just a couple of CSS classes on my elements. It's a mobile-first framework so the mobile UX is great out o the box and you can easily add your own theming with a couple of lines. I also added [Purge CSS](https://github.com/FullHuman/purgecss) to remove all the unused CSS and improve the performance for the site.

##Database / CMS
As my goals was to move fast, be cheap and have a simple UI/UX I decided to use Google Sheets as my database, I'm also using Google Forms as an easy way to add new businesses and gather images. To connect my Next.js App with Google Sheets I decided to use [Tabletop.js](https://github.com/jsoma/tabletop), honestly it's not the best DX out there but it got the job done in record time. If you're curious of the Sheet/Database I'm using to read the information you can check it out [here](https://docs.google.com/spreadsheets/d/1eXwDV5PGImTNXOPcfkXKlPADJezEuSotNk8EkrkO2c4/). 
As a side effect of using Sheets I didn't had to create a complete user system or deploy a separate headless CMS as I used Google Accounts for this.

![The database saved on Google Sheets](https://dev-to-uploads.s3.amazonaws.com/i/ihms3gvzmow0gsc4xye1.png)

##Deploying
Probably the easiest step in all of this was the deploy to a live server.I used [ZEIT](https://zeit.co/home), which actually is the creator and maintainer of the Next.js Framework, so it took me honestly less than 5 minutes to create a deploy using their CLI, later I seted-up my project to deploy automatically with every push to Github directly to their build process and to a live site. To learn how to create your deploy just follow this [steps](https://nextjs.org/docs/deployment).
And the best of all... I deployed it for *FREE* as it has a very generous free tier which includes custom domains (The domain was my only expense in the whole project), SSL, integration with Github and more. 

This is everything you need to deploy the project using the CLI now:
```bash
now
```

##Open source
From the start of this project I planned for it to be used with similar projects in other countries or cities, so my idea is for everyone interested to poke at the [code](https://github.com/cosio55/mexvscovid-web), improve on it with pull-requests, fork it and make it better, or just learn more about how I thought around solving the issues for this project.

Thanks for reading through and hope this can help you out!