Projects
ProjectsFrontendadvancedUI

Real-Time Collaboration UI

Presence, live updates and sync states in the UI.

~22 hours 8 phases
TypeScriptReactWebSockets

Overview

Build a collaboration UI that displays live presence (who is online), streams live updates, and clearly communicates synchronisation states. Learn presence, live updates and sync-state handling.

The problem

Show live presence and updates in a UI with clear connected/syncing states.

Why it matters

Collaboration, dashboards and chat all depend on live, sync-aware UIs.

What you'll build

  • A live presence list
  • Streaming updates
  • Connection-state indicator
  • Reconnect logic

What you'll learn

  • Realtime UIs
  • Presence patterns
  • Sync-state design

Business problem

Collaborative products need users to trust that their view is live and in sync.

Technical problem

Build a UI fed by a live stream with clear connected, syncing and disconnected states.

When you're done: A collaboration UI with live presence and robust sync states.

Requirements

User requirements

  • See who is online
  • See updates live
  • Know when disconnected
  • Work on mobile

System requirements

  • WebSocket client
  • Presence rendering
  • Sync-state UI

Functional requirements

  • Presence list
  • Live update stream
  • Connection indicator
  • Reconnect handling

Non-functional requirements

  • Resilient reconnection
  • Accessible status
  • Responsive

Technical requirements

  • WebSocket client abstraction
  • Presence state
  • Sync-status component
  • Reconnect with backoff

Security requirements

  • Validate client messages
  • No secrets in client

Operational requirements

  • Simulated realtime backend

Constraints

  • Frontend with a simulated or public realtime source

Success criteria

  • Presence updates live
  • Disconnect state is obvious
  • No app crash on reconnect

Flows

Request Flow

  1. 1

    Client

    Connects via WebSocket.

  2. 2

    Realtime server

    Pushes presence and updates.

  3. 3

    Application

    Renders live state and sync status.

Project Structure

Root of the client application source.

Setup

  1. 1

    Prerequisites

    You need the tools required by TypeScript, React, WebSockets installed and available on your PATH.

  2. 2

    Clone project

    Clone the repository locally.

    1. Clone the repository
    git clone <your-repo-url> <project-folder>
  3. 3

    Install dependencies

    Install the project dependencies.

    1. Initialize a Node.js project
    npm init -y

    Expected

    Creates a package.json with defaults.

    If it fails

    command not found: npm

    Fix

    Install Node.js LTS from the official site, then reopen your terminal.

  4. 4

    Configure environment

    Set the environment variables documented for this project. Never commit secrets.

    1. Create the environment file
    cp .env.example .env   # then edit values
  5. 5

    Start project

    Run the development command and confirm it starts.

    1. Start the development server
    npm run dev

    Expected

    Dev server starts; watch terminal for the local URL.

    If it fails

    Port 3000 is already in use

    Fix

    Run on another port: npm run dev -- --port 3001, or stop the conflicting process.

  6. 6

    Verify

    Open the printed local URL and confirm the primary flow works.

Build Phases

0 of 8 phases complete

  1. Objective: Establish the next milestone of the client-side interface.

    What changes: The project advances to the next coherent state, keeping the previous milestones working.

    Files touched

    Relevant source and configuration files for this milestone.

    Run

    1. Initialize a Node.js project
    npm init -y

    Expected

    Creates a package.json with defaults.

    If it fails

    command not found: npm

    Fix

    Install Node.js LTS from the official site, then reopen your terminal.

    Tasks

    • Implement the specific behaviour required for this milestone.
    • Verify the previous milestone still works.

    Validate: The milestone behaves as expected and does not break existing functionality.

    Common mistakes

    • • Skipping validation and moving on before confirming the milestone works.

  2. Objective: Establish the next milestone of the client-side interface.

    What changes: The project advances to the next coherent state, keeping the previous milestones working.

    Files touched

    Relevant source and configuration files for this milestone.

    Run

    1. Install the typescript package
    npm install typescript

    Expected

    Adds typescript to node_modules and package.json.

    If it fails

    npm ERR! network / EACCES

    Fix

    Check your network or run with sudo on Linux/macOS; on Windows run the terminal as Administrator.

    Tasks

    • Implement the specific behaviour required for this milestone.
    • Verify the previous milestone still works.

    Validate: The milestone behaves as expected and does not break existing functionality.

    Common mistakes

    • • Skipping validation and moving on before confirming the milestone works.

  3. Objective: Establish the next milestone of the client-side interface.

    What changes: The project advances to the next coherent state, keeping the previous milestones working.

    Files touched

    Relevant source and configuration files for this milestone.

    Run

    1. Start the development server
    npm run dev

    Expected

    Dev server starts; watch terminal for the local URL.

    If it fails

    Port 3000 is already in use

    Fix

    Run on another port: npm run dev -- --port 3001, or stop the conflicting process.

    Tasks

    • Implement the specific behaviour required for this milestone.
    • Verify the previous milestone still works.

    Validate: The milestone behaves as expected and does not break existing functionality.

    Common mistakes

    • • Skipping validation and moving on before confirming the milestone works.

  4. Objective: Establish the next milestone of the client-side interface.

    What changes: The project advances to the next coherent state, keeping the previous milestones working.

    Files touched

    Relevant source and configuration files for this milestone.

    Run

    1. Build the application for production
    npm run build

    Expected

    A production bundle is emitted to the output directory.

    If it fails

    Build fails with a type or syntax error

    Fix

    Read the error message, fix the referenced file, and re-run the build.

    Tasks

    • Implement the specific behaviour required for this milestone.
    • Verify the previous milestone still works.

    Validate: The milestone behaves as expected and does not break existing functionality.

    Common mistakes

    • • Skipping validation and moving on before confirming the milestone works.

  5. Objective: Establish the next milestone of the client-side interface.

    What changes: The project advances to the next coherent state, keeping the previous milestones working.

    Files touched

    Relevant source and configuration files for this milestone.

    Tasks

    • Implement the specific behaviour required for this milestone.
    • Verify the previous milestone still works.

    Validate: The milestone behaves as expected and does not break existing functionality.

    Common mistakes

    • • Skipping validation and moving on before confirming the milestone works.

  6. Objective: Establish the next milestone of the client-side interface.

    What changes: The project advances to the next coherent state, keeping the previous milestones working.

    Files touched

    Relevant source and configuration files for this milestone.

    Tasks

    • Implement the specific behaviour required for this milestone.
    • Verify the previous milestone still works.

    Validate: The milestone behaves as expected and does not break existing functionality.

    Common mistakes

    • • Skipping validation and moving on before confirming the milestone works.

  7. Objective: Establish the next milestone of the client-side interface.

    What changes: The project advances to the next coherent state, keeping the previous milestones working.

    Files touched

    Relevant source and configuration files for this milestone.

    Tasks

    • Implement the specific behaviour required for this milestone.
    • Verify the previous milestone still works.

    Validate: The milestone behaves as expected and does not break existing functionality.

    Common mistakes

    • • Skipping validation and moving on before confirming the milestone works.

  8. Objective: Establish the next milestone of the client-side interface.

    What changes: The project advances to the next coherent state, keeping the previous milestones working.

    Files touched

    Relevant source and configuration files for this milestone.

    Tasks

    • Implement the specific behaviour required for this milestone.
    • Verify the previous milestone still works.

    Validate: The milestone behaves as expected and does not break existing functionality.

    Common mistakes

    • • Skipping validation and moving on before confirming the milestone works.

Commands

1. Initialize a Node.js project
npm init -y

Expected

Creates a package.json with defaults.

If it fails

command not found: npm

Fix

Install Node.js LTS from the official site, then reopen your terminal.

2. Install the typescript package
npm install typescript

Expected

Adds typescript to node_modules and package.json.

If it fails

npm ERR! network / EACCES

Fix

Check your network or run with sudo on Linux/macOS; on Windows run the terminal as Administrator.

3. Start the development server
npm run dev

Expected

Dev server starts; watch terminal for the local URL.

If it fails

Port 3000 is already in use

Fix

Run on another port: npm run dev -- --port 3001, or stop the conflicting process.

4. Build the application for production
npm run build

Expected

A production bundle is emitted to the output directory.

If it fails

Build fails with a type or syntax error

Fix

Read the error message, fix the referenced file, and re-run the build.

Testing

Unit tests

  • Core logic and pure functions behave correctly.

    npm init -y

    Success: All unit tests pass without errors.

Integration tests

  • Components integrate correctly with data sources and services.

    npm test

    Success: Integration tests pass for the primary flows.

API tests

  • Endpoints respond to valid and invalid input correctly.

    npm test

    Success: API tests cover happy and failure paths.

End-to-end tests

  • A user can complete the primary journey end to end.

    npm run test:e2e

    Success: The main user journey completes successfully.

Security tests

  • No obvious security regressions are introduced.

    npm audit

    Success: No high or critical vulnerabilities.

Debugging & Troubleshooting

Port already in use at startup

Why: Another process is binding the same port your app wants.

Check: List what is using the port.

lsof -i :3000   # Linux/macOS  |  netstat -ano | findstr :3000   # Windows

Fix: Free the port or start your app on a different port.

Prevent: Choose uncommon ports and document them in the README.

Environment variable missing or undefined

Why: A required value was not loaded into the runtime.

Check: Print the variable or inspect the config loader.

echo $MY_VAR   # Linux/macOS  |  echo %MY_VAR%   # Windows

Fix: Add the variable to your .env file and restart the process.

Prevent: Fail fast at startup when required env vars are absent.

API request times out

Why: An upstream call is slow or the network is blocked.

Check: Time a direct request against the upstream.

curl -w 'time_total: %{time_total}\n' http://upstream/health

Fix: Add timeouts and retries to the client; verify the upstream is up.

Prevent: Set explicit timeouts and circuit breakers on outbound calls.

Dependency fails to install or run

Why: Version conflicts or an incompatible runtime.

Check: Inspect the error and the installed versions.

npm ls <pkg>

Fix: Align versions or clear the lockfile and reinstall.

Prevent: Commit a lockfile and use the same Node version everywhere.

Security

Security is treated as a core requirement: input is validated, secrets are protected, and dependencies are kept up to date.

  • Input validation

    Validate and sanitize all user input before use.

  • Secrets management

    Store secrets in environment variables, never in source.

  • Dependency hygiene

    Regularly audit dependencies for known vulnerabilities.

Observability

Logs

  • Structured logs for every service
  • Centralized log storage with retention

Metrics

  • Service, infrastructure and business metrics
  • RED and USE coverage

Traces

  • Distributed traces across services and infrastructure

Health checks

  • Per-service health probes
  • External uptime checks

Alerts

  • Alerting on SLO burn and critical signals
  • On-call escalation paths

Dashboards

  • Service, infra and business dashboards
  • SLO dashboards

SLIs

  • Availability — Proportion of valid requests answered successfully
  • Latency — Distribution of response times
  • Error rate — Proportion of failed requests

SLOs

  • Availability — 99.9% over 30 days
  • Latency — P95 under 300ms

Deployment

  1. 1

    Prepare for deployment

    Build the production artifact.

    1. Build for production
    npm run build
  2. 2

    Deploy

    Deploy to the project target platform following its documented steps.

    1. Deploy
    npm run deploy   # or the platform-specific command
  3. 3

    Verify

    Confirm the deployed application responds and its health check passes.

    1. Check health
    curl -I https://<your-deployed-url>

Documentation

Project Overview

Build a collaboration UI that displays live presence (who is online), streams live updates, and clearly communicates synchronisation states. Learn presence, live updates and sync-state handling. This is a advanced ui project in the client-side interface space, built to demonstrate real engineering, not just copied code.

What You Will Build

- A live presence list - Streaming updates - Connection-state indicator - Reconnect logic

Problem Statement

Collaborative products need users to trust that their view is live and in sync. Build a UI fed by a live stream with clear connected, syncing and disconnected states.

Technology Stack

TypeScript, React, WebSockets

Installation

Clone the repository and install dependencies with the documented commands.

Local Development

Run the development command and open the printed local URL.

Testing

Run the test commands documented in the Testing section and confirm they pass.

Deployment

Follow the documented deployment steps for this project's target platform.

Interview Explanation

Use the Interview section to explain the architecture, technology choices and trade-offs.

Build Process

Phases guide the build in 8 checkpoints. Complete each and validate before moving on.

Interview Prep

30-second pitch

I built Real-Time Collaboration UI — show live presence and updates in a ui with clear connected/syncing states. It uses TypeScript, React, WebSockets and solves collaborative products need users to trust that their view is live and in sync.

2-minute walkthrough

Build a collaboration UI that displays live presence (who is online), streams live updates, and clearly communicates synchronisation states. Learn presence, live updates and sync-state handling. The core requirements were Presence list, Live update stream, Connection indicator. I structured the work around Render live presence, Subscribe to live update streams, Manage sync states and validated the result with the documented tests.

Architecture

Because this is a frontend project, the architecture is concentrated in client-side interface rather than a distributed system.

Why these technologies

I chose TypeScript, React, WebSockets because they are the pragmatic, well-supported tools best suited to building a ui of this kind.

Why this architecture

The structure exists to keep concerns separated, make each piece testable, and scale the project cleanly as requirements grow.

At scale

At scale I would introduce caching, move to a service boundary structure, add proper observability, and enforce stricter contracts between components.

What can fail

The data source becomes unavailable, A dependency introduces a breaking change, Performance degrades under load, Configuration drift between environments

Monitoring

Monitoring is covered in the Observability section, focusing on distributed metrics, logs, traces and SLOs.

Security

Security was handled by validating input, protecting secrets, and following the practices listed in the Security section.

Deployment strategy

Deployment follows the steps in the Deployment section for the target platform, with a health check to confirm success.

What I'd do differently

With more time I would add deeper test coverage, stronger observability, and automated deployment.

Practice Q&A

Why did you build Real-Time Collaboration UI?

To demonstrate Render live presence and Subscribe to live update streams on a real, portfolio-worthy project.

What was the hardest part?

Coordinating the pieces so each stays correct as the project grows, and validating end to end.

How do you handle failure and scale?

By designing for correctness first and adding resilience once the core works.

Extensions

  • Add deeper test coverage
  • Add observability and alerting
  • Harden security
  • Automate deployment

Completion Checklist

Prerequisite Projects

Next Steps

Recommended next

Design System Playground

Focuses on tokens, accessibility and component documentation.