Gatsby meets Airtable.
Before seeking funding or thinking about ways to profit from your idea, you surely need to build an MVP as a proof of concept of your idea first and when it comes to MVPs, everyone hates to spend time picking the tech stack, setting up some mockups, working on both the front-end and back-end sides which leads most of entrepreneurs using third-party services to do less coding, services such as:
In this article, we'll cover up building React MVPs using Airtable to handle the backend, before we get to the definitions, let's first check the options we have when it comes to building React apps, basically we have these 3 options:
- CRA - create-react-app - which offers client-side rendering only
- Next JS - which offers server-side rendering
- Gatsby Js - which offers pre-rendering which means server-side rendering during build time
We will go with Gatsby as it has more pros than cons and it's easier to setup than Next Js, Gatsby is a new static site generator built with React, webpack & GraphQL, it is based on Node js unlike Jekyll and Hugo. It allows you to create hybrid apps that contain static & dynamic content.
the static pages are generated during build time
Airtable is simply a better Google spreadsheet that can be used like an admin panel to manage your content. You start by creating a new base then you started creating tables with content, each base provides a nice documented API which you can query from your Gatsby app.
Using Airtable source plugin, you can actually fetch the content during build time from your Airtable base, the plugin is called gatsby-source-airtable, but you will have to redeploy your website when ever you change something from Airtable and your API key is not exposed to the client unlike if you want to add dynamic content to do CRUD operations, there are of course methods to avoid exposing your API key but Airtable has to handle this like other services do.
If you'd like to know more about building MVPs with Gatsby & Airtable, you can sign up to our upcoming webinar where Ismail Ghallou aka Smakosh will walk you through explaining every part with a real life demo which will be open sourced and shared with you. He will answer all your questions as well so make sure to sign up!
In case you missed the Webinar, it has been recorded and can be seen here