Creating hobby web apps for free and at scale has never been easier!

As a developer who loves to create and build new things, we are living in an age where getting access to the tools to create apps at scale for free/low cost is so accessible.

I remember starting my career building websites and web apps with .NET Webforms and having to hire a server to install IIS onto it. Just to be able to get my web app running. I could then either find a hosted solution for a SQL database (most of the accessible ones were in MySQL). Or I could use that same server to provision an MSSQL instance, which would sometimes bring licensing concerns. Development especially with .NET a few years back was heavily restricted to Windows and open-source was not at the forefront of development for major frameworks.

Fast forward to today's ecosystem for building full-stack applications. We are truly blessed to be able to do this, with beautifully designed APIs for developers. To think that you can go from idea to product at 0 cost with sophisticated infrastructure at your doorstep. Is just mind-blowing. Had I been able to access these sorts of resources earlier on in my career, it would have done me wonders.

Sure, the technologies have changed since then. A lot of what made these hosting solutions not very accessible back a few years ago was OS constraints and other sorts of complexities. But with cloud adoption at an all-time high, we have untapped potential to be able to just let our creative minds run free as developers.

I do admit, I have steered away from using .NET for my frontends these days. There are far more appealing alternatives.

So in this article, I just wanted to provide developers with some helpful resources that I have come across, that let me build applications at scale. For free or at minimal cost whilst being intuitive to us developers.

To set the scene, my focus is NextJs as that is what a lot of my hobby projects are built with for both my FE and BE.

Hosting

Vercel - This is my recommended hosting provider for front-end apps. The DX of the platform is top class and it's really easy to scale with them. Everything from Vercel subdomains for your apps, cicd build pipelins, logging, alerting, analytics etc is included for free. Sounds crazy to say really.
Netlify - If you fancy something a little less polished than Vercel then Netlify is a great alternative. It has a lot of similarities to Vercel but lacks when you start to consider technologies such as TurboRepo which is native to Vercel. Netlify has been a good solution for me, but always felt a little rough around the edges. If Vercel ever collapsed for some reason, Netlify would be my de facto backup!

Just as a side note, both of these platforms have very generous free tiers. So make sure to use it all up!

Database

NeonDb - A serverless Postgresql offering with generous free tier limits. NeonDb is a great solution designed for those who want to leverage branching with their databases. Branching of databases allows you to migrate changes in a more controlled flow, just like we migrate our changes via git for code. Schema changes can be more structured in their change process. Even with this functionality and it is serverless. It certainly does not compromise on speed. As of right now, this is my database provider of choice for building hobby apps!
PlanetScale - A serverless MySQL offering again with generous free tier limits. Similar to NeonDb planetscale allows you to branch and migrate your db changes. It's very performant and is so easy to scale large applications as they continue to grow. Having used this in a few side-projects I can comfortably say that they are a great offering to choose from. Combined with Neon, you can have a tonne of db power in the back of your pocket, for free!
Upstash Redis - A serverless Redis provider accessed via HTTPS with a great npm package for interacting with its service. I really can't fault this one. It's so easy to just plug and play from their intuitive console and usage within your code. A great solution for those needing quick KV storage with generous free tier limits and an easy-to-use API.

Queue

Upstash QStash - A serverless queueing service for those looking to quickly get up and running via HTTPS. I have personally used this in one of my side projects and it's a fantastic tool. There is minimal setup apart from picking topic names and setting up API endpoints for it to fire off to. After that, it does the work for you and gives you granular logging with it. A great tool in a hobby developer's arsenal.

Front-end development technologies

NextJS - Built on top of react for the front end and node for its backend offering. Next is a great framework to build end-to-end web apps with brilliant speed, web optimization and framework maturity. It provides the ability to run SSG (Static Site Generation), ISR (Incremental Static Regeneration), SSR (Server Side Rendering), and CSR (Client Side Rendering) for all of your pages. As well as the respect it has within the developer ecosystem. Out of the box of a new next app, you get the ability to write your front-end code with React. But also the ability to have API endpoints served via its backend node server. If you choose to host on Vercel you can also benefit from running API endpoints serverless via Edge Locations, meaning the APIs are running closer to the user giving obvious benefits (performance being the main one).
Astro - A great technology for those looking to build MPA (Multi-Page web applications) with html/css/js as well as any modern frontend tech. Astro has blazing speed thanks to it's static compilation of pages and, a great developer ecosystem with it. It primarily focuses on performance and its statistics speak for themselves. In addition to this, you can utilise technology within the Astro framework such as Astro Islands. This allows you to build separate components, with different frameworks. So you could have a menu bar built in Vue, a header built in Svelte and the main content in React. This is a great value proposition for those development teams that need to make do with the varied skill sets at play. But also those who want to build apps and not be restricted to a certain frontend tech.
Vite - If you just want to have a client-side bundled application. Then this is the technology choice for you. This is ideal for developers who have their problem with apis solved and don't intend to do any server-side rendering. For example, the react dev team recommend Vite when NextJS and Remix are not suited to your problem.

Monorepo solution of choice

TurboRepo - I have used this in professional settings and personal settings. I can confidently say that having a mono repo build tool like TurboRepo is a blessing for modern-day web development. In a nutshell, it makes splitting your code into apps, packages and much more a lot easier. By providing a centralised entry point for package management, build caching and certain optimizations throughout the solution. It's not bespoke to a framework, it can work for pretty much any js framework-built code. It reduces the overhead of rebuilding already built or already computed steps in a build when the code itself hasn't changed. This is a huge win for dev speed as we look to build fast and ship fast. As a hobby dev working on a project, if you want to split out your UI components, logic and apps from each other. You can do this easily within a mono repo solution using turbo and hook it up to a cicd pipeline easily. Providing professional setups at no price.

Summary

So, the technologies above are all what I am using right now or have used that I believe will be useful to other developers.

I could go very in-depth and detail all the backend options to host your APIs. For example:

Azure - Via serverless Azure Functions or hosted on Azure App Service.
AWS - Via Lambda, Elastic Beanstalk or EC2 Instances.

Then you have the choice of technology to build your APIs:

Typescript - with a node server, wrapped in a framework of your choice (express, Nest etc).
Dotnet - Web API.

The list could go on! Write your API in whatever language you want, you have a lot of easy access to deploy and scale them. I have often found that if I want to write some backend-specific service or code, it's a lot easier to find a cloud offering in the typical big providers compared to when I want to provision an FE stack. For example, deploy my set of serverless functions (Lambda, Cloudflare workers, Azure Functions). Easy done. Deploy my Next App, well... every offering gives different benefits and it's hard to pick i.e. Azure static web apps, Vercel etc. Plus pricing tiers vary etc.

Anyway, I hope this has been helpful and thank you for reading my article. All the technologies have been hyperlinked as you read through the article which I thought was better than just having a dump of links at the bottom here.

Leave me your feedback and share your suggested technology choices for building hobby apps! 😊