stone-chat

byZeeshan Ahmed

Field Details App Name YBT Chat Type Web + Mobile (Android Native) Stack React + Vite + Capacitor + Supabase Deploy cPanel Hosting + Capacitor Android APK Colors Sky Blue, White, Black Admin URL domainname/1234/admin 📱 SCREEN-BY-SCREEN BREAKDOWN SCREEN 1 — SPLASH / LAUNCH SCREEN Kya dikhega: YBT Chat logo center mein Sky blue background ya black background 2-3 second baad auto-redirect Logic: Agar user logged in hai → Home Screen Agar nahi → Login Screen SCREEN 2 — REGISTER SCREEN (Step 1 — Sign Up Flow) Fields (Image 2 se): Full Name Email Date of Birth Gender Password Confirm Password Rules: Sab fields required Email unique honi chahiye Password confirm se match karna chahiye Submit pe → OTP ya direct Login SCREEN 3 — LOGIN SCREEN Fields: Email Password "Forgot Password?" link "Create Account" button → Register Screen SCREEN 4 — HOME SCREEN (Main Chat List) Header: Left: "YBT Chat" title Right: Search icon + New Chat / Pencil icon Body — Chat List: Har chat card mein: Avatar (DP) Name Last message preview Time/Date Unread count badge (blue circle) Online indicator (green dot) Bottom Navigation Bar (4 tabs): 💬 Chats (Active tab) 👥 Groups 📢 Channels / Status ☎️ Calls Search Bar: Chat list ke upar search field Type karo → filter hoga SCREEN 5 — INDIVIDUAL CHAT SCREEN Header: Back arrow Contact DP + Name + Online/Offline status Right: 📞 Voice Call + 📹 Video Call icons Chat Body: Bubbles — Sent (right, blue) / Received (left, dark gray) Timestamp har message ke neeche Double tick ✓✓ (blue = read, gray = delivered) Bottom Input Bar: 📎 Attachment icon Text input field 😊 Emoji icon ➤ Send button SCREEN 6 — GROUP CHAT SCREEN Extra features vs individual chat: Sender ka naam har bubble ke upar Group members count in header Admin badge for group admin SCREEN 7 — NEW CHAT / SEARCH USER SCREEN Flow: Search bar se user dhundo Name click karo → Chat open Public profile → Full details dikhein Private profile → Sirf DP, Name, Username dikhega (Image 3) SCREEN 8 — USER PROFILE SCREEN (Kisi aur ka) Public Profile dikhega: DP Full Name Username Bio Mutual groups Message button Private Profile dikhega: Sirf DP Name Username Message button SCREEN 9 — MY PROFILE / SETTINGS SCREEN Section 1 — Profile Info (Image 3): Apna DP change Name edit Username (sirf ek baar change, phir 5 din baad dobara) Section 2 — Theme & UI Customization (Image 3): Color theme customization screen Application ke color combinations Style customization Dark mode / Light mode toggle Aur bhi UI options Section 3 — Privacy Settings (Image 3): Profile Public ya Private toggle Public → Poori profile dikhti hai search mein Private → Sirf DP + Name + Username dikhta hai Section 4 — Account Settings: Change password Change email Logout Delete account SCREEN 10 — CALLS SCREEN Tabs: Recent calls list Voice vs Video call icon Missed calls (red) Incoming/Outgoing indicator SCREEN 11 — STATUS / CHANNELS SCREEN Stories style: Top mein circular avatars "+" Add Status Neeche friends ki status list 🔐 ADMIN PANEL — domainname/1234/admin Login: Email + Password (set at first-time creation, fixed) No registration option — admin sirf ek hoga Dashboard: Total users count Active users today Total messages New registrations graph User Management: Users ki full list Search by name/email Edit user details Delete user Ban/Unban user Status toggle (Active / Suspended) Analytics: Daily active users Message volume Registration trends ⚠️ Admin UI basic rahega — no fancy design needed 📐 TECHNICAL REQUIREMENTS Frontend: React + Vite Mobile responsive + Desktop responsive Capacitor wrap → Android APK Android Note (Image 2): App Android par full screen nahi hogi — status bar aur navigation buttons dikhne chahiye, warna user experience kharab hota hai Backend: Supabase (Auth + Database + Realtime + Storage) Hosting: cPanel pe web deploy Capacitor se Android native APK 🗂️ DATABASE TABLES (Supabase) Table Key Fields users id, full_name, username, email, dob, gender, avatar_url, is_private, last_seen messages id, sender_id, receiver_id, chat_id, content, type, is_read, created_at chats id, type (personal/group), created_at chat_members chat_id, user_id, role (admin/member) calls id, caller_id, receiver_id, type, duration, status status_updates id, user_id, media_url, expires_at ✅ FEATURE CHECKLIST Feature Status Register / Login ✅ Required Chat (1-on-1) ✅ Required Group Chat ✅ Required Voice/Video Call ✅ Required Status/Stories ✅ Required Search Users ✅ Required Public/Private Profile ✅ Required Theme Customization ✅ Required Dark/Light Mode ✅ Required Username (5-day lock) ✅ Required Admin Panel ✅ Required Android APK ✅ Required cPanel Deploy ✅ Required