This article focuses on choosing a tech stack for web development. This is an important step in building your project. It will have many implications down the line. We'll consider both front-end and back-end tools. It's worth noting that no tech stack is universally seen as the "best".
Also, choosing a stack depends on your goals. Do you want to get hired? Learn popular tools. Do you want tech that lasts? Check what's trending. Do you want to go freelance? Look for developer experience.
Ultimately, you can't learn everything. At some point, you will set goals and make choices yourself. These are the choices I made.
JavaScript
TypeScript is the future of JavaScript. There are too many perks to not use it. At the very least, you can still write normal JavaScript with it and let the compiler infer types for you.
Node.js is a must-learn tool. Almost all modern JavaScript utilizes this runtime environment. It's important for back-end and server-side code. Most front-end devs rely on it for setting up their dev environment. Its package management system with npm is indispensible.
For building front-end user interfaces, React is the standard. It's the most popular JavaScript framework and has been for awhile. It's the most desirable skill by employers for the front-end. It has an extensive ecosystem and wide community support. It's a pleasure to work with. It's a no-brainer. Honorable mention to Vue.js.
After React, Next.js is the next evolution. It's great for server-side rendering, but it has a ton of other benefits too. Fullstack functionality, file-based routing, and a gamut of small performance optimizations are a few. Check out Gatsby for a more streamlined SSR experience.
CSS
For CSS frameworks, TailwindCSS is at the top of my list. It provides a remarkable dev experience. It's a perfect combination of flexibility and power.
If you want something closer to vanilla CSS, use SASS. There are almost no downsides to tacking on SASS to your CSS ecosystem. Many companies use it. It makes styling more organized and maintainable. It's been around for a while and it's still super relevant.
Bootstrap or Material UI are serviceable. They're great for prototyping and iterating. If you don't care about uniqueness, it's a sensible choice. Once you learn one, you sort of learn all the CSS-component frameworks.
Server-side
For back-end, there are so many options. Express is practical as it lets you to stay in JavaScript. Do you prefer another language? Django (Python), Laravel (PHP), Java Spring, and Ruby on Rails are other noteworthy options. They're all great, so stick to language you know best.
Database
The two most popular databases are PostgresSQL and MongoDB. It's SQL vs. NoSQL. There is no clear winner. PostgreSQL is more robust while MongoDB is more scalable and easier to learn, but these margins are small. Consider using an ORM like Sequelize or Mongoose.
API
For API design, there's REST and GraphQL. REST is server-driven while GraphQL is client-driven. Is your app centered around the server or client? The answer to this question determines your selection.
Testing
With React, I would use React Testing Library for unit and integration tests and Jest for assertions. For end-to-end testing, Cypress is becoming the favorite.
Version control
Git & Github. Everyone uses it. It's the home of open source.
Deployment
Netlify, Vercel, and Heroku are the choices for small apps. Netlify is for static websites, Vercel for Next.js, and Heroku for full-stack.
For big apps, go with AWS, Google Cloud Platform, or Microsoft Azure.
IDE
VS Code. This is the only IDE you need to know.
Conclusion
So that's where I'm sitting at today. This list narrows down the options, but there are still some choices to be made depending on the requirements of your project. It's important to note that this list is coming from my small perspective. Did I miss something? Email me your thoughts!