How to build and launch a new web app for free?
Tags: webdev, productivity, startup, javascript
Published: 2022-11-15 11:48:23



# Is the good time for the software engineer gone?

As the big tech layoffs cross *Meta*, *Twitter*, *Salesforce*, Lyft, and Stripe,  some people say the good time for the software engineer is gone.  However, as a software engineer coming from ancient times myself, I think sometimes we forget to cherish what affluent circumstances we have now.  Let’s just look up to see the good assets in hand:

- Developer Tools
    
    There are more and better tools to help us handle all kinds of chores so that we can focus more on the business logic part of the coding.   It goes source code management([Git](https://git-scm.com/)), IDE([VSCode](https://code.visualstudio.com/)), and debug environment([Chrome](https://www.google.com/chrome/)) to CICD([Docker](https://www.docker.com/)). 
    
     
    
- Framework
    
    More and more frameworks are emerging and revolving of which you can stand on the shoulder. It includes frontend framework([React](https://reactjs.org/)), backend framework([Nest.js](https://nestjs.com/)), database([MongoDB](https://www.mongodb.com/)), etc. 
    

- Service
    
    Could computing not only give us the on-demand availability of computer system resources but also give birth to lots of service providers targeting particular niches or industry-specific standards, so you don’t have to reimplement it again. So besides using the service provided by AWS, you can also directly use all kinds of SaaS products like [Intercom](https://www.intercom.com/), [Stripe](https://stripe.com/), [MailChimp](https://mailchimp.com/), etc. 
    

And the best part is that lots of the assets above are free and open-source, and you can almost get answers to any question you have from the community quickly.  What a wonderful world!

![wonderful world](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/60yppwqk5vrcm27txqod.png)

# The cost of launching a new web app

Despite all the free stuff you could get from above, you usually still need to pay for two things. 

- Bandwidth
- Storage

God bless us, both have been granted.  So even if you get layoff unluckily,  if you want, you can launch your own business for free without giving another strike to your bank account. 

So let’s take a look at who are the generous guys! 

# Vercel


![Vercel](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ncuapd2z4xo3bof94npi.png)

Even if you have never heard or know about [Vercel](https://vercel.com/),  you probably have heard its son [Next.js](https://nextjs.org/).

Vercel is a cloud platform that enables developers to host websites and web services that deploy instantly, scale automatically, and require no supervision.   

Suppose your project is a normal Next.js project if you want to launch it.  Literally, all the steps you need to do is below:

1. Login with your github account
2. Import your github repository 
3. Click ‘Deploy’ 

After the deployment is finished,  your app is available for the whole world by the domain Vercel assigned to you.  

The free plan comes with 100GB of bandwidth.  Trust me, it’s the correct number, you can double-check it yourself with other limitations on [Vercel’s official website](https://vercel.com/pricing).  

 

# Supabase


![Supabase](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r3rpdkqatu32nj9sft7e.png)

If you have ever heard of Firebase, then Supabase is an open-source Firebase alternative.   It comes down to its core services: database, authentication, file storage, and auto-generated APIs. 

It is built on Postgres, so the last thing you can use is a hosted database like AWS RDS. After registering, the only thing you need to do is to create a new project to get the database connection URL

The free plan comes with up to 500MB database.  You can check the other limitation on [supabase’s official website.](https://supabase.com/pricing)  

# ZenStack


![Zenstack](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6lvdlcs3tc26mgi3fgfr.png)

With the front-end and database got managed,  normally, you still need to deploy a backend service.  Here comes the open-source library [ZenStack](https://zenstack.dev/?utm_campaign=devto&utm_medium=organic&utm_content=how_to_build_app_for_free) for modeling data and access policies in full-stack development with Next.js and Typescript. In short words, it helps bring the power of full-stack to the front end. 

Check out the below ToDo app built with the ZenStack library using Next.js and Supabase. 

[https://zenstack-nextjs-todo-demo.vercel.app](https://zenstack-nextjs-todo-demo.vercel.app/)([source](https://github.com/zenstackhq/zenstack-nextjs-todo-demo/tree/todo))

You can get the  complete tutorial on how to create this app in the below post:

{% embed https://dev.to/zenstack/how-to-build-a-collaborative-saas-product-using-nextjs-and-zenstacks-access-control-policy-1nc1 %}

The world is big,  please let me know other great options to build a web app from scratch!