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?
1. 🏰 Language - TypeScript
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:
- 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 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
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!