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.

Image for post
Image for post
Image source

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?

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.

Useful links

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

Junior Dev Diaries

A publication for junior developers, by junior developers.

Fatimat Gbajabiamila

Written by

Developer. Mentor. Student. Reader.

Junior Dev Diaries

A publication for junior developers, by junior developers. We publish stories for beginners by code newbies, job seekers, and newly hired developers.

Fatimat Gbajabiamila

Written by

Developer. Mentor. Student. Reader.

Junior Dev Diaries

A publication for junior developers, by junior developers. We publish stories for beginners by code newbies, job seekers, and newly hired developers.

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store