Back to battles
mediumupcoming

Chat Room

A real-time chat application with rooms, typing indicators, and message features.

35 min limit0 participants
javascriptcsswebsocket
PRD
# Chat Room PRD

## Overview
Build a real-time chat application with multiple rooms, typing indicators, message reactions, and user presence, simulating a multi-user experience with localStorage and mock data.

## Requirements
- Set username on join with a welcome screen
- Multiple chat rooms with create and join functionality
- Message input with send button and Enter key to submit
- Message display with username, timestamp, and avatar
- Typing indicator showing "user is typing..." status
- Message reactions with emoji picker
- Edit own messages after sending
- Delete own messages
- System messages for user joined and left events
- Online users list displayed per room
- Unread message count badge per room
- Scroll to bottom button when new messages arrive
- Message search across chat history
- Link preview detecting URLs in messages
- Image URL preview rendered inline
- Notification sound toggle for new messages
- Persist messages to localStorage
- Simulate multiple users with mock data or multiple browser tabs

## Tech Stack
- JavaScript or any frontend framework
- localStorage and BroadcastChannel API for cross-tab simulation
- No chat or messaging libraries

## Scoring Criteria
- **Functional (40%)**: Chat messaging works, rooms function, reactions and editing work
- **Quality (20%)**: Smooth real-time feel, proper scroll behavior, clean message rendering
- **Fidelity (25%)**: All features present including typing indicator, search, link previews, and presence
- **Speed (15%)**: Time bonus

Battle Stats

Time Limit35 min
Participants0
Statusupcoming

Rules

  • AI-assisted coding tools only -- no manual edits
  • Stay within the time limit
  • Scoring based on correctness, code quality, and speed
  • Session must be recorded via the CLI