Which technologies would you choose for your next web project?
Tags: webdev, javascript, react, programming
Published: 2021-11-25 19:08:33

If you were building an application consisting of a user interface and an API, what technology choices would you make and why?

I'll go first.

**1. TypeScript**
I'd choose TypeScript because it's worth it. If you haven't used TypeScript before, you may have a temporary productivity loss, but in the end, it's worth it. I haven't met anyone who would go back to plain JavaScript, after learning TypeScript.

**2. React & Next.js**

React is a battle-tested library for building UI's. It has good documentation and a large community. There are so many components already implemented and ready to use, so you don't have to build everything yourself.

Next.js has been around for only a couple of years, but it is already one of the most popular tools in the React ecosystem. Next.js offers you so much out of the box. SSR, file-system-based routing, has the potential to improve metrics such as time-to-first-draw (TTFD) and so much more...

**3. PostgreSQL or MongoDB**
In general, you should choose your database based on the structure of your data. However, I think either PostgreSQL or MongoDB is a great place to start.

If I'd end up using PostgreSQL, I would choose Prisma as an ORM. Their API is very intuitive to use, it has hassle-free migrations, and they even have a VSCode extension!

**4. Zod**

For input validation, I would probably go with Zod. Again, it goes so well with TypeScript. It was built with DX in mind, it doesn't have any dependencies, and it's lightweight (only 8kb zipped + minified).

**5. Stitches or TailwindCSS**

For styling, I would choose Stitches or TailwindCSS.
Stitches is a styling solution focusing on component architecture and developer experience. It has similarities with styled-components, but it also has a first-class variant API and a nice design system config. It's fully typed and lightweight (less than 5kb).

Another possible solution would be Tailwind. As a low-level CSS framework, it has become one of my preferred styling solutions. It has increased my productivity and made me more consistent. Even though I have liked using it, it doesn't mean that it is the perfect solution for every project.

**6. Supabase**

For database, authentication, and storage, I would most likely use Supabase. For those who don't know what Supabase is: Supabase is a set of tools that help developers build projects faster by automatically handling a lot of the behind-the-scenes work.

Create a project, and Supabase will give you a Postgres database, an API for interacting with the database, a user authentication system that plays well with common login providers (such as Facebook, Twitter, etc), a storage system for handling uploads, and a pretty UI for managing this all. It takes off a bunch of work you'd need to do otherwise - so you can focus on building your product.

**7. Hosting:** Vercel or Netlify
**8. Logging and error tracking:** Sentry or Logrocket
**9. Testing:** Jest, React Testing Library, Jest-axe


Comment below, how you would build your next project :)

Follow on Twitter for more: https://twitter.com/bjakyt