🎤 Chatty — Real‑Time Multi‑Room Chat Demo Project

Welcome to Chatty, a small—but feature‑packed—demo app you can build in under a day. It’s designed to teach you how to build a Full‑Stack web app using React and Supabase.

🏗️ What we’re building
Frontend React:

• Zustand Global state for current room
• @tanstack/react‑query Fetching, caching & realtime subscriptions
• React Hook Form Chat input & validation
• Custom CSS Glassy UI with backdrop‑filter, responsive layout & theme variables

Backend Supabase:

• Email/password Authentication & session management
• PostgreSQL with Row‑Level Security policies
• Realtime subscriptions via Postgres changes
• CRUD operations on messages and chat rooms

📚 Topics you’ll master

• Organizing a React project with pages/components structure
• Supabase authentication, session handling & RLS policy setup
• Global state management using Zustand
• Data fetching, caching & realtime updates with React Query
• Form handling & validation using React Hook Form
• Building a glassmorphic UI using CSS backdrop‑filter and responsive design
• Client‑side routing with React Router (Chat, Rooms, Create Room)
• Clean component decomposition and best practices
• Testing React components with Vitest and React Testing Library