Building Frontend-Only Apps with Supabase or Neon (Free Tier Guide)

Building Frontend-Only Apps with Supabase & Neon (Free Tier Guide)

Frontend-only apps don’t mean feature-poor. With modern Backend-as-a-Service (BaaS) tools like Supabase and Neon, you can build secure, scalable, and dynamic apps without managing servers. This guide walks through how to use Supabase functions and PostgreSQL databases (via Supabase or Neon) with React or Next.js, all within free-tier constraints.

Why Supabase & Neon?

Feature
Supabase (Free Tier)
Neon (Free Tier)

Auth
Built-in (email, OAuth, magic links)
Not included

DB
PostgreSQL + Row-level security
PostgreSQL with branching

Functions
Edge Functions (Deno-based)
No serverless functions

Realtime
Yes (via websockets)
No

Storage
Yes (file uploads)
No

Rate Limits
Generous for prototyping
Generous for dev use

Use Supabase for full-stack features (auth, storage, functions). Use Neon if you want raw PostgreSQL with branching and CI/CD-friendly workflows.

Setup: Supabase + React/Next.js

Install Supabase client

npm install @supabase/supabase-js

Initialize client

// lib/supabaseClient.ts
 import { createClient } from '@supabase/supabase-js';
 const supabase = createClient(
  process.env.NEXT_PUBLIC_SUPABASE_URL!,
 process.env.NEXT_PUBLIC_SUPABASE_ANON_KEY!
 );
 export default supabase;

Use Supabase Auth

const { data, error } = await supabase.auth.signUp({
   email: '[email protected]',
   password: 'securepassword',
 });

Query Database

const { data, error } = await supabase
   .from('todos')
   .select('*')
   .eq('user_id', user.id);

Supabase Edge Functions (Free Tier)

Edge Functions are Deno-based and deploy globally. Perfect for logic you don’t want exposed on the client.

Install CLI

npm install supabase --save-dev

Create a function

// supabase/functions/hello-world/index.ts
 export const handler = async (req: Request) => {
   return new Response('Hello from Supabase Edge!');
 };

Deploy

supabase functions deploy hello-world

Call from frontend

const res = await fetch('/functions/v1/hello-world');
 const text = await res.text();

Neon + Next.js (Free Tier)

Neon is great for raw SQL workflows, branching, and CI/CD.

1. Create Neon DB & branch
   • Use dashboard to create a project and branch.
   • Get connection string (Postgres URI).
2. Use with Prisma or Drizzle

npm install prisma
 npx prisma init
 datasource db {
   provider = "postgresql"
   url      = env("DATABASE_URL")
 }

Deploy Neon branch for preview environments

• Each branch gets its own endpoint.
• Ideal for staging or feature previews.

⚠️ Neon has no auth or functions pair with Clerk/Auth.js or Supabase Auth if needed.

Security Tips

• Use Row-Level Security (RLS) in Supabase to restrict access per user.
• Never expose service keys on frontend use Edge Functions or proxy.
• For Neon, use serverless functions (e.g., Vercel API routes) to handle DB access securely.