Nov 10, 2024 · TypeScript · React 4 min read

The Modern
Web Stack

With the dizzying array of frameworks released every week, it is easy to get lost in the noise. Through my work on various client projects, from payment systems to AI tools, I've settled on a pragmatic stack that prioritizes stability, developer experience, and performance.

The Foundation: TypeScript

JavaScript is the language of the web, but TypeScript is the language of sanity. For any project expected to grow beyond a single file, types are non-negotiable. They catch errors at compile time, serve as living documentation, and make refactoring significantly less scary.

The Framework: React (with restraint)

React remains the dominant library for building dynamic UIs. However, the key is how you use it. I advocate for:

  • Simplicity: Using functional components and hooks for clean logic.
  • State Management: Avoiding Redux/complex stores unless absolutely necessary. Often, React Context or simple props are enough.
  • Server Components: Leveraging Next.js for performance where SEO matters.

CSS: The Return to Basics

While Tailwind is popular (and excellent for rapid prototyping), there is a strong case for Vanilla CSS (with modern features like Variables and Grid) or CSS Modules. They keep the markup clean and allow for more semantic HTML. This website, for example, uses a custom CSS architecture for maximum control over animations and design tokens.


/* Using CSS Variables for a consistent design system */
:root {
    --color-primary: #ff7f29;
    --font-heading: "DM Serif Display", serif;
    --spacing-base: 2rem;
}
                        

Conclusion

The "best" stack isn't the newest one. It's the one that allows you to ship reliable software that solves user problems. Stick to tools that have stood the test of time, but don't be afraid to adopt new standards that offer genuine improvements.