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