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
Top comments (25)
Sorry to ruin the party, but technologies and frameworks need to be chosen based on what problem they help you to solve and how they help you to achieve and maintain your project's goal and not by 'which tech / framework I like the most'.
Unless It's a test project with a learning curve and then you can choose whatever you want.
Perfect anwser in my opinion. The problem determinates technologies that we will choose. So not always SPA framework with RestApi/GraphQL but somtimes MPA apps with backend rendering templates
Frontend - Gatsby.JS, React.JS, Typescript, Flexbox, CSS3, CSS Grid with a premade UI kit or template
Backend - FastAPI
Database - Postgres
Deployment - Gatsby Cloud, Uvicorn, Nginx
Testing - Pytest, Jest & Cypress
Front-end - Svelte or SvelteKit if I need backend APIs and SSR
Database - Depending with the data I need and how it is to be stored I'll choose between LowDB or similar, SQLite, MongoDB, Firebase Cloud Store
CSS - I usually just write it plain
Then TypeScript sounds good as well.
I have just discovered Sails.js and it's my new backend favourite.
vue
Nginx, HTML, CSS and JavaScript. Probably jsDelivr for the lulz because it's not like I'd likely need a CDN for any of my projects.
If an API with database access was necessary, I'd go for Tarantool.
I am happy you mention Tarantool.
Sveltekit mongo golang
Thanks for the nice post. In addition to React / Next stuff, I'd like to recommend Zustand or Jotai for global state management.
Although React Context API is a great solution, simple global state management is useful for most cases
ASP.NET Core and Microsoft SQL Server
Frontend
Language: Typescript
Framework: Remix
Component lib: Tailwind UI
Backend
API: Deno + Oak
Database: MariaDB
Reverse proxy: Nginx
Cache & rate limiting: Redis
Process management: PM2
Cutting-edge tech stack ftw ๐
My stack is almost identical to yours, just instead of Next, Remix. Trying it out now in a new project, looks awesome