The Right Way to Build a Web App in 2021

When I left my infrastructure engineering job at Google to start my own company, I had a hard time getting my bearings in the world of product engineering. The last time I'd really touched Javascript was in college in 2013, when JQuery was still a thing, and I quickly realized that frontend development had changed A LOT since then. There was seemingly a new hot managed database or managed auth thing every month or so, and it was easy to get distracted.

This is the guide I wish I had a year ago — tl;dr explanations of the different components available for a modern web stack with my recommendations for which ones to use in combination with each other. I'm not saying that these are going to be your forever stacks, or totally optimal ones. But for going from 0 to 1, from conception to a presentable web app, I think these are the best options. Things I'm considering include completeness of documentation, amount of support you can get on forums, integrations with each other, generally "looking good", and cost. Under each heading, if I have a recommendation, I label it with a green check mark.

Static Sites/Landing Pages

If you're just looking to put up a personal website or something else fairly static, I would highly recommend:

easy web hosting for your Notion pages (this is what I use for this website)

super easy no-code maker for your landing pages

Frontend

Vector Graphics

free SVG vector drawings; you can customize the color

design platform; I find Canva useful for creating favicons, editing photographs; it has a great stock photo library.

Language

Javascript ✅

la lingua franca of the web

Typescript

You may have heard of TypeScript. It's an "improved" superset of JavaScript that has support for stuff like classes, interfaces, static typing, etc. Typescript is very buzzy right now, but given that so much of the documentation available online is for JavaScript, I think it's better to just use JavaScript. Every JavaScript file can be converted to TypeScript by changing the file extension to .ts from .js.

Frameworks

React is a JavaScript framework that makes it easy to build UI's. Unlike traditional frontend programming, where you embed JavaScript into HTML, with React, you build "components", which are self-contained JavaScript functions that maintain their own state and return HTML. The components typically correspond to a discrete UI, for instance a header menu.

React is the dominant UI framework these days and has been so for probably the last ~5 years. This is what most frontend developers use and what I learned.

I've only played around with Vue a little bit. The Vue people wrote a pretty fair/detailed comparison against React here, and it looks like a lot of the benefits are in optimizations/scaling.

UI framework for TypeScript

Frameworks

Create React App allows you to set up a React app without having to do any configuration

with CRA you don't have to worry about build tooling like Webpack, Babel, dependency management, etc.

Next.js is another framework that makes life easier when developing apps with React. The main difference from Create-React-App is that it has server-side rendering (SSR) by default, which means using a server to generate HTML from JavaScript in response to a URL request. That’s in contrast to client-side rendering, which uses the browser to create HTML using the DOM. SSR can be better for 1) performance and 2) SEO, when indexing does not handle JavaScript properly.

Next.js also provides API Routes which you can use to build "backend" API endpoints with serverless functions. Serverless refers to a computing model where the cloud provider only charges the user for the compute and storage involved in running a particular function, instead of the user having to manage containers, hosts, compute instances, etc themselves.

Styling

Bootstrap is the most popular css framework in the world

You can use Bootstrap in a few ways: the simplest, IMO, and the right way, is just to import the stylesheet — this gives you better styling automatically for certain html elements, for example a better looking button.

react-bootstrap, on the other hand, gets you styled dynamic components for free, but it makes it really difficult to actually customize stuff further, like radiuses and colors.

TailwindCSS is a CSS framework that provides you with predefined utility classes. Instead of importing a stylesheet that has overridden certain html elements like with Bootstrap, Tailwind gives you finer grained control with tags like "red" or "lg" that you can concatenate. So for example, html for a big red button would look something like this:

<div class="red lg">Submit</div>

TailwindUI

• the makers of TailwindCSS recently put out a paid component library with pre-styled components for dashboards, pricing pages, etc. It's $249 for lifetime access and worth it IMO.

Other Helpful Things

query language for API's

lets you specify a subset fields in an API JSON response that you want, and retrieves only those fields.

I haven't used this at all, but some frontend engineers I respect are big fans.

dev tool for frontend developers; UI for organizing/visualizing components

Backend

Language & Frameworks

Python/FastAPI

We generally defaulted to using python on the backend, just because that's what we were familiar with. It worked fine, but I do think we ended up writing a bunch of repetitive filler code. If you just have a CRUD app you might be able to get away without a "real" backend, and just use Firebase/Supabase (see below).

For Python backends, I've typically used Flask, but a friend recently turned me onto FastAPI, a modern web framework for building API's in Python. It's fast, and auto-generates docs on the go (i.e. you hit the /docs endpoint, and get a swagger UI automatically).

JavaScript used to only be run in the browser. To be able to use JavaScript on the server side as well, someone came up with Node.js. Node.js is a runtime environment, i.e. using Node.js, you can run JavaScript on a standard machine. Node.js is not a programming language or programming framework.

"Where Node really shines is in building fast, scalable network applications, as it’s capable of handling a huge number of simultaneous connections with high throughput"

Express, meanwhile, is a framework for building web applications in Node.js. Super popular, although I haven't used it before.

Database

cloud-hosted, NoSQL, document-based datastore

good for getting something out the door fast, but no latency guarantees, limited processing capabilities, awkward querying

Postgres ✅

open source relational database

I think relational databases make the most sense and are just easier to reason about in a lot of ways.

Authentication

offers authentication, storage, and a NoSQL database (Firestore)

Google project, so not great docs/support IMO

open-source Firebase; offers authentication, storage, and a Postgres database

slick site, nice API, good support and reviews on Twitter

Deployment

new-age Heroku, makes it easy to deploy any kind of web service, cron job, static site, and/or fully managed Postgres database

good for deploying Next.js sites, because Vercel is the parent company of Next.

another alternative to Heroku, nice free tier and very popular, although I haven't personally used it before.

I honestly just found the whole GCP console to be insanely confusing/difficult to navigate, so this wouldn't be my recommendation.

Recommended Stacks

Option 1 (What I Used):

UI Framework: Bootstrap

Frontend: Create-React-App

Backend: FastAPI

Auth/DB: Firebase

Deployment: Render

Option 2 (JavaScript all the way with a real server):

UI Framework: Bootstrap

Frontend: Create-React-App

Backend: Express

Auth/DB: Firebase

Deployment: Render

Option 3 (Vercel World):

UI Framework: Tailwind

Frontend: Next.js

Backend: Next.js

Auth/DB: Supabase

Deployment: Vercel

From these "template" combos above you can also mix and match stuff, like swapping in Tailwind for Bootstrap, Supabase for Firebase, etc.