Damar Paramartha
Damar Paramartha's Blog

Damar Paramartha's Blog

Modern Web Apps Stack for 2022

Modern Web Apps Stack for 2022

Damar Paramartha's photo
Damar Paramartha
·Apr 13, 2022·

3 min read

Play this article

This article is for someone who is just learning HTML, CSS, and Javascript and wants to create a multi-million unicorn startup–– What I meant is for someone who wants to make web apps but is too lazy to learn everything. This tech stack might help. At least it helps me.

Next.js (React.js)

React.js is already used by many companies such as Facebook (The Creator of React), Instagram, Twitter, Hashnode, and many more. Next.js is a React framework that has good documentation. Follow the documentation, but in your needs, so you don't get overwhelmed.

TypeScript (a superset of JavaScript)

So you just finished learning JS... it's time to abandon that and use TS instead. Mix this with Next.js, so you don't get headaches when finding errors while testing. You will get a potential error warning during writing code, not when the app is live.

Tailwind CSS

Not everyone is suitable for using this CSS approach. Because your code will get messy after a while. But Tailwind CSS makes writing CSS faster because you don't need to switch files frequently.

React Spring / Framer Motion

This is optional, but without it, your web would not contain silky smooth animation that gives an impression of a professional website.

Prisma

I don't know SQL or NoSQL databases, and I am not interested in learning them at the moment. But to make web apps, I don't get to choose whether I am interested or not. I must know databases, right? I choose not to. But I found an alternative way to do it. With Prisma! Their API is so easy to understand, and it will be a bridge between my web apps and database.

Planet Scale/Railway

Honestly, I was only looking for a database hosting platform with a generous offer on their free plan, and I found Planet Scale! Look at their pricing plan. But after learning more about them, PlanetScale is an excellent platform because of how they handle connection pooling without giving me much hassle as a web developer. Railway simply because it has more excellent Developer Experience than AWS, Google Cloud, or Azure.

SWR/React Query

This is a library recommended by the Next.js creator for data fetching, so I'll follow them. But

Iron Session / NextAuth

If you want simple authentication to get rid of basic pranksters, I choose to use Iron Session (also recommended by Next.js). For a more secure auth, I will be using NextAuth.js. Although I was only skimming on the documentation, good words are always apparent from the developer community.

Playwright/Vitest

I've heard about the Playwright testing tool from the Svelte community, so it must be good. Also, Vitest seems great too.


Tools

Github Copilot

It helps me write code, and sometimes it doesn't. But if this became paid software, I certainly would support it.

Visual Studio Code

This code editor is already an industry standard for writing code. It's a lightweight code editor. I was confused when I saw a coworker using the regular Visual Studio for web development. They should not use that heavyweight software 🫤. And this is the only reason why I mentioned it. Before VSCode, I choose Atom because I like the color scheme, and I still use the Atom Light & Dark theme on VS Code.


For 2023

Maybe for next year, I will switch from Next.js to SvelteKit (still in beta, but close to 1.0), and maybe not. Or maybe Vue.js! Please wait for my article next year!

Conclusion

This article is a bit of a joke and not for beginners, but I hope the tech stack I mentioned could be keywords you can explore later. Correct me if I'm wrong because I don't know what I don't know. Thanks for reading!

 
Share this