Published on

Ripple Chat

Authors
  • avatar
    Name
    Austin Sternberg
    Twitter

Overview

Ripple Chat is a public chat room platform that brings back the social and casual feel of early internet communication. Inspired by AOL Instant Messenger, Omegle, and Nintendo's PictoChat, it combines text messaging, pixel-art drawing, and real-time voice/video chat into a single nostalgic experience.

Built as a Human-Interface & Computer Interaction (HIC) project with a team of five, we focused on creating an intuitive interface following Shneiderman's 8 Golden Rules of Interface Design.

What it does

Multi-modal communication

  • Real-time text messaging across public chat rooms
  • Pixel-based drawing canvas (PictoChat-inspired) with color selection
  • Public voice calls with push-to-talk controls
  • Video chat with camera toggle
  • Instant message and drawing synchronization

User management

  • Secure account system with bcrypt password hashing
  • Profile customization (username, email, phone, password)
  • Session-based authentication
  • Account deletion with double-confirmation

Drawing canvas

  • Pixel-by-pixel drawing inspired by Nintendo DS PictoChat
  • Color palette selection
  • Undo/redo support (Ctrl+Z / Ctrl+Y)
  • Send drawings directly into chat

Tech stack

  • Frontend: React.js for dynamic, responsive UI
  • Backend: Node.js & Express handling WebSocket connections and API routes
  • Database: MongoDB for chat logs and user accounts
  • Real-time: WebSockets for instant message delivery
  • Security: bcrypt for password hashing
  • Media: WebRTC for voice and video streaming

Key features in depth

Authentication flow

  • Login with username/password
  • Registration with email, phone, username, password
  • Password visibility toggle (eye icon)
  • Clear error messaging for invalid credentials
  • Session persistence across page navigation

Chat interface

  • Multiple public rooms accessible via sidebar
  • Text input with keyboard shortcuts (Tab to navigate, Enter to send)
  • Drawing canvas that replaces text input on toggle
  • Messages display with username and timestamp
  • Clean separation between text and drawing modes

Voice & video

  • Join/leave call buttons in navbar
  • Microphone mute/unmute (visual indicators: green = on, red = off)
  • Camera toggle with live preview
  • Error handling with prompts to rejoin on connection issues
  • WebRTC peer connections managed server-side

Profile management

  • Update username, email, password, phone number
  • Password confirmation required for changes
  • Visual feedback for successful/failed updates
  • Logout functionality
  • Account deletion with double-confirmation

Design principles

We followed Shneiderman's 8 Golden Rules throughout:

  1. Consistency: Unified color scheme (dark theme), consistent button styling, persistent navbar across all pages
  2. Shortcuts: Keyboard navigation (Tab, Enter) for all forms and actions
  3. Feedback: Instant visual feedback for all actions, error messages for failed operations
  4. Closure: Clear task completion (message sent, profile updated, account deleted)
  5. Error prevention: Password toggles, confirmation dialogs, separate text/drawing modes
  6. Reversal: Undo/redo for drawings, easy profile changes, cancel before submission
  7. Locus of control: Users decide when to chat, draw, join calls, or update profiles
  8. Reduced memory load: All options visible on screen, clear labeling, intuitive icons

Technical challenges

Real-time synchronization: Ensuring messages and drawings appear instantly across all clients required careful WebSocket management and state synchronization.

Canvas implementation: Building a pixel-based drawing system that felt responsive while handling undo/redo stacks and color switching was more complex than expected.

Media streaming: Integrating WebRTC for voice and video required handling peer connections, ICE candidates, and graceful error recovery when connections drop.

State management: Keeping voice/video controls, chat state, and user sessions in sync across React components required careful prop drilling and context usage.

Sample code snippet

Drawing canvas color selection:

const handleColorChange = (newColor) => {
  setActiveColor(newColor)
  // Immediate visual feedback
  ctx.strokeStyle = newColor
  ctx.fillStyle = newColor
}

// Undo functionality
const handleUndo = () => {
  if (historyStep > 0) {
    setHistoryStep(historyStep - 1)
    ctx.putImageData(history[historyStep - 1], 0, 0)
  }
}

Lessons learned

UI/UX matters: Following the Golden Rules forced us to think critically about every interaction. Small details like password visibility toggles and double-confirmation dialogs significantly improved user confidence.

Real-time is hard: WebSocket error handling and reconnection logic taught us that network reliability cannot be assumed. Graceful degradation is essential.

Accessibility: Keyboard shortcuts and clear visual feedback made the app usable without constant mouse interaction—something we initially overlooked.

Team coordination: With five people, clear component ownership and consistent coding standards (ESLint, Prettier) were crucial to avoid merge conflicts.

Next steps

  • Add private messaging between users
  • Implement chat room creation by users
  • Store drawing history in database
  • Add emoji picker and GIF support
  • Mobile responsive design improvements
  • Screen sharing for video calls

Team

Built by Austin Sternberg, Noah Al-lahabi, Colton Staiduhar, Ian Rohrbacher, and Paige Ogden as our Spring 2025 HIC project.

Check out the full project report for detailed UI/UX analysis and design decisions.

View on GitHub