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
- 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.
- la lingua franca of the web
- 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.
- 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 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.
- 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:
- 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.
<div class="red lg">Submit</div>
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
Language & Frameworks
- 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).
- "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.
- cloud-hosted, NoSQL, document-based datastore
- good for getting something out the door fast, but no latency guarantees, limited processing capabilities, awkward querying
- open source relational database
- I think relational databases make the most sense and are just easier to reason about in a lot of ways.
- 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
- 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.
Option 1 (What I Used):
UI Framework: Bootstrap
UI Framework: Bootstrap
Option 3 (Vercel World):
UI Framework: Tailwind
From these "template" combos above you can also mix and match stuff, like swapping in Tailwind for Bootstrap, Supabase for Firebase, etc.