fbpx

How a front-end developer can build a full-stack web app

Cartoon of a man working on code, with different programming languages above his head, app, Airtable

ARTICLE SUMMARY

Fatima, a full stack developer shares her knowledge on how you can build your website without having to learn a backend language or database.

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.

Most people looking to get into web development usually start off with front-end (HTML, CSS and JavaScript), at least that’s what I’d advise if you are considering it. The problem is people learning front-end often don’t get enough experience interacting with APIs and doing things like saving and handling data, which is actually a huge part of the job.

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?

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).

Airtable and API

With Airtable API, you can perform all CRUD operations commonly done when working with data in your web/mobile application.

Here’s Example of how to retrieve and delete using the airtable API

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.

If you enjoyed this article, please recommend and share. Get in touch with me on Twitter.

RELATED ARTICLES

Get ready to hone your tech skills with Adam Biddlecombe, "The AI Guy" and the Co-Founder & CEO of Mindstream, an esteemed AI-focused news blog.
Roxy Law, Senior Talent Solutions Manager at Robert Half, offers insights on how candidates, especially women in tech, can enhance their chances of success through...
Shadi Rostami cracks open the secrets to becoming a great data engineer. Shadi is the Senior/Executive VP of Engineering at Amplitude, a leading digital analytics...
With employers often intensifying hiring efforts at the onset of a new financial year, it's an opportune time for individuals to "spring clean" their careers....

This website stores cookies on your computer. These cookies are used to improve your website and provide more personalized services to you, both on this website and through other media. To find out more about the cookies we use, see our Privacy Policy.