Hubspace

An exploratory stack simulating a real-time multi person collaboration space built with TypeScript, Express, WebSockets, SQLite, and Prisma.

Try It Live →

Free hosting may take a moment to spin up.

Overview

HubSpace is a lightweight realtime web application where authenticated users connect, appear as active participants, and interact inside a shared environment.

  • ✓ User registration and authentication
  • ✓ Password hashing with Argon2
  • ✓ JWT-based authentication
  • ✓ Express REST API design
  • ✓ WebSocket realtime communication
  • ✓ Server-side state management
  • ✓ SQLite persistence with migrations
  • ✓ Deployment as a production web service

Application Architecture

Client
 |
 | HTTP / WebSocket
 v
Routes
 |
 v
Controllers
 |
 v
Services
 |
 v
Repositories
 |
 v
SQLite Database


          WebSocket Server
                 |
                 v
          Realtime State
          Actor Management
          Broadcasting

Backend Layers

Routes

Defines application endpoints and connects requests to controllers.

  • • Authentication routes
  • • User routes
  • • Health check routes
  • • No business logic

Controllers

Handles HTTP requests and responses.

  • • Extract request data
  • • Call service methods
  • • Return responses
  • • Translate errors into HTTP responses

Services

Contains core application business logic.

  • • User registration
  • • Authentication
  • • Password verification
  • • Token generation
  • • User workflows

Repositories

Provides database access while isolating persistence details.

  • • Create records
  • • Find users
  • • Update data
  • • Execute queries

Database Layer

SQLite provides persistent storage.

  • • User data
  • • Password hashes
  • • Migration tracking
  • • Application state persistence

Realtime Layer

The realtime system runs independently from REST API requests while sharing application services.

  • ✓ Maintain WebSocket connections
  • ✓ Authenticate connected clients
  • ✓ Track active actors
  • ✓ Broadcast world updates
  • ✓ Synchronize connected users

Dependency Injection

Application dependencies are created centrally and passed into application layers. This keeps components loosely coupled and makes services easier to test and replace.

Tech Stack

Backend

  • TypeScript
  • Express
  • WebSockets
  • SQLite
  • Argon2
  • JWT Authentication

Frontend

  • HTML
  • JavaScript
  • Canvas Rendering

Deployment

  • Render Web Service

Project Goals

Hubspace is a learning project focused on building a complete realtime application from the ground up, including authentication, networking, persistence, and deployment.