Supabase Message Board

📌 Overview

A modern message board built with:
✔ React + TypeScript (strict typing)
✔ Supabase (Auth + PostgreSQL)
✔ Row-Level Security (RLS) for data safety

Developed as a full-stack learning project between May 5-20, 2025

✨ Features

• Realtime Messages
  Fetch and display posts with Supabase subscriptions
• Secure Auth
  Google/GitHub login + custom React hook for session management
• Fine-Grained Permissions
  PostgreSQL RLS policies control CRUD operations
• End-to-End Testing
  Playwright tests for critical user flows

🛠️ Tech Stack

• React 18: A JavaScript library for building interactive UIs with hooks.
• TypeScript: Strongly typed JavaScript for scalable frontend code.
• Supabase: Open-source Firebase alternative with PostgreSQL and Auth.
• PostgreSQL RLS: Row-level security for granular database permissions.
• React Router v6: Client-side routing for single-page applications.
• Playwright: End-to-end testing for reliable user flows.
• Netlify: Cloud platform for deploying static and serverless sites.
• Docker: Containerization for local Supabase development.

⚡ Quick Start

1. Set Up Supabase:

   supabase init  
   supabase start  

2. Run Frontend:

   npm install  
   npm run dev  

3. Run Tests:

   npx playwright test  

4. Access App:
   Visit http://localhost:3000

📂 Project Structure

supabase-message-board/  
├── src/  
│   ├── hooks/              # Custom hooks (e.g., `useSession`)  
│   ├── components/         # UI (PostList, AuthButtons)  
│   ├── contexts/           # React context providers  
│   ├── types/              # TypeScript interfaces  
│   └── utils/              # Supabase client config  
├── tests/                  # Playwright E2E tests  
├── supabase/               # Local DB migrations + RLS policies  
├── Dockerfile              # Supabase CLI config  
└── README.md  

📚 Development Notes

Why Supabase?

• Replaced Firebase with open-source alternative
• PostgreSQL’s RLS enabled secure direct DB access
• Built-in Auth saved 100+ lines of custom code

Key Learnings:
✔ Writing RLS policies for multi-tenant data
✔ Creating custom React hooks for Supabase Auth
✔ Testing authenticated flows with Playwright

Conclusion

This project demonstrates how to build a scalable, secure full-stack app with:

• Minimal boilerplate (leveraging Supabase’s APIs)
• Type safety across frontend and database
• Production-ready practices (E2E tests, RLS)