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 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/ directory in just a couple of days, as well as show you guys the code which I've open sourced in case someone else want to contribute, fork, or simply do something similar in your country or city 😄.
Front-end / Back-end
Lately I've been working a lot with Next.js, 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. Also thanks to the SSR generated from the framework I achieved really good numbers in the Google Chrome audits.
Style / CSS Framework
To move fast in the design, I used Tailwind CSS 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 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, 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.
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.
Deploying
Probably the easiest step in all of this was the deploy to a live server.I used ZEIT, 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.
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:
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, 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!
Top comments (6)
Next esta chido porque te hace PWA desde el inicio y pudes exportar como estatic tambien,en lo particular me gusta mas Svelte
Últimamente estoy encantado con Next.js, es realmente fácil hacer aplicaciones completas con un performance increíble, y lo mejor de todo es no tener que aprender nada nuevo, ya que es simplemente React.
Svelte se me hace muy interesante, pero creo que hoy en día la comunidad de React tiene más que ofrecer para mis proyectos. :)
Checa también para el deploy Netlify esta super bien y creo que el flow con next tambien es super simple yo lo he checado con gatsbyjs y funciona excelente, lo que me gustaba de gatsby era que automatizaba el rezise de las imágenes y GraphQL para hacer static sites esta chido claro que también pueden hacerse dinámicos pero creo que para eso mejor Next en lugar de crear hooks
Si ese es uno de los mayores problemas de Svelte, igual paso y sigue pasando con muchas cosas, ya estamos casi casados con los framework que se nos hace difícil salir de uno para aprender otro.
Por ejemplo en mi trabajo usan jquery porque es lo que los dev que estan ya le saben y pues no quieren salir de eso.
El otro día hice mi css en scss y use css grid, y pues me mandaron a la goma, que mejor usara bootstrap porque cualquier cosa que pasara ellos no le podrían mover porque desconocen como funciona css grid y sass; ya ni se diga vanilla JS ó usar json en lugar de xml.
Pero pues lo entiendo si quieres algo fast pues usa lo que sabes y no te compliques con lo que desconoces y ovio no compliques a tu team en tener que aprender algo que a uno le gusta, pero tambien hay que tener en cuenta que no te puedes quedar con tech de hace 10 años
Me ha tocado trabajar en situaciones similares. Lo que trato de hacer es empezar a meter poco a poco las nuevas tecnologías, es muy difícil lograr que cambien de parecer de un día a otro, pero cuando empiezan a ver lo rápido que te mueves con nuevas cosas se convencen. (A veces jaja)
Sobre Netlify, incluso tengo otro post para hacer el deploy: dev.to/jerocosio/como-hacer-un-dep... Pero siento que la facilidad de Now (Ahora Vercel) es impresionante.
Checare a Vercel vi que le metieron de fondo unos $21M con el cambio de identidad, esperemos buenos frutos de esa lania