plan.txt

project:
  name: DuoCall
  version: 1.0.0
  description: >
    A WhatsApp-inspired browser-based video calling application designed
    exclusively for two users per room. Built with WebRTC for peer-to-peer
    video/audio and Socket.IO for signaling and chat.

goals:
  - Mobile-first responsive UI
  - Desktop support
  - HD video and audio
  - Two users maximum per room
  - Fast room creation
  - Secure WebRTC communication
  - Built-in chat
  - Smooth animations
  - Modern WhatsApp-inspired interface

tech_stack:
  frontend:
    framework: React
    language: TypeScript
    build: Vite
    styling: TailwindCSS
    animations: Framer Motion
    icons: Lucide React

  backend:
    runtime: Node.js
    framework: Express
    realtime: Socket.IO
    signaling: WebRTC Signaling Server

  communication:
    video_audio: WebRTC
    stun_servers:
      - stun:stun.l.google.com:19302
    turn_support: true

  deployment:
    frontend: Vercel
    backend: Railway
    alternatives:
      - VPS
      - Render
      - Docker

application:
  authentication:
    required: false

  rooms:
    max_users: 2
    room_code:
      length: 8
      format: XXXX-XXXX
    auto_delete_empty_rooms: true
    auto_expire_after_minutes: 30

pages:

  home:
    features:
      - Create Room
      - Join Room
      - Paste Room Code
      - Copy Invite Link
      - Join with Enter key

  call:
    layout:

      desktop:
        left:
          - Remote Video
          - Local Preview
        right:
          - Sliding Chat Panel

      mobile:
        main:
          - Remote Video
          - Floating Local Preview

        bottom_controls:
          - Microphone
          - Camera
          - Chat
          - Screen Share
          - Settings
          - End Call

video:
  resolution:
    preferred:
      width: 1920
      height: 1080
    fallback:
      width: 1280
      height: 720

  fps: 30

  features:
    - Camera Toggle
    - Mirror Local Video
    - Camera Switch (Front/Back)
    - Fullscreen
    - Auto Reconnect

audio:
  features:
    - Echo Cancellation
    - Noise Suppression
    - Auto Gain Control
    - Mute
    - Device Selection

chat:

  transport: Socket.IO

  ui:
    desktop:
      type: slide_panel_right

    mobile:
      type: bottom_sheet

  animations:
    open: slide_up
    close: slide_down

  features:
    - Live Messages
    - Emoji Picker
    - Typing Indicator
    - Read Receipts
    - Seen Status
    - Message Timestamp
    - Auto Scroll
    - Swipe Down To Close
    - Tap Outside To Close
    - Send With Enter
    - Image Sharing
    - Copy Message
    - Delete Own Message

controls:

  microphone:
    enabled: true

  camera:
    enabled: true

  screen_share:
    desktop: true
    mobile: false

  settings:
    enabled: true

  end_call:
    enabled: true

settings:

  appearance:
    - Dark Theme
    - Light Theme

  video:
    - Camera Selection
    - Resolution

  audio:
    - Microphone Selection
    - Speaker Selection

  connection:
    - Show Ping
    - Show Bitrate
    - Show Network Quality

call_timer:
  enabled: true

network:
  indicators:
    - Excellent
    - Good
    - Fair
    - Poor

  reconnect:
    enabled: true
    attempts: unlimited

notifications:
  sounds:
    - User Joined
    - User Left
    - Message Received
    - Call Ended

  vibration:
    mobile: true

security:
  https_required: true

  permissions:
    - Camera
    - Microphone

  room_limit: 2

  validation:
    sanitize_messages: true

webrtc:

  connection:
    ice_restart: true

  bitrate:
    adaptive: true

  codecs:
    video:
      - VP9
      - VP8
      - H264

    audio:
      - Opus

backend:

  socket_events:

    client_to_server:
      - create-room
      - join-room
      - leave-room
      - offer
      - answer
      - ice-candidate
      - send-message
      - typing
      - stop-typing
      - toggle-camera
      - toggle-microphone

    server_to_client:
      - room-created
      - room-full
      - user-joined
      - user-left
      - receive-message
      - offer
      - answer
      - ice-candidate
      - typing
      - stop-typing

folder_structure:

  frontend:
    - src/
    - components/
    - pages/
    - hooks/
    - services/
    - store/
    - styles/
    - assets/

  backend:
    - server/
    - routes/
    - sockets/
    - rooms/
    - utils/

components:

  - HomeScreen
  - JoinRoom
  - VideoCall
  - RemoteVideo
  - LocalVideo
  - BottomControls
  - ChatPanel
  - ChatBottomSheet
  - MessageBubble
  - SettingsModal
  - DeviceSelector
  - NetworkIndicator
  - CallTimer
  - LoadingScreen

mobile_support:

  responsive: true

  gestures:
    - Swipe Down Chat
    - Swipe Up Chat
    - Double Tap Fullscreen

  orientation:
    portrait: true
    landscape: true

  keyboard:
    avoid_overlay: true

animations:
  page_transition: fade
  chat_open: slide_up
  chat_close: slide_down
  controls: fade
  messages: slide_left
  buttons: scale

performance:
  lazy_loading: true
  memoization: true
  image_optimization: true

future_features:
  - File Sharing
  - Voice Messages
  - Whiteboard
  - Blur Background
  - Virtual Background
  - AI Noise Removal
  - Recording
  - Picture-in-Picture
  - Progressive Web App

browser_support:
  chrome: latest
  edge: latest
  firefox: latest
  safari: latest
  android_chrome: latest
  ios_safari: latest

acceptance_criteria:

  - User can create a room in under 3 seconds.
  - A second user can join using the room code.
  - A third user is rejected with a "Room Full" message.
  - HD audio and video work on desktop and mobile.
  - Chat works without interrupting the call.
  - Mobile chat opens as a bottom sheet overlay.
  - Desktop chat opens as a right-side panel.
  - Camera and microphone toggles update instantly for both users.
  - Calls recover gracefully from temporary network interruptions.
  - Media devices are released when the call ends.
  - Rooms are automatically deleted when empty.
  - UI remains responsive across common mobile and desktop screen sizes.

development_rules:

  code_quality:
    - Use strict TypeScript.
    - Prefer functional React components.
    - Keep components small and reusable.
    - Avoid duplicated logic.
    - Handle all async errors gracefully.

  ui:
    - Mobile-first design.
    - Accessibility support (keyboard navigation and ARIA labels).
    - Consistent spacing and animations.
    - WhatsApp-inspired styling without copying proprietary assets.

  testing:
    - Test on Chrome, Edge, Firefox, Safari.
    - Test Android Chrome and iOS Safari.
    - Verify camera/microphone permissions.
    - Verify reconnect scenarios.
    - Verify room limit enforcement.