DEV Community

Cover image for Which technologies would you choose for your next web project?
Jaakko
Jaakko

Posted on • Updated on

Which technologies would you choose for your next web project?

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

Discussion (26)

Collapse
vbanditv profile image
Fima Taf

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.

Collapse
steelwolf180 profile image
Max Ong Zong Bao • Edited on

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

Collapse
anesu profile image
Anesu Kafesu

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.

Collapse
sjanjan profile image
lijian

vue

Collapse
darkwiiplayer profile image
DarkWiiPlayer

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.

Collapse
souksyp profile image
Souk Syp.

I am happy you mention Tarantool.

Collapse
acro5piano profile image
Kay Gosho

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

Collapse
callthecapital profile image
Joseph Gay

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

Collapse
bjakyt profile image
Jaakko Author

Cutting-edge tech stack ftw πŸš€

Collapse
gabimor profile image
Gabi Mor

My stack is almost identical to yours, just instead of Next, Remix. Trying it out now in a new project, looks awesome

Collapse
knopkem profile image
Michael Knopke

Frontend: react + mui
Backend: nestjs
Db: typeorm + of
Testing: Cypress front, jest back
Language: typescript both front and back

Collapse
trevoirwilliams profile image
Trevoir Williams

ASP.NET Core and Microsoft SQL Server

Collapse
cjsmocjsmo profile image
Charlie J Smotherman

Sveltekit mongo golang

Collapse
ivanjeremic profile image
Ivan Jeremic

NextJS frontend, WordPress backend, WooCommerce for WordPress for monetization. Tailwindcss for styling.

Collapse
metak profile image
Dimitar Yanev

React, Material UI, Firebase (Authentication, Realtime database, Storage, Hosting, Functions)

Collapse
mosthated profile image
MostHated

Frontend: HTML
Backend: HTML
Database: HTML
Deployment: HTML
Testing: Production

Collapse
mldkyt profile image
MLDKYT • Edited on

Frontend: express.js
Backend: express.js
Database: node.js objects
Deployment: i did not deploy anything

Collapse
unpseudocomplique profile image
unpseudocomplique

Typescript
Frontend : vue-3 - tailwind / vuetify
Backend: express / fastify
Mongodb

Collapse
jfbrennan profile image
Jordan Brennan

As few technologies as possible is what’d I go with.

Collapse
albertdm profile image
Albert

Nextjs + React + Typescript hosted on vercel
Steapi + Postgress hosted on Heroku

Tailwind or Material UI

Probably start with a free theme as boilerplate

Collapse
briandboos profile image
BrianDBoos

It is best Interesting Post keep it up powerful taweez for love

Collapse
souksyp profile image
Souk Syp.

NextJS or SvelteKit Typescript
Supabase PostgreSQL
Hosted on Vercel and Supabase cloud.

Fast prototyping & deployment.
No vendor lock in.

What am I missing here?
Oh a business to run.

Collapse
gktim profile image
gkTim

Frontend - vuejs with Typescript and tailwindcss
Backend - Nestjs
Database - mysql with Typeorm
Deployment - vercel, digitalocean Kubernetes cluster
Testing - jest, playwright

Collapse
wrench1815 profile image
Hardeep Kumar • Edited on

Frontend: Nuxt, MDB
Backend: DRF
Db: Postgres
Hosting: Vercel, Heroku

Collapse
dirkecker profile image
decker • Edited on

I am the one you are searching for, getting away from TS writing plain JavaScript not getting types right for hours.

solidjs.com