🎯 Vibe Chat — Complete Hosting Guide

A full-featured real-time chat app. This guide takes you from zero to live in ~15 minutes.

---

✅ Features Included

Feature	Status
Sign up / Sign in / Forgot password	✅
Public channels (#general, #random, custom)	✅
Direct messages (1-on-1)	✅
Real-time messages (no refresh needed)	✅
Online / Away / Busy / Offline status	✅
Typing indicator	✅
Emoji picker	✅
Message reactions (👍❤️😂 etc.)	✅
File & image sharing	✅
Image lightbox viewer	✅
Drag-and-drop file upload	✅
Search messages in a chat	✅
Search chats in sidebar	✅
Unread message count badges	✅
Read receipts (DMs)	✅
Delete your own messages	✅
Quick reply (quote a message)	✅
Member list / profile panel	✅
Update display name & avatar	✅
Mobile-responsive (Android, iOS, any browser)	✅
Works on Windows, Mac, Linux browsers	✅
Dark theme, beautiful UI	✅

---

📁 File Structure

chatapp/
├── index.html ← Login / Signup page
├── app.html ← Main chat page
├── css/
│ ├── auth.css ← Auth page styles
│ └── app.css ← Chat app styles
├── js/
│ ├── config.js ← ⚠️ YOU FILL THIS IN
│ ├── auth.js ← Auth logic
│ └── app.js ← Chat logic
├── supabase_setup.sql ← Run this in Supabase
└── README.md ← This file

---

🚀 Step-by-Step Setup

Step 1 — Create Supabase Project

1. Go to supabase.com → Sign up (free)
2. Click New Project
3. Choose a name (e.g. vibe-chat), set a strong database password, pick a region close to your users (e.g. ap-south-1 for India)
4. Wait ~2 minutes for it to provision

Step 2 — Run the SQL Schema

1. In your Supabase dashboard → SQL Editor → New Query
2. Open supabase_setup.sql from this project
3. Paste the entire contents → Click Run
4. You should see "Success" — all tables, policies, triggers, and storage buckets are created

Step 3 — Enable Realtime

1. Supabase dashboard → Database → Replication
2. Under Tables, toggle ON:
   • channel_messages
   • direct_messages
   • profiles

Step 4 — Get Your API Keys

1. Supabase dashboard → Settings (gear icon) → API
2. Copy:
   • Project URL → looks like https://abcdefgh.supabase.co
   • anon / public key → long string starting with eyJ...

Step 5 — Configure the App

Open js/config.js and replace the placeholder values:

constSUPABASE_URL='https://YOUR_PROJECT_ID.supabase.co';// ↑ paste your Project URL hereconstSUPABASE_ANON_KEY='YOUR_ANON_KEY_HERE';// ↑ paste your anon key here

Save the file.

Step 6 — Enable Email Auth (optional but recommended)

1. Supabase → Authentication → Providers
2. Make sure Email is enabled
3. For development: go to Authentication → Settings → turn OFF "Confirm email" (so users can sign in immediately without confirming)
4. For production: leave email confirmation ON and configure your SMTP in Settings → Email

---

🌐 Hosting on GitHub Pages (Free, Easiest)

6a — Push to GitHub

# In your project folder:
git init
git add .
git commit -m "Initial commit - Vibe Chat"# Create a new repo on github.com, then:
git remote add origin https://github.com/YOUR_USERNAME/YOUR_REPO.git
git branch -M main
git push -u origin main

6b — Enable GitHub Pages

1. Your GitHub repo → Settings → Pages
2. Under Source → select Deploy from a branch
3. Branch: main, Folder: / (root)
4. Click Save
5. Wait 1-2 minutes → your site is live at:

   https://YOUR_USERNAME.github.io/YOUR_REPO/
   

6c — Update Supabase Auth Redirect URLs

1. Supabase → Authentication → URL Configuration
2. Site URL: https://YOUR_USERNAME.github.io/YOUR_REPO
3. Redirect URLs: add https://YOUR_USERNAME.github.io/YOUR_REPO/index.html

---

🔥 Alternative: Host on Netlify (Recommended for custom domain)

1. Go to netlify.com → sign up
2. Add new site → Import from Git → connect GitHub
3. Select your repo
4. Build settings: leave blank (it's plain HTML)
5. Click Deploy site
6. Get a free URL like https://vibe-chat.netlify.app
7. In Supabase Auth settings, set Site URL to your Netlify URL

---

🔥 Alternative: Host on Vercel

npm install -g vercel
cd chatapp
vercel
# Follow prompts — it's live in seconds

---

📱 Mobile App (PWA — Add to Home Screen)

The app works great in mobile browsers. To make it installable:

Add this to the <head> of both index.html and app.html:

<linkrel="manifest" href="manifest.json" /><metaname="theme-color" content="#6c63ff" /><metaname="apple-mobile-web-app-capable" content="yes" />

Create manifest.json:

{
"name": "Vibe Chat",
"short_name": "Vibe",
"start_url": "/index.html",
"display": "standalone",
"background_color": "#0d0e12",
"theme_color": "#6c63ff",
"icons": [
{ "src": "icon-192.png", "sizes": "192x192", "type": "image/png" },
{ "src": "icon-512.png", "sizes": "512x512", "type": "image/png" }
]
}

Users on Android Chrome can then tap "Add to Home Screen" for an app-like experience.

---

🔒 Security Notes

• Never commit real API keys to a public GitHub repo
• The anon key is safe to expose in frontend code (Supabase designed it this way) — your Row Level Security policies protect the data
• For extra security: in Supabase → Authentication → enable "Restrict sign-ups to certain email domains" if you only want your friends to join

---

🛠 Troubleshooting

Problem	Fix
"Invalid API key" error	Check js/config.js — no extra spaces or quotes
Messages don't appear in real-time	Enable Realtime for tables in Supabase dashboard
Can't upload files	Check storage bucket policies in Supabase → Storage
Email confirmation loop	Disable email confirmation in Supabase → Auth → Settings
CORS error	Your Supabase URL might be wrong — check for typos
Blank page	Open browser Console (F12) and check for errors

---

📧 Support

If you run into issues, open the browser console (F12 → Console tab) and check for red error messages — they'll tell you exactly what's wrong.

Happy chatting! 🎉