Elements of a web application
A web application is more than just a website. In this lesson you'll learn the three fundamental layers that make up every web app, how they connect, how code gets deployed to the cloud, and how AI-assisted coding is changing the way software is built.
What is a web application?
A web application typically has three parts that work together: the frontend, the backend, and storage. Each layer has a distinct responsibility, and understanding how they fit together is the first step to building real software.
Think of it like a restaurant:
- 🍽️ The frontend is the dining room — it's what customers (users) see and interact with.
- 👨🍳 The backend is the kitchen — it's where the real work happens, following specific recipes (business logic).
- 🗄️ Storage is the pantry and the filing cabinet — it's where ingredients (data) and documents are kept.
Let's look at each layer in detail.
Frontend: the user interface
The frontend is everything the user sees and interacts with — buttons, forms, navigation menus, images, and text. It runs in the user's web browser.
Examples of frontends you use every day:
- • Google's search page — the search box, the results list, the "I'm Feeling Lucky" button
- • Instagram's feed — the photos, likes, comments, and stories bar
- • A banking app — your account balance, transaction history, and transfer forms
The frontend is built with technologies like HTML (structure), CSS (styling), and JavaScript (interactivity). Modern frameworks like React, Next.js, and Vue make it easier to build complex interfaces.
Want to build a frontend?
Our Build a React app with Vite codelab walks you through creating a React application from scratch.
Backend: the business logic
The backend is the server-side code that contains the application's business logic — the rules specific to what your app does. It receives requests from the frontend, processes them, and sends back responses.
What does "business logic" mean? Here are some real examples:
- • When you save a form, the backend receives the data, validates it (is the date in the past? is the credit card number valid?), and stores it in a database.
- • When you log in, the backend checks your credentials against stored records and creates a session.
- • When you place an order, the backend calculates the total, applies discounts, checks inventory, and processes payment.
The backend can be written in many languages — Node.js (JavaScript/TypeScript), Python, Go, Ruby, and more. It typically exposes an API (Application Programming Interface) that the frontend calls to read and write data.
Get ready for backend development:
Start with Getting started with Node.js & npm or Getting started with Python — both are popular backend languages.
Storage: databases and buckets
Storage is where your application's data lives. There are two main types of cloud storage:
🗃️ Databases
A database stores structured data as text — things like user accounts, blog posts, product catalogs, and orders. Think of it as a collection of spreadsheets in the cloud. The most common type is a relational database like PostgreSQL, which organizes data into tables with rows and columns.
📁 Buckets (object storage)
Buckets store files and documents — images, videos, PDFs, user uploads, and more. Think of them as folders in the cloud. Services like Supabase Storage, AWS S3, and Google Cloud Storage provide bucket storage.
Both databases and buckets live in the cloud, which means they're accessible from anywhere — your local machine, your deployed backend, or serverless functions.
Important: The frontend typically does not connect directly to storage. Instead, the frontend talks to the backend, and the backend reads from and writes to the database or bucket. This keeps your data secure — the backend controls who can access what.
Set up cloud storage:
Our Getting started with Supabase and Getting started with Neon codelabs walk you through setting up a cloud PostgreSQL database.
Deployment: getting your app online
When you write code for a web application (the frontend together with the backend), you need to package it and send it to a cloud service so that other people can use it. This process is called deployment.
Think of deployment like publishing a book — you've written it on your computer, but nobody can read it until you send it to the publisher (the cloud) who makes it available to the world.
The database and buckets are already in the cloud — you just need a username and password (authentication credentials) to access them from your backend. Deployment is really about getting your application code online.
How deployment works today
Modern integrations between services make deployment surprisingly easy. Here's the typical flow:
- 1
Push your local code to GitHub using git push.
Getting started with GitHub → - 2
Import your GitHub repository into Vercel — this generates a free URL (e.g., my-new-app.vercel.app) and automatically deploys every time you push.
Deploy web apps with Vercel → - 3
Set up Supabase with a PostgreSQL database for your app's data storage.
Getting started with Supabase →
After these three steps, your application is connected to the internet and ready for other people to use.
The full picture
Putting it all together
Every web application is built from the same core pieces:
- ✅ A frontend that users see and interact with
- ✅ A backend that processes data and enforces business logic
- ✅ Storage (databases and buckets) where data and files live
- ✅ A deployment pipeline that gets your code from your computer to the cloud
With modern tools and AI-assisted coding, building and deploying a web application is more accessible than ever. The codelabs linked throughout this lesson will guide you through setting up each piece hands-on.
Recommended codelab order
Follow these codelabs in order to set up everything you need to build and deploy a web application:
- 1. Getting started with Google Antigravity — Set up your AI-powered IDE
- 2. Getting started with GitHub — Set up version control and code hosting
- 3. Getting started with Node.js & npm — Install the JavaScript runtime for building apps
- 4. Deploy web apps with Vercel — Deploy your app to the cloud with a free URL
- 5. Getting started with Supabase — Set up a cloud database for your app's data
- 6. Build a React app with Vite — Build a frontend and bring it all together
- 7. Build a backend API with Node.js — Create REST APIs with Express
- 8. Connect frontend to backend — Wire a React frontend to an Express backend
- 9. File storage with Supabase Storage — Upload, download, and secure files in the cloud
📖 Related lesson:
For a hands-on guide to building and hosting a static website, check out Create your own website .