Back to articles
engineering • September 9, 2026 • 8 min read

The Modern Web Stack on a Budget: Free‑Tier Cloud, Edge Functions, and Serverless Backends

Learn how to stitch together free‑tier cloud services, edge functions, and serverless databases to build and scale side projects without breaking the bank.

Building a side project that can handle real traffic used to mean picking a cheap VPS and hoping it would survive a spike. Today the modern web stack lets you assemble a production‑grade architecture from free‑tier services, and the cost is literally zero until you outgrow the limits.

The Big Picture

A typical modern stack consists of three layers:

When each layer lives on a free tier, you get:

The challenge is stitching these pieces together without creating a tangled mess of providers. Below is a practical, step‑by‑step guide that shows how to do exactly that.

1. Choose a Free‑Tier Static Frontend Host

Three services dominate the free static‑site market, and all of them give you a global CDN out of the box:

Pick one based on your preferred CI workflow. For this guide we’ll use Vercel because its integration with Next.js makes edge‑function deployment seamless.

2. Edge Functions for Dynamic Logic

Edge functions run on the CDN’s edge nodes, giving you sub‑second latency and free‑tier request limits that are usually generous enough for side projects. Use them for:

Example: A Tiny Auth Guard

Create a file pages/api/_middleware.js (Next.js 13+ uses middleware.ts). The function runs on every request that matches the folder.

import { NextResponse } from 'next/server'

export function middleware(request) {
  const token = request.cookies.get('auth')?.value
  if (!token) {
    return NextResponse.redirect(new URL('/login', request.url))
  }
  // In a real app you would verify the JWT here, but keep it cheap.
  return NextResponse.next()
}

Deploying this to Vercel automatically places the middleware at the edge. No server, no cost beyond the free request quota.

3. Serverless Backend Options

You need persistent storage and possibly background processing. The following services offer a usable free tier:

Using Supabase as a Primary Database

Supabase gives you a Postgres instance with a RESTful API and real‑time subscriptions. Here’s how to connect from a Next.js edge function:

import { createClient } from '@supabase/supabase-js'

const supabase = createClient(
  'https://YOUR-PROJECT.supabase.co',
  'public-anon-key'
)

export default async function handler(req, res) {
  const { data, error } = await supabase
    .from('todos')
    .select('*')
    .order('created_at', { ascending: false })

  if (error) return res.status(500).json({ error: error.message })
  return res.status(200).json(data)
}

Deploy this as a Vercel edge function (/api/todos) and you have a zero‑maintenance API that scales automatically.

4. Authentication Without a Server

Managing auth is often the most complex part of a side project. Two free‑tier services make it painless:

Quick Auth0 Integration

Add the Auth0 SDK to your frontend:

import createAuth0Client from '@auth0/auth0-spa-js'

let auth0 = null

export async function initAuth() {
  auth0 = await createAuth0Client({
    domain: 'YOUR_DOMAIN',
    client_id: 'YOUR_CLIENT_ID',
    redirect_uri: window.location.origin,
  })
}

export async function login() {
  await auth0.loginWithRedirect()
}

export async function logout() {
  await auth0.logout({ returnTo: window.location.origin })
}

The SDK stores a JWT in a cookie, which your edge‑function middleware can read and verify using the Auth0 JWKS endpoint. This pattern avoids any custom server code.

5. Background Jobs & Cron‑like Tasks

Free tiers also give you ways to run scheduled jobs:

Example: Daily Cache Warm‑up with Cloudflare Workers

addEventListener('scheduled', event => {
  event.waitUntil(warmCache())
})

async function warmCache() {
  const urls = [
    'https://example.com/api/todos',
    'https://example.com/api/stats',
  ]
  await Promise.all(urls.map(url => fetch(url)))
}

Deploy this script on Cloudflare Workers and set a cron trigger (0 0 *) via the dashboard. The free tier covers 1 M triggers, which is more than enough for most hobby projects.

6. CI/CD – Keep Deploys Free and Fast

All three static hosts (Vercel, Netlify, Cloudflare Pages) integrate directly with GitHub, GitLab, or Bitbucket. The workflow looks like:

Minimal GitHub Action for Lint + Test

name: CI
on: [push, pull_request]
jobs:
  build:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v3
      - name: Install Node
        uses: actions/setup-node@v3
        with:
          node-version: '20'
      - run: npm ci
      - run: npm run lint
      - run: npm test

The free tier gives you 2,000 minutes per month, which is plenty for a small repo.

7. Monitoring Costs and Usage

Even free tiers have hard limits. Exceeding them can result in throttling or unexpected charges. Adopt a habit of checking usage daily:

Set up a simple webhook that alerts you via Slack when you cross 80 % of a quota. The code is trivial:

import fetch from 'node-fetch'

export async function checkUsage() {
  const resp = await fetch('https://api.vercel.com/v9/usage', {
    headers: { Authorization: `Bearer ${process.env.VERCEL_TOKEN}` },
  })
  const data = await resp.json()
  if (data.bandwidth > 0.8 * data.bandwidthLimit) {
    await fetch(process.env.SLACK_WEBHOOK_URL, {
      method: 'POST',
      body: JSON.stringify({ text: '⚠️ Vercel bandwidth > 80%' }),
      headers: { 'Content-Type': 'application/json' },
    })
  }
}

Run this as a daily GitHub Action or a Cloudflare Worker to stay ahead of surprise limits.

8. Putting It All Together – A Sample Architecture

The data flow looks like:

1. User visits the static site (served from Vercel’s edge CDN). 2. Browser requests /api/todos; Vercel edge middleware checks the JWT cookie. 3. If valid, the edge function forwards the request to Supabase via its generated REST endpoint. 4. Supabase returns JSON; the edge function relays it to the client. 5. A nightly Cloudflare Worker hits /api/todos to keep the edge cache warm.

All of this lives under the free tier limits for a modest traffic level (a few thousand daily visitors). If you ever need more, the upgrade paths are straightforward: bump Vercel to Pro, increase Supabase storage, or switch to a paid Cloudflare Workers plan.

9. When the Free Tier Is Not Enough

Even the most generous free tiers have ceilings. Keep an eye on these warning signs:

If you hit a wall, consider these low‑cost upgrades:

Because the architecture is already modular, swapping a component for a paid tier is usually a matter of changing an environment variable.

Conclusion

The modern web stack no longer forces you to choose between "cheap" and "scalable". By leveraging free‑tier static hosting, edge functions, and serverless backends, you can launch a side project that behaves like a production service while keeping the bill at zero. The key is to pick services with generous free limits, keep each layer thin, and monitor usage proactively. With this recipe in hand, your next hobby app can handle real users without ever needing to spin up a traditional VM.

Need something like this built?

I work on full-stack web apps — backend systems, APIs, and the front-ends that sit on top. If this post was useful and you've got a project that needs it, I'd like to hear about it.

Get in touch See my work

Want future posts like this?

No mailing list yet — for now, email me and I'll let you know when something new goes up.

Email me