My 2024 Web App Tech Stack
Tags: javascript, react, webdev
Published: 2024-01-13 23:42:41

With a new year comes a renewed sense of motivation to build side projects that I probably won't finish, but I'm still going to try anyways! I tried a lot of different technologies in 2023, and this is my list for the ones that I want to either continue or start using in 2024.

**TLDR**

- Frontend Framework - [React](https://react.dev/)
- Component Library - [shadcn/ui](https://ui.shadcn.com/)
- State Management - [Zustand](https://docs.pmnd.rs/zustand/getting-started/introduction)
- Authentication/Data storage - [Firebase](https://firebase.google.com/)
- Data Fetching - [TanStack Query](https://tanstack.com/query/latest/)
- SSR - [NextJS](https://nextjs.org/)
- Tooling - [Vite](https://vitejs.dev/)
- Bundling for quick projects - [esbuild](https://esbuild.github.io/)
- Hosting - [Vercel](https://vercel.com/)

## Frontend Framework - [React](https://react.dev/)

I've been using React for years now and don't plan on stopping any time soon. It's not the easiest framework to learn, but I know how to use it and can build frontend web apps very quickly with it. Plus, it's got a huge and supportive community and as far as I can tell, it's here to stay. 

**Runner Up** - Svelte! I first heard about Svelte around 4 or 5 years ago, and in 2023 it seems like I started hearing about it everywhere. People have talked about its nice learning curve and simplicity. With nearly 75K stars on GitHub at the time of this writing, it's definitely a technology I'd like to experiment with.


## Component Library - [shadcn/ui](https://ui.shadcn.com/)

I've been looking for a component library like shadcn for a long, long time. It's built on top of [Tailwind](https://tailwindcss.com/) and provides a complete set of clean, easy-to-use frontend components. I absolutely love the way it looks and how easy it is to customize the base components and even create your own variants.

## State Management - [Zustand](https://docs.pmnd.rs/zustand/getting-started/introduction)

Someone at work told me about Zustand the other day, and it absolutely blew my mind. I was amazed at how easy it was to create a reactive global state with basically no configuration. I was able to quickly solve a problem at work with some legacy React class components using Zustand that would have been a lot more difficult without it.

For a while, I hadn't even been using a state management library in my side projects - React's built-in `createContext` had been doing the job just fine. But Zustand requires such little setup work and seems so flexible that I'm excited to try it out more.

## Authentication/Data storage - [Firebase](https://firebase.google.com/)

I've been using Firebase for my side projects since college and still love it. It's so easy to set up authentication and databases with Cloud Firestore that I don't think I'll be moving away from it any time soon. I love getting an app working end-to-end as quickly as possible and feel like I'm able to do that with Firebase.

I've been hearing a lot about [Supabase](https://supabase.com/) too but know very little about it. For those of you who have worked with Supabase and Firebase, let me know in the comments if you prefer one over the other and why!

## Data Fetching - [TanStack Query](https://tanstack.com/query/latest/)

I absolutely LOVE this library. It makes everything about data fetching so clean and easy, including state management and caching. It has so many options to configure, but it feels like there are really only a few concepts you need to know to get it working for most use cases. 

I introduced it to some web projects I built when I worked for Amazon and everyone on my team loved it. I still use it at the startup I work for and it has prevented so many potential headaches when it comes to managing the data we fetch from our backend.

## SSR - [NextJS](https://nextjs.org/)

For projects that will be delivering a lot of static content, I've found NextJS to be easy to set up and use. My personal site, [microthoughts.dev](https://microthoughts.dev) , is a Next JS project and it's been a delight to use.

Personally, I didn't love it for really dynamic apps that require a lot of user interaction because then it felt like I had to put a lot of `"use client"` lines in my files which kind of seemed to defeat the purpose of the framework. I'm definitely not an expert on Next though, so please share your thoughts on this in the comments!

## Tooling - [Vite](https://vitejs.dev/)

For more dynamic sites, I've been using Vite to scaffold my projects. It builds super fast and everything just seems to work out of the box with Typescript, React and JSX.

## Bundling for quick projects - [esbuild](https://esbuild.github.io/)

I've used esbuild to build a few Chrome extensions for work and love how easy it is to build React code just with the CLI and a few flags.

## Hosting - [Vercel](https://vercel.com/)

I host a few personal sites on Vercel and have loved it from day one. It's so easy to connect to a GitHub repository and have it automatically deploy the site when you push new changes. I've also found it easy to connect to custom domain names that I purchase which is a huge plus (maybe it's just me, but recently I've had a lot of issues with this on Netlify).

## Conclusion

There are so many technologies out there for building web apps, and each one has its unique set of advantages and disadvantages.

The stack you choose in 2024 could be totally different than mine, and that's fine! I think what's important is to choose technologies that enable you to quickly build apps in a way such that you know it will be scalable and maintainable given your experience, knowledge, and the people you work with.

Which technologies are you going to continue using this year? Which new ones are you excited to try? Let me know in the comments!