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

No preview

Comments (0)

No comments yet. Be the first!

System Requirements

System Requirement Document

System Requirements Document (SRD)

Project Name: stone-chat

1. Introduction

Welcome to the System Requirements Document (SRD) for stone-chat, a cutting-edge chat application designed to provide seamless communication experiences for users in India and beyond. This document outlines the functional and non-functional requirements, technical specifications, and design concepts for the project.

The goal of stone-chat is to deliver a robust, user-friendly platform for one-on-one and group chats, voice/video calls, status updates, and customizable themes, while ensuring privacy and offline functionality.

This SRD has been tailored to meet the needs of Zeeshan Ahmed and incorporates locale-specific considerations such as timezone (IST), cultural preferences, and user expectations.

Page 1 of 8

2. System Overview

stone-chat is a web and mobile application designed for communication and social interaction. The system will include:

  • Core Features: Chat (personal and group), voice/video calls, status updates, and user profile management.
  • Customization: Theme and UI personalization, including light/dark mode and color schemes.
  • Privacy Controls: Public/private profile toggles and secure account settings.
  • Offline Functionality: Cached chats and drafts accessible without internet.
  • Admin Panel: A simple yet powerful dashboard for user and analytics management.

The application will support Android devices via a native APK and web deployment through cPanel hosting.

3. Functional Requirements

Page 2 of 8

As User:

  • I should be able to register and log in to the application.
  • I should be able to chat one-on-one and in groups.
  • I should be able to make voice and video calls.
  • I should be able to upload statuses from my gallery or share them directly from other applications.
  • I should be able to view and interact with statuses uploaded by my friends.
  • I should be able to customize the application theme and toggle between light and dark modes.
  • I should be able to set my profile as public or private.
  • I should be able to edit my profile details, including my username (with a 5-day lock).
  • I should be able to access chats offline and resume typing drafts without internet.

As Admin:

  • I should be able to log in to the admin panel using a fixed email and password.
  • I should be able to view analytics such as total users, active users, and message volume.
  • I should be able to manage users (search, edit, delete, ban/unban).
  • I should be able to toggle user status (active/suspended).

4. User Personas

Page 3 of 8

1. Regular User

  • Description: Individuals using the app for personal communication.
  • Needs: Seamless chat, calls, status updates, and customization options.
  • Behavior: Active on chats, uploads statuses, and engages with friends.

2. Admin

  • Description: The sole administrator managing the platform.
  • Needs: Access to analytics, user management, and system control.
  • Behavior: Monitors user activity and ensures smooth operation of the platform.

5. Visuals Colors and Theme

Unique Color Palette for stone-chat:

  • Background: #F3F8FF (Soft Sky Blue)
  • Surface: #FFFFFF (Pure White)
  • Text: #2E3A59 (Deep Navy Blue)
  • Accent: #FF6F61 (Vibrant Coral)
  • Muted Tones: #A6B1C0 (Calm Gray-Blue)

This palette reflects a modern, clean aesthetic while maintaining a friendly and approachable vibe.

6. Signature Design Concept

Page 4 of 8

Interactive Floating Chat Islands

The homepage of stone-chat will feature a bold and unforgettable design:

  • Visual Concept: A 3D floating island interface where each island represents a feature (Chats, Groups, Calls, Status). Users can "fly" between islands by swiping or clicking.
  • Animations: Smooth transitions as islands rotate and zoom into focus. Hover effects will reveal additional details about each feature.
  • Color Shifts: Islands subtly change colors based on the time of day (morning = soft blue, evening = coral tones).
  • Micro-Interactions: Chat bubbles float around the "Chats" island, and clicking them opens previews of recent conversations.

This design will create an immersive and playful experience, making the app instantly memorable.

7. Non-Functional Requirements

  • Performance: The app must load within 2 seconds on both web and mobile platforms.
  • Scalability: Support up to 1 million users concurrently.
  • Security: Implement robust authentication and encryption for user data.
  • Reliability: Ensure 99.9% uptime for the application.
  • Accessibility: Adhere to WCAG 2.1 standards for accessibility.

8. Tech Stack

Page 5 of 8

Frontend:

  • React for Web
  • React Native for Mobile

Backend:

  • Python
  • FastAPI

Database:

  • MySQL (preferred) or MariaDB for relational data
  • MongoDB for NoSQL requirements
  • WeaviateDB for vector-based queries

AI Models:

  • GPT 5.4 for user-friendly responses
  • Claude 4.6 Opas for academic or coding work
  • Gemini 3.1 Pro for conversational AI
  • Google Nano Banana for image generation

AI Tools:

  • Litellm for LLM routing
  • Langchain
Page 6 of 8

Orchestration:

  • Docker and docker-compose for local development
  • Kubernetes for server-side orchestration

9. Assumptions and Constraints

Assumptions:

  • Users will primarily access the app via Android devices and web browsers.
  • Internet connectivity will be intermittent for some users, necessitating offline functionality.
  • Status uploads will include images and videos from both gallery and external apps.

Constraints:

  • Admin panel design will remain basic to prioritize functionality over aesthetics.
  • Deployment will be limited to cPanel hosting and Android APK distribution.
Page 7 of 8

10. Glossary

  • APK: Android Package Kit, used for distributing and installing apps on Android devices.
  • Capacitor: A cross-platform app runtime for building native mobile apps.
  • Supabase: An open-source backend-as-a-service platform.
  • WCAG: Web Content Accessibility Guidelines, standards for accessible web design.
  • LLM: Large Language Model, used for AI-driven responses.

End of Document

Page 8 of 8

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

No user flows yet.

The User Flow Agent will generate per-persona navigation diagrams after SRD updates.

No completed page designs yet.

Completed design pages will appear here when they are ready to preview.

No user flows yet.

The User Flow Agent will generate per-persona navigation diagrams after SRD updates.