Supabase + React + Hono Proof of Concept

A simple proof of concept app demonstrating:

• Supabase authentication (email/password)
• React frontend with TypeScript
• Hono backend API
• Supabase Postgres database

1. Create a Supabase project at https://supabase.com
2. Get your project URL and anon key from Settings > API
3. Set environment variables in Val Town:
   • SUPABASE_URL: Your Supabase project URL
   • SUPABASE_ANON_KEY: Your Supabase anon key

• backend/ - Hono API server
• frontend/ - React frontend
• shared/ - Shared types and utilities

• User registration and login
• Protected routes
• User profile management
• Simple dashboard

The app uses a simple profiles table that extends Supabase's built-in auth.users:

-- Create profiles table
create table profiles (
  id uuid references auth.users on delete cascade,
  updated_at timestamp with time zone,
  username text unique,
  full_name text,
  avatar_url text,
  
  primary key (id)
);

-- Set up Row Level Security (RLS)
alter table profiles enable row level security;

-- Create policy for users to see their own profile
create policy "Users can view own profile" 
  on profiles for select 
  using ( auth.uid() = id );

-- Create policy for users to update their own profile
create policy "Users can update own profile" 
  on profiles for update 
  using ( auth.uid() = id );