The most productive tech-stack I've ever used
Tags: webdev, typescript, ai, productivity
Published: 2023-09-19 20:43:59

I've been a software engineer for about 10 years now, and along the way I've developed a various side-projects that have tried, failed and been buried in the side-project graveyard.

Back in the day .NET was my go-to for everything. It's where I started and all I really knew. I used the ASP.NET MVC framework, jQuery and bootstrap. This was pretty cutting-edge back then, but times have changed. Build times were slow, deployment was complicated and slow. I was also pretty new to software development so I didn't even know about things like CI/CD.

In recent years the state of web technologies has changed and improved massively. Yes, there's a hell of a lot more choice available. New npm packages every day (sometimes feels like there's even a new whole framework released every day) and there's a lot to keep on top of, but it's also the best and most accessible time ever to get into web development.

## So what's the stack?

These days I have a new go-to stack that feels like my most productive setup yet. With all the examples below I always prefer to use TypeScript. Let's run through the tech and I'll share my thoughts on why these tools are awesome!

### Next.js

Probably the most popular React-based full-stack framework in use right now? It's fairly easy to learn, has a huge community and loads of help and advice online, and just does the job really well.
[nextjs.org](https://nextjs.org/)

### tRPC

This library is truly amazing. Gone are the days of building API endpoints, then manually making calls from your frontend to these APIs, trying your best to keep them in sync. tRPC removes this friction entirely. Simply write a function that returns data on the backend and it provides a type-safe function that you can call from your frontend. Want to rename a property? Just refactor/rename and it updates everywhere. It's magical!
[trpc.io](https://trpc.io/)

### React Query

Manage all your loading state, caching and more, with a super simple and powerful library that handles all your data fetching needs. tRPC ships with a React Query integration and the two go perfectly hand-in-hand.
[tanstack.com/query/v3](https://tanstack.com/query/v3/)

### UI Components

This is pretty generic as I've tried a few tools and like them all. Mantine, Chakra, Material UI or shadcn/ui are all awesome. shadcn/ui is particularly awesome as it is all based on TailwindCSS so it's super customisable. In any case, using a library of components means you can get started with your main value proposition and feature development immediately without reinventing the wheel. All these library have nice defaults and are fairly easy to customise to your liking.
[mantine.dev](https://mantine.dev/)
[chakra-ui.com](https://chakra-ui.com/)
[mui.com](https://mui.com/)
[ui.shadcn.com](https://ui.shadcn.com/)
[tailwindcss.com](https://tailwindcss.com/)

### Prisma

A powerful type-safe database ORM that supports multiple databases. This is now my default choice as again, it's super simple to integrate, manages migrations nicely, and the type-safe queries are fantastic.
[prisma.io](https://www.prisma.io/)

### T3 stack

Special mention here to the T3 stack which is an awesome tool to help you get a project started with Next.js, Prisma, Tailwind and NextAuth (or any combination of the above).
[create.t3.gg](https://create.t3.gg/)

## Deployments and Hosting

For deployments I have two main preferred choices. Vercel, which is particularly suitable for Next.js projects, is free to use for hobbyists and small projects but you must consider its serverless nature and also potential for high costs later down the line. My other choice which I've used for a couple of recent projects is Railway, which has the ability to host and auto-scale docker containers and databases with very minimal setup. So far I've found it to be amazing and they are regularly releasing new features and updates. Both these options hook into GitHub and automatically build and deploy commits pushed to your remote main branch.
[vercel.com](https://vercel.com/)
[railway.app](https://railway.app/)

## Closing thoughts

With this stack I can now get a project created and deployed in a matter of minutes, in development in a matter of hours, and deployed with a core set of product features in days to weeks. It's truly amazing how fast it is possible to move with this stack. Just check out [blogfactory.dev](https://blogfactory.dev/) as an example of something I've been working on recently. It's a new AI startup that helps indie hackers like yourself generate blog posts for their own products, using OpenAI tools under the hood.

Don't get me wrong, this isn't a one-size-fits-all. I wouldn't necessarily use just this stack for literally everything and anything. For example, for my full time role in a large team of many engineers with a plethora of micro-service backends there's more to consider. I still love the .NET platform and there are many other great tech stacks for various different purposes. But for indie hackers who want to get their first tens, hundreds or thousands of users, this feels like near perfect solution.

---

P.S. Seriously, check out [blogfactory.dev](https://blogfactory.dev/)...

[![blogfactory.dev](https://blogfactory.dev/blog-factory-og-image.png 'blogfactory.dev')](https://blogfactory.dev/)