Every week some new tools and technologies are released. For example, the artificial intelligence (AI) space is growing rapidly. Almost every day a new tool or a model is being released. The same goes for the JavaScript ecosystem, where new libraries and frameworks are being released frequently.
It’s like you can’t keep up with the pace of it. And so I think it is important to have some solid stack that you can rely on. A stack that you can use to build your web app today.
Here’s my proven tech stack that I use to build web apps today.
Feel free to click on the tool on every stack section — I’ve added links to those if you’re not familiar with it yet.
🌐 Frontend
For my front end, I like to use React. I’ve been using React for the past years and I think it’s a great tool for building web apps. I’d like to pair it with Next.js to make it easier to build server-side rendered React apps.
I don’t like how sometimes Next.js can be a bit opinionated, so I don’t follow many of their conventions. But I do like how it makes it easier to build React apps. I use their app router and the Image component.
I don’t use their server actions yet as I think it’s still new and I haven’t had the chance to try it out more to recommend. With that being said, my choice for doing API integrations is React Query paired with Axios. They work well together and I like how React Query makes it easier to cache and manage data.
For styling, I like to use Tailwind CSS. It’s not the best, but I like how easy it is to make a design with it. I don’t like how it can be a bit verbose, but I think it’s a good trade-off for the ease of use. Pairing it with shadcn/ui is a great way to make it easier to build components especially if you like those minimalistic designs.
In summary, my frontend stack is:
– React & Next.js
– React Query & Axios
– Tailwind CSS & shadcn/ui
⚒️ Backend
For my backend, I like to use Node.js. The same with React, I’ve been using Node.js for the past years and I think it’s a great tool for building web apps. I’d like to pair it with Nest.js to create the endpoints I would need for my front end.
I like how organized Nest.js is and how it makes it easier to build APIs using their decorators. Sometimes it can have this type of code magic that you don’t know where it comes from, or the circular dependency issues that you might encounter. But with a good understanding of how it works, and reading their documentation, you can get past those issues.
Since every web app will need a database, I like to use PostgreSQL (Supabase) with TypeORM. TypeORM has great documentation and it’s been one of the most reliable ORMs that I’ve used. It’s been there for quite some time already and has great integration with Nest.js.
In summary, my backend stack is:
– Node.js & Nest.js
– PostgreSQL (Supabase) & TypeORM
🏗️ Infrastructure/Deployment
For deployment, hosting, or even setting up SSL, I like to use Coolify. I’ve recently discovered it and it has helped me a lot in setting up my web apps. Before I liked to use Vercel or GCP with Cloud Run but I stayed away from these serverless solutions as I think it’s still much better to have a dedicated provisioned server. I buy VPS on Digital Ocean for my hosting needs.
Luckily Coolify is easy to set up, has self-hosted options, and has great documentation. I like how it makes it easier to deploy my web apps and how it makes it easier to set up SSL.
I pair it with Cloudflare for my DNS and CDN. I also buy my domain from them as I like how easy it is to manage my domains with them.
And lastly, I use Github and connect it with Coolify for my CI/CD. Then connect it to Discord for some deployment notifications.
In summary, my deployment stack is:
– Coolify (DigitalOcean)
– Cloudflare
– Github
Email is one of those things that sometimes you think you don’t need but you do. There are a lot of services out there that you can use for sending emails. What I like to use is Resend. It’s a simple service that makes it easier to send emails.
Resend for sending emails and then @react-emails for building the email templates. I didn’t know how to build reliable email templates before but with @react-emails, it makes it easier to build them.
Resend can also be paired with Supabase if you like using their services as well.
In summary, my email stack is:
🔑 Auth
Whenever I need Auth these days, I usually use Supabase. I use their auth service in the backend by creating an endpoint and calling their API. There’s also an option to use their frontend SDK but I like to set it up on the backend.
Since I use Postgres with Supabase, if I need to, I can roll my own auth service. I have the flexibility to do so with this stack. And most importantly, the data of your users are within your scope and not on some third-party services.
In summary, my auth stack is:
– Supabase
📦 Storage
For image storage, I like to use ImageKit. I’ve been using it for quite a while now for my image storage on both mobile and web apps and it’s been great. I like how it makes it easier to store images and how it makes it easier to manipulate them on the fly.
For general storage, I haven’t found my go-to yet. I think I can use Cloudflare R2, AWS S3, or even Supabase Storage. But I haven’t had the chance to try them out yet. I don’t have web apps that need files or general storage yet.
In summary, my storage stack is:
– ImageKit (for images)
– Cloudflare R2, AWS S3, or Supabase Storage (for general storage)
💰 Cost
With this setup, I usually range around $20–$30 since that’s the cost of the VPS in DigitalOcean I like to pick. I think we can get a little cheaper but I’m good with that option for my needs. I think you can also buy from Hetzner which might be more cheaper than DigitalOcean.
Overall, a bunch of other services have generous free tiers as well — so if you just want to test some waters, those will be helpful!
⚡️ Going Super Saiyan Mode?
Building a reliable web stack requires not only the right tools but also reliable hardware to ensure a smooth process. Having the machines that can power it all up can make the difference.
That’s where Gigatech Gadgets comes in. Whether you’re looking for a new laptop, desktop, or server, they have the right hardware for you.
Come check out their website at Gigatech Gadgets and see what they have to offer!
🚀 Conclusion
This stack has been proven to work for me and helped me build web apps faster. I think it’s important to have a solid stack that you can rely on. It’s not always about using the latest tools or technologies, but it’s about using the right tools for the job.
I also know some other tools but most of the time this stack is enough to build the web apps I need. I also like how these tools can be paired together and how they work well together.
It’s not perfect, but it’s been working for me to execute my ideas and build web apps faster.
I hope this stack can help you build your web apps faster as well. Or better yet, make this stack the starting point of your stack that you can rely on. That would be much better!
As always, if you have any questions or suggestions, feel free to leave a comment below. I’d love to hear from you.
