How a front-end developer can build a full-stack web app.
When you first start thinking of learning how to code, there is no doubt the amount languages/frameworks out there is overwhelming. Deciding which one to start off with can be a daunting task.
For example if you want to build a website that displays people from different countries. On the website, you want to have a form for people to join and you want to display a list of all the people that have already joined. Your first thought is you need a database to store the people’s details and countries. But how do you then link this database to your website? After some googling, you find out that you need to build an API that serves as a middleman between your database and your front-end code. To build an API, you now have to learn a back-end language. You know you want to eventually learn these things but you don’t think you are ready yet. What do you do?
This blog post will introduce you to a platform that allows you to build your website without having to learn a backend language or database. I recommend using it to serve as a soft introduction to APIs and structuring data.
What is this platform?
It is called Airtable.
As described on their website:
Airtable works like a spreadsheet but gives you the power of a database to organise anything.
Airtable stores your data in a spreadsheet, and that is what I love the most about it. Spreadsheets are familiar to a lot of us — you’ve probably used them at work, school or for personal use. If you haven’t used a spreadsheet, Airtable is a good starting point, or maybe try playing around with Microsoft Excel.
You can use Airtable for a wide range of things like project management, event planning, recruiting and many more. I will focus on how you can use it as a database for your web application.
What can you do with it
Each spreadsheet in Airtable is known as a “base”- a base can have multiple sheets. To build your website with Airtable, you create your base. Ours will have two sheets: People and Countries. Below are some of the things you can use Airtable for when building your web application.
- Create and embed forms in your website
If you want users to fill out a form on your website so they can be added to the list, you can choose to create one from scratch and send a request to the Airtable API to add them to your ‘People’ sheet. However, Airtable makes this easier by allowing you to embed forms to your website. The code to do this is provided by Airtable and they have a guide on forms, link below.
- Link sheets
Airtable allows you to link sheets within a base. I highly recommend you play around with linking your tables if you use Airtable. It is a good way to gain an understanding on creating relationships between different types of tables. This is a big part of database management. In your base, you can have a sheet for ‘People’, where you save their personal details, and another sheet for ‘Countries’, where you save all the countries. From your ‘People’ sheet, you can link to the ‘Countries’ sheet so users can choose from the list of countries you’ve added to that sheet. In your countries sheet, a column for ‘People’ will be automatically added to show which people are added to which country.
- Create, Read, Update and Delete (CRUD) record(s).
With Airtable API, you can perform all CRUD operations commonly done when working with data in your web/mobile application.
Another plus side to Airtable is that the API is well documented. For each base, you get documentation with detailed instructions on how to make all CRUD requests for data in the base. The URLs used to retrieve and delete in the code snippet above was provided to me from my own base documentation.
There is also an Airtable community forum, like Stack Overflow but for Airtable specific questions. If you have a question, you can ask in the forum. Most likely, you will find there is already an answer to your question.
To get started with Airtable, create an account and create your own base. You can choose to start from scratch or use one of the templates available. The Airtable guide contains useful information on how to get started with base and the spreadsheet. The support page has more information about using the app in general.
- Which programming language should you learn first?: FCC Blog
- Airtable home page: https://airtable.com/
- Airtable community forum: https://community.airtable.com/
- Airtable support page: https://support.airtable.com/hc/en-us
- Airtable guide: https://guide.airtable.com/
- Guide to airtable forms (including how to embed form into your website: https://support.airtable.com/hc/en-us/articles/206058268-Guide-to-forms
If you enjoyed this article, please recommend and share. Get in touch with me on twitter.