Skip to content

01_basic.md

Latest commit

 

History

History
92 lines (71 loc) · 4.77 KB

01_basic.md

File metadata and controls

92 lines (71 loc) · 4.77 KB

Chat App - Basic

Create a real-time chat app.

UI & Style Guide

Layout

  • Sidebar (left, ~220px fixed): app title/branding, user info with status, room list, online users
  • Main area (right, flex): room header bar, scrollable message list, input bar pinned to bottom
  • Panels (right slide-in or overlay): threads, pinned messages, profiles, settings

Visual Design

  • Dark theme using the brand colors from the language section below
  • Background: darkest shade for main bg, slightly lighter for sidebar and cards
  • Text: light on dark, muted color for timestamps and secondary info
  • Borders: subtle 1px, low contrast against background
  • Consistent spacing scale (8/12/16/24px)
  • Font: system font stack, clear hierarchy (bold headers, regular body, small muted metadata)
  • Rounded corners on inputs, buttons, cards, and message containers

Components

  • Messages: sender name (colored) + timestamp (muted) + text. Group consecutive messages from same sender. Action buttons appear on hover only (which buttons depend on the features below).
  • Inputs: full-width, rounded, subtle border, placeholder text, focus ring using primary color
  • Buttons: filled with primary color for main actions, outlined/ghost for secondary. Clear hover and active states.
  • Badges: small pill-shaped with count, contrasting color (e.g., unread count on rooms)
  • Modals/panels: slide-in from right with subtle backdrop, or dropdown overlays
  • Status indicators: small colored dots (green=online, yellow=away, red=DND, grey=offline)
  • Room list: room names with optional icon prefix (#), active room highlighted, unread badge

Interaction & UX

  • Show loading/connecting state while backend connects (spinner or skeleton, not blank screen)
  • Empty states: helpful text when no rooms, no messages, no results ("Create a room to get started")
  • Error feedback: inline error messages or toast notifications, never silent failures
  • Smooth transitions: fade/slide for panels, modals, and state changes
  • Hover reveals: message action buttons, tooltips on reactions, user profile cards
  • Keyboard support: Enter to send messages, Escape to close modals/panels
  • Auto-scroll to newest message, with scroll-to-bottom button when scrolled up

Features

Important: Each feature below includes a "UI contract" section specifying required element attributes for automated testing. You MUST follow these — they define the user-facing interface. Your architecture, state management, and backend design are entirely up to you.

Basic Chat Features

  • Users can set a display name
  • Users can create chat rooms and join/leave them
  • Users can send messages to rooms they've joined
  • Show who's online
  • Include reasonable validation (e.g., don't let users spam, enforce sensible limits)

UI contract:

  • Name input: placeholder contains "name" (case-insensitive)
  • Name submit: button with text "Join", "Register", "Set Name", or type="submit"
  • Room creation: button with text containing "Create" or "New" or "+"
  • Room name input: placeholder contains "room" or "name" (case-insensitive)
  • Message input: placeholder contains "message" (case-insensitive)
  • Send message: pressing Enter in the message input sends the message
  • Room list: room names visible as clickable text in a sidebar or list
  • Join room: clicking room name joins/enters it, or a button with text "Join"
  • Leave room: button with text "Leave"
  • Online users: user names displayed as text in a visible user list or member panel

Typing Indicators

  • Show when other users are currently typing in the SAME room (typing must be scoped to room — do not broadcast typing to users in different rooms)
  • Typing indicator should automatically expire after a few seconds of inactivity
  • Display "User is typing..." or "Multiple users are typing..." in the UI

UI contract:

  • Typing text: visible text containing "typing" (case-insensitive) when another user types
  • Auto-expiry: typing indicator text disappears within 6 seconds of inactivity

Read Receipts

  • Track which users have seen which messages
  • Display "Seen by X, Y, Z" under messages — only show OTHER users who have seen it, not the sender
  • Update read status in real-time as users view messages

UI contract:

  • Receipt text: text containing "seen" or "read" (case-insensitive) appears near messages after another user views them
  • Reader names: the receipt text includes the viewing user’s display name

Unread Message Counts

  • Show unread message count badges on the room list
  • Track last-read position per user per room
  • Update counts in real-time as new messages arrive or are read

UI contract:

  • Badge: a visible numeric badge (e.g., "3") appears next to room names in the sidebar when there are unread messages
  • Badge clears when the room is opened/entered