███████╗░█████╗░███╗░░██╗███╗░░██╗░█████╗░░██████╗░█████╗░
██╔════╝██╔══██╗████╗░██║████╗░██║██╔══██╗██╔════╝██╔══██╗
███████╗███████║██╔██╗██║██╔██╗██║███████║╚█████╗░███████║
╚════██║██╔══██║██║╚████║██║╚████║██╔══██║░╚═══██╗██╔══██║
███████║██║░░██║██║░╚███║██║░╚███║██║░░██║██████╔╝██║░░██║
╚══════╝╚═╝░░╚═╝╚═╝░░╚══╝╚═╝░░╚══╝╚═╝░░╚═╝╚═════╝░╚═╝░░╚═╝
Sannasa is a modern, serverless social media and real-time chat platform built for premium aesthetics and fluid interactions. Powered by a hybrid Cloudflare Workers and Firebase architecture, it features a glassmorphism design, real-time message sync, live presence tracking, audio/video call integration, and private storage backed by GitHub.
Official website: sannasa.udmodz.site
| 🧩 Feature | 📝 Description |
|---|---|
| 💬 Direct Messaging | Fluid real-time chats with emoji reactions, media sharing, and stickers |
| 👥 Groups & Channels | Community interactions and broadcasting channels with followers |
| 📞 Live Video Calls | Integrated RTDB-driven audio and video calls |
| 🛡️ Premium Admin Panel | Live user verification, banning controls, and system-wide broadcasts |
| 🐙 GitHub DB Storage | Serverless image, voice, and media hosting directly via GitHub API |
| 🌌 Glassmorphism UI | Harmonious dark theme with micro-animations and custom wallpapers |
graph TD
A["🌐 Web App (React + Vite)"] -->|"Real-time Sync"| B["🔥 Firebase (Auth, Firestore, RTDB)"]
A -->|"API Requests"| C["⚡ Cloudflare Workers"]
A -->|"Upload Media"| D["🐙 GitHub Storage DB"]
style A fill:#4000ff,color:#fff,stroke:#7c3aed
style B fill:#FFCA28,color:#000,stroke:#FFA000
style C fill:#F38020,color:#fff,stroke:#D9730D
style D fill:#333,color:#fff,stroke:#666
|
React v18 |
Vite Bundler |
Firebase Database & Auth |
Workers Serverless API |
💻 1. Local Setup
# Clone the repository
git clone https://github.com/udmodz0/Sannasa.git
cd Sannasa
# Install dependencies
npm install
# Configure Environment variables
cp .env.example .env
# Set up your Firebase Config & Admin login credentials in .env
# Run local development server
npm run dev🔥 2. Firebase Environment Setup
Add the following environment variables to your .env file (which is automatically ignored by Git):
VITE_FIREBASE_API_KEY=your_api_key
VITE_FIREBASE_AUTH_DOMAIN=your_auth_domain
VITE_FIREBASE_DATABASE_URL=your_database_url
VITE_FIREBASE_PROJECT_ID=your_project_id
VITE_FIREBASE_STORAGE_BUCKET=your_storage_bucket
VITE_FIREBASE_MESSAGING_SENDER_ID=your_messaging_sender_id
VITE_FIREBASE_APP_ID=your_app_id
VITE_FIREBASE_MEASUREMENT_ID=your_measurement_id
VITE_ADMIN_USER=admin_username
VITE_ADMIN_PASS=admin_password⚡ 3. Deploy to Cloudflare Workers
# Build the production bundle
npm run build
# Deploy Cloudflare Workers backend
npm run worker:deploy
Sannasa/
├── 📁 public/ # 🎨 Assets & system logs
├── 📁 src/
│ ├── 📁 components/ # 🧩 ChatWindow, ChatList, Stickers, etc.
│ ├── 📁 context/ # 🔑 AuthState & Profile context
│ ├── 📁 hooks/ # 🧠 Custom presence & auth hooks
│ ├── 📁 pages/ # 📄 Home, Admin panel, Login, Signup
│ └── 📁 services/ # 🔌 Firebase backend configuration
├── 📁 worker/ # ⚡ Cloudflare Worker backend logic
├── 📄 wrangler.toml # ⚙️ Cloudflare wrangler config
├── 📄 vite.config.js # ⚡ Vite configuration
├── 📄 .env.example # 📝 Template for environment keys
└── 📄 README.md # 📖 You are here!
