Which technologies would you choose for your next web project?
Tags: javascript, architecture
Published: 2020-08-08 17:16:32

So you're building an app consisting of a UI and potentially an API as well. What are some excellent default technology choices that are easy to use, scalable and in line with the technology used by the rest of the industry? 

In this article, I'll go through some technology choices that I'd pick for my next JavaScript project. Leave a comment and let me know how your stack would look like 😍


### 1. 🏰 Language - TypeScript

It's worth it. Everyone struggles with it at first, and you may even question if it's worth the (temporary) productivity loss. Very few would go back to writing plain JavaScript after they are fluent with it. It makes reading and writing code a lot easier + you get safety against human errors from the compiler.

### 2. 🦄 React + Next.js

React is a well-documented, battle-tested and an industry-standard library for building user interfaces in the web. There's a massive ecosystem around it and most UI components you can find already implemented from npm.  

I often hear people asking if there's a good boilerplate out there for web projects. Kind of like create-react-app, but with a backend. Next.js does precisely this and more. 

Next.js includes the following out of the box, pre-configured and ready to rock:

- Routing
- Static site rendering
- Server-side rendering
- Bundle splitting

One of the things I really enjoy about Next.js is the fact that API endpoints are defined as plain functions – just like you'd do with the Serverless framework or similar. I think this is huge. Next.js is easiest deployed to http://now.sh/, but nothing is stopping you from deploying it to AWS for instance. There's actually [a Serverless component](https://www.serverless.com/blog/serverless-nextjs) meant for precisely this. 

You get so many benefits using Next.js as a project boilerplate that it's tough to argue why you wouldn't use it.

### 3. 🚢 Data storage - PostgreSQL

Choosing a database should always be done based on the structure and relations of the data you intend to store and how it's accessed and manipulated. That being said, in many cases, PostgreSQL is a great place to start. 

For a Node.js client, I'd recommend 
https://github.com/adelsz/pgtyped

Writing SQL queries to .sql files is way nicer than using an ORM or a query builder such as Knex + you get TypeScript types that always match the schema you have in your database.

### 4. 👮‍♂️ Input validation - Yup or Zod

https://github.com/jquense/yup
https://github.com/vriad/zod

You can get by with no input validation library. However, as your application gets more and more API endpoints that modify your data, it's good to find an abstraction you can share throughout the codebase to validate user input. Both of these validation libraries support TypeScript, which will make your life a lot easier. As we're living in the age of TypeScript, your compiler can do some of that validation before you deploy your app. 

### 5. 🎨 Styling - styled-jsx or Tailwind

### 6. 🔐 Authentication & Authorisation - Auth0

### 7. 📝 Logging & Error management - Sentry

### 8. 🧪 Testing - Jest, react-testing-library and Cypress

What else? What would you do differently? Leave a comment and let me know!