Our Opinionated MVP Tech Stack for 2024 and Beyond

As a software engineer, the tools we choose shape not only our daily work but also the success of our projects. In today's fast-paced development landscape, selecting the right tech stack is crucial - especially for MVPs and new products. After years of experimentation and real-world testing, I've settled on a stack that I believe offers the perfect balance of developer experience, performance, and maintainability.

The key to our approach is simple: understand what makes your product unique and focus your development efforts there. For everything else, leverage battle-tested solutions that let you move fast without sacrificing quality. This philosophy has led me to carefully curate a set of tools that work seamlessly together, each solving specific challenges while maintaining cohesion across the entire stack.

Let me take you through my 2024 tech stack and explain why each piece matters.

Developer Experience

We are a shop for bespoke software solutions and we are in the business of building products that solve tough problems at the forefront of web technology and innovation. Therefore, we're not focusing on no-code solutions in this article, even though we believe that many businesses can be started with them.

We consider ourselves as a AI-Native or AI-First Product Development Shop

Since OpenAI made a big splash with ChatGPT, the AI-native or AI-first product development took a lot of turns and became the hottest trend in tech. There are many concerns around AI and the impact it will have on the job market and the economy, but we believe that AI will be a game changer especially for software development. When looking back, for me it's clear that I don't want to go back to the days where I was writing the same code over and over again.

That's why I'm starting with THE TOOL that helps us to be probably 1000x more productive and to build better software faster: Cursor AI.

Here are five key benefits that make Cursor an essential part of our development workflow:

1. Intelligent Code Generation & Editing: Cursor's AI understands your codebase context and can generate, modify, or refactor code with remarkable accuracy. Its Copilot++ feature not only suggests completions but can also edit existing code intelligently.

2. Advanced Codebase Understanding: Through features like @codebase and embeddings search, Cursor can analyze and understand your entire project, making it incredibly effective at answering questions about your code or suggesting improvements based on your full codebase context.

3. VS Code with benefits: As a fork of VS Code, Cursor maintains all the familiar features developers love while adding powerful AI capabilities. You can import your existing VS Code settings, extensions, and keybindings effortlessly.

4. Built-in AI Interface with Context Awareness: The integrated AI chat understands your code context, making it easy to ask questions about specific files or functions. You can even reference entire folders or git changes in your conversations with the AI.

5. Instant Code Application: Cursor's "Apply" feature lets you quickly integrate AI-suggested code changes directly into your files, with the ability to review and accept/reject changes. This streamlines the process of implementing AI suggestions into your codebase.

The last time I was switching editors was 2019 when I switched from my insane terminal based nerd superpower vim+tmux+zsh to VS Code. I was so excited about the simplicity and out of the box, and batteries included experience that I never considered switching back. It's clear that their is no going back from Cursor now again.

Other Tools we don't want to miss anymore

• GitGraph Extention: Visualize your git history and understand the evolution of your codebase.
• LiveShare: Collaborative coding in real-time.
• CodeSpaces: Onboard new developers in seconds with cloud-based development environments powered by GitHub.

Frontend Foundation

Next.js: The React Framework That Delivers

At the core of my frontend architecture sits Next.js. Why? Because it solves real problems:

• Server-side rendering for better SEO and performance
• Built-in routing that just makes sense
• Automatic code splitting for optimal loading times
• API routes that eliminate the need for a separate backend in many cases

Read more about why we recommend Next.js as a frontend framework.

Styling with TailwindCSS

Gone are the days of wrestling with CSS specificity and maintaining separate style sheets. I couldn't be happier with TailwindCSS. It has revolutionized how I approach styling:

• Utility-first approach that speeds up development
• Zero runtime overhead with its build-time optimization
• Consistent design system through customizable configuration
• Perfect integration with component libraries

The best UI Component Library since ever

Shadcn/ui took the developer community by storm and it's clear and innovative approach to UI components is a breath of fresh air. Bloated and inflexible component libraries are a thing of the past.

• shadcn/ui provides pre-built beautiful, AND customizable components
• Radix UI the accessible foundation made by geniuses
• Storybook the way to build and test your design-system (UI components) in isolation

This combination provides a solid foundation for building consistent, accessible interfaces that scale, and don't suck to maintain.

Don't waste your time on these components until you have to

• User Management - Clerk: The easiest way to handle authentication and authorization.
• File Uploads - UploadThing: The easiest way to handle file uploads.
• Emails - Resend: The easiest way to handle emails.
• Mail Templates - React Email: The easiest way to handle emails.
• Payments - Stripe: The easiest way to handle payments.

Data Layer

Sometimes I can't believe that people still prefer no-sql databases for their applications. Effectively, this means "No Structured Query Language database". How could that be a good idea? I'm not saying that no-sql databases are useless, but for most of my use cases, good old SQL databases are the way to go.

PostgreSQL + Drizzle: Type-Safe Database Operations

With the raise of server components, the combination of PostgreSQL and Drizzle ORM is a match made in heaven:

• Rock-solid reliability with PostgreSQL
• Type-safe database operations through Drizzle
• Excellent performance characteristics
• Schema migrations that don't cause headaches

Third Party APIs

If you don't want to make your Lead Dev look at you like 👀, make sure that you're not coming up with your own tailor made useState data caching layer. We enjoy using:

• vercel SWR (Stale While Revalidate)
• Tanstack Query

Some years ago, I would have recommended some state management library like Redux, Recoil or Zustand. But with these two libraries in place, I rarely see the need for them.

Infrastructure & Deployment

For most of our projects, infrastructure and deployment boils down to deploying a Next.js app to Vercel and build custom api routes or access data directly via server components. Most of our critical business logic is build right into the PostgreSQL database.

Vercel: Deploy with Confidence

Vercel has become our go-to deployment platform because:

• Zero-config deployments
• Automatic preview deployments for PRs
• Edge functions for optimal performance
• Built-in analytics and monitoring

Monorepo Management with NX

Our repositories are managed with NX. It's a powerful tool that helps us to:

• Intelligent build caching
• Automated dependency management
• Consistent tooling across projects
• Powerful code generation tools

Why we're using monorepos in the first place and how we're organising them is a topic for another blog post.

Product Analytics with PostHog - Understanding Users

Have you ever waited for Google Analytics data to appear? We've wasted too much time on that. In general we prefer open source solutions for our critical business tools. That's why we're using PostHog for analytics:

• Open-source analytics platform
• Feature flags for controlled rollouts
• Session recordings for debugging
• GDPR-compliant user tracking

Testing & Quality Assurance

At the moment we're quite happy with the following tools:

• Playwright for end-to-end testing
• React Testing Library for component testing
• Storybook for visual testing
• GitHub Actions for continuous integration

Looking Forward

Technology moves fast, and while this stack has served us well for 2024, I'm always evaluating new tools and approaches. Some areas I'm watching:

• Edge computing capabilities
• AI-powered development tools
• Performance optimization techniques
• Emerging testing methodologies

Conclusion

Building modern web applications requires a carefully chosen set of tools that work well together. This stack has proven itself in production environments, handling everything from small projects to large-scale applications.

The key is not just picking the right tools, but understanding how they complement each other to create a development experience that's both enjoyable and productive.

Thanks for reading!