The Hunt for the Perfect JavaScript Tech Stack

It may not be what you think

JavaScript has come a long way and is without a doubt the most used programming language, at least on Earth. It’s become the fastest way to build a digital product (with code), but with millions of developers worldwide, there are also countless opinions on what’s the best tech stack.

With no further ado, let’s see the beautiful (slightly biased) diagram that I spent half an hour sketching, which gave me the idea for writing this article. In its entirety, the stack is very opinionated; it’s more of an extension of create-t3-app with guidelines set around 3rd-party and storage integrations.

I’ve split the stack into 4 categories — client, server, storage, and 3rd party — to isolate interchangeable components. Let’s cover my picks for each in a detailed and subjective manner that no one asked for.

Client

A client application should have the following: accessibility, good performance, great SEO, rich features, and a ton of JavaScript. Wait a second…

We should reduce JS payloads as much as possible without reducing interactivity. I will go down the Astro rabbit hole in another article, so let’s forget about the JS payload bonanza of modern apps.

The fact that each week a new JavaScript framework is born is a meme but not a myth, fortunately, I’m trying to be on bleeding edge (responsibly), so I won’t go over any “Born on a Monday … Died on a Saturday” sort of framework.

Frontend library

I chose React for the same reason I chose JavaScript: it’s extremely popular; there are a ton of developers available if you need help or hire, laying the groundwork for a future Unicorn is straightforward (a lot of bad performing spaghetti code that will have to be replaced with Rust later on).

Programming language

TypeScript is another braindead choice even for the most unopinionated JS developers; writing future-proof code and making onboarding new developers practically automated are a few of the benefits of having types. Let’s not forget that DX is through the roof, as we can clearly see in the JamStack Community Survey (bubble no. 2).

After the brilliant Next.js is a back-end framework talk by Theo at Next Conf. I decided to move it to the server section but was too lazy to update the diagram, crocodile tears.

CMS

Most services require an admin application to manage the data presented by the front-facing app. For B2B products, such dashboard views are mandatory.

A controversial decision is coding this yourself, which can be a big overhead compared to a CMS like Sanity or Directus. Truthfully, I haven’t tried any CMS or admin panel yet since I prefer owning the code and infra (as well as shared branding).

UI library

A shared component library is often implemented for reusability’s sake in the case of multi-project platforms that want to keep the branding consistent and keep it all DRY. There are a couple of giants in the field, Storybook and Bit, neither of which I’d use for starters (although I am inclined to pick Storybook) because, as quoted, “Theo doesn’t like Storybook” and my tech (life) decisions are strictly guided by his.

CSS framework

The CSS space is getting rather crowded with various options, from full on opinionated component libraries to preprocessors and utility frameworks.

Out of this sea of convoluted ideologies, I pick Tailwind CSS, I find it the most flexible way of writing CSS without any BS. added to the bundle size. I’d also use Class Variance Authority to structure classes and better understand the props a component exposes.

Build system

Monoliths resurface after the microservices boom, thanks to tools like Lerna, yarn workspaces, and, most importantly, turborepo.

I love the idea of Rust, to underline the idea, I’ve read through many lines of Rust (mainly smart contracts) and am awed at the performance it spits out, yet I ache for its difficult syntax and structure. That's why I'm jumping on the rust tooling for JS bandwagon with turborepo at its peak, followed by turbopack.

Server

Coming from a strong React CSR (client-side rendering) background, it was a tad bit unnatural to get used to the SSR/SSG paradigm. Instead of storing the build output of a project in an S3 bucket, you run a server that responds and renders content according to the route accessed.

Backend framework

This moves considerable computation to the server, resulting in better client experience and SEO compatibility. Without a doubt, Next.js (hosted on Vercel) wins the popularity battle, although Astro, Remix, and even Redwood are closing in on more niche use cases.

The API is then moved to Next API handlers, and in the latest version, directly within React server components thanks to the new RFC.

API

Instead of running a code generation tool like graphql-codegen or orval on an API or GraphQL schema, I prefer implementing a trpc router to share types between server and client.

ORM

Querying databases is another largely discussed topic, my pick is by far the most optimized yet considered robust enough to cover most needs. Prisma transitioned throughout the years from a GraphQL-only solution to a more SQL-oriented ORM, but note that it’s rather heavy and can increase server times considerably if left unchecked.

