SpacetimeDB Leaderboard
A real-time leaderboard app built with SpacetimeDB and Svelte 5.
Players are managed through a CRUD interface, and the leaderboard updates in real-time across all connected clients — no polling, no REST APIs.
Stack
- Backend: SpacetimeDB TypeScript module
- Frontend: Svelte 5 + Vite
- Icons: Lucide
- Fonts: Inter, JetBrains Mono
Getting Started
Prerequisites
- SpacetimeDB CLI
- Node.js 18+
Setup
# Install dependencies
npm install
# Publish the module (creates/updates the database)
spacetime publish spacetime-svelte-kbiux --clear-database -y --module-path spacetimedb
# Generate client bindings
spacetime generate --lang typescript --out-dir src/module_bindings --module-path spacetimedb
# Start the dev server
npm run dev
Environment
Configure .env.local with your SpacetimeDB host and database name:
VITE_SPACETIMEDB_DB_NAME=spacetime-svelte-kbiux
VITE_SPACETIMEDB_HOST=https://maincloud.spacetimedb.com
Project Structure
├── spacetimedb/src/index.ts # Tables + reducers (backend)
├── src/
│ ├── module_bindings/ # Generated client bindings (do not edit)
│ ├── styles.css # Global dark theme
│ ├── router.ts # Hash-based routing
│ ├── Root.svelte # SpacetimeDB connection provider
│ ├── App.svelte # Router shell
│ ├── Nav.svelte # Navigation bar
│ ├── PlayerManager.svelte # CRUD + score controls
│ └── Leaderboard.svelte # Real-time ranked leaderboard
Features
- Add / remove players on the Players page
- Adjust scores with
+/−buttons - Live leaderboard sorted by score, with animated position changes
- Real-time sync across all connected clients via SpacetimeDB subscriptions
- Gold, silver, bronze rank styling for top 3
License