Storage

Debating the best storage solution is a no-man's land of technology: NoSQL, SQL, caching, object storage, and so many other terms that it's like a full-fledged word war. Honestly, I don’t like NoSQL, document databases like Mongo, or “scalable” proprietary solutions like Firebase.

Database

I'm an SQL boomer who prefers simple storage, such as MySQL or Postgres, depending on whether I need map-related features or not. Where I host those databases, well, that’s another story.

You won't find me connecting cables in my backyard Raspberry PI farm nor building Amazon-hosted services from the ground up.

I love all the platforms that provide beautiful developer experiences and unreal performances without having to hire a DevOps engineer with 17 certificates and 3 cats.

Database hosting

For MySQL, I go with PlanetScale, which offers instant scaling, smooth branching, and easy integration with something like Prisma.

For Postgres, it comes down to whether I’m lazy and don’t want to own auth so I go with Supabase, otherwise, it’s Railway with their insane value proposition (go there and create a container without even being authenticated, it’s crazy).

Caching

The enigma of caching is solved as always by adding Redis cache layer to any application including in this stack, the speed of a key-value store is hardly ever rivaled. I’d look into Upstash since they offer a serverless solution to Redis so setting up is as trivial as possible.

Object storage

The only component for which I would consider AWS from the start is object storage. S3 is way too cheap not to use, and presigned URLs make uploading for users a piece of cake. The one place where I don’t use S3 is blog images, I have a Cloudflare Images subscription, and it’s blazingly fast and optimized.

3rd Party

The tools I listed below can be excessive for most MVPs since they are more of a long-term, scalable solution for a small-medium start-up with no DevOps or Infra team and a preference for JavaScript tooling.

Analytics

Tracking user behaviour in application isn’t only about big tech collecting data to sell to brokers for unethical forms of marketing but also for improving the features of an application as well as logging potential bugs. I wouldn’t start with something heavy like Google Analytics since it’s a bit harder to configure.

Splitbee is a bright new analytics solution, recently acquired by Vercel, that enables GDPR & EPR friendly analytics with light <4kb JS bundle. The JS SDK allows recording custom events, funnels, and even creating notification automations in a non-convoluted UI (looking at you GA).

Payments

Payments. It’s all about money in the end, right? How can you provide the best payment experience from a UI and UX standpoint? Nowadays Stripe is the clear winner for that, if the sneezy gradient animation on the landing page didn’t win you over when you try the SDK you’ll certainly fall for it.

Real time updates, insane customization and beautiful DX are some of the features Stripe has. To be honest this sounds too much like utopic propaganda, my experience with Stripe was amazing but biased since I haven’t tried any other solution so take it with a grain of salt.

Mails/Newsletter

Since the day of old mails have gained a sort of reputation for being largely despised yet rather effective for marketing and connecting with your user base. Sending notifications covering updates to the product or even keeping a newsletter can get expensive.

Platforms like Mailchimp and Mailjet are known in the field as rather expensive, Sendinblue has the best free plan I found so far with 300 e-mails a day limit, more than enough to get to a sustaining revenue.

Error logging

Even the giants of the field have errors, since such systems are built by humans and errors are humane. That’s why we need to implement methods to log those errors so we can understand and fix them.

Axiom is my favorite so far as it’s focused on the server compared to others like Honeybadger or Sentry, a beautiful interface and let’s not forget, 0.5 TB! of FREE log storage, if you need an upgrade from that plan you better be looking for new developers.

Support

Expensive AI-powered chat bot solutions for instant support and collection of feedback from users. Let me rephrase that, insanely annoying, often useless AI support instead of a clear customer support hotline with REAL humans.

With that description out of the way, I won’t be paying the base price tier of $1100! a month for Integromat and would look into something like Chatwoot (open-source) or just building a feedback widget myself similar to the underrated, yet marvelous tutorial by Mahmoud at Next Conf.

I said “I” so many times in this article yet I must mention this tech stack is highly opinionated and subjective, none of the components (other than TypeScript and probably Vercel) are mandatory and everything else is interchangeable.

Do you have any questions or suggestions? Feel free to reach out! 🚀. If you want to stay updated on my future writings follow me on Medium or Twitter.