A real-time chat application powered by SpacetimeDB — a next-gen serverless database that replaces your backend. Built with React 19, TypeScript, and Vite for a lightning-fast, modern chat experience.
🌐 Live Demo: Deployed on Vercel with SpacetimeDB MainCloud
- Real-time messaging — instant delivery powered by SpacetimeDB subscriptions
- Message editing — edit your sent messages with an
(edited)indicator - Message deletion — remove your own messages
- Reply threads — reply to specific messages with inline preview context
- Image sharing — send images alongside text messages
- Message search — search through chat history with jump-to-message navigation
- Chat rooms — create and join public chat rooms
- Direct messages — private 1-on-1 conversations
- Default "general" room — new users auto-join on first connection
- Unread counts — per-room unread message badges
- Room membership — join/leave rooms with member counts
- Customizable display names — set and update your username
- User avatars — upload profile pictures via URL
- User bios — add a personal bio to your profile
- Profile cards — click on any user to view their profile
- Online/offline status — real-time user presence tracking
- Typing indicators — see when others are typing (auto-clears after 3s)
- Emoji reactions — react to messages with emojis (toggle on/off)
- System messages — join/leave notifications in the chat
- OIDC login — secure authentication via SpacetimeDB Auth (OpenID Connect)
- Session persistence — auth tokens stored in local storage
- Login page — clean, dedicated login UI
- Responsive design — desktop sidebar + mobile sheet navigation
- Dark mode — sleek dark-themed interface
- Smooth animations — fade-in, zoom-in transitions and loading states
- Auto-scroll — automatically scroll to the latest messages
| Technology | Purpose |
|---|---|
| React 19 | UI framework |
| TypeScript | Type-safe development |
| Vite 7 | Build tool & dev server |
| Tailwind CSS 4 | Utility-first styling |
| shadcn/ui | Accessible UI components (New York style) |
| Radix UI | Headless UI primitives |
| Lucide React | Icon library |
| react-oidc-context | OIDC authentication |
| Technology | Purpose |
|---|---|
| SpacetimeDB | Serverless database + real-time sync |
| SpacetimeDB TypeScript Module | Server-side logic (reducers & tables) |
| Technology | Purpose |
|---|---|
| Vitest | Unit testing framework |
| Testing Library | React component testing |
| ESLint | Code linting |
| Prettier | Code formatting |
| Technology | Purpose |
|---|---|
| Vercel | Frontend hosting |
| SpacetimeDB MainCloud | Database hosting |
├── index.html # Entry HTML
├── src/
│ ├── main.tsx # App entry point with OIDC + SpacetimeDB providers
│ ├── App.tsx # Main chat application component
│ ├── auth.ts # OIDC configuration
│ ├── types.ts # Shared TypeScript types
│ ├── index.css # Global styles & Tailwind config
│ ├── components/
│ │ ├── ChatSidebar.tsx # Room list & user controls
│ │ ├── ChatHeader.tsx # Room header with actions
│ │ ├── ChatMessage.tsx # Message bubble with reactions
│ │ ├── ChatInput.tsx # Message composer with typing indicator
│ │ ├── RoomList.tsx # Room listing & creation
│ │ ├── MessageSearch.tsx # Search overlay with results
│ │ ├── UserProfileCard.tsx# Profile modal with edit support
│ │ ├── ReplyPreview.tsx # Inline reply context
│ │ ├── LoginPage.tsx # OIDC login screen
│ │ ├── EmptyState.tsx # Empty room placeholder
│ │ └── ui/ # shadcn/ui components
│ ├── module_bindings/ # Auto-generated SpacetimeDB bindings
│ └── lib/ # Utility functions
├── spacetimedb/
│ └── src/
│ └── index.ts # Server module (tables, reducers, lifecycle)
├── spacetime.json # SpacetimeDB project config
├── components.json # shadcn/ui config
└── vercel.json # Vercel deployment config
- Node.js (v18+) or Bun
- SpacetimeDB CLI
# Clone the repository
git clone https://github.com/iamjuney/chat-react-spacetimedb.git
cd chat-react-spacetimedb
# Install dependencies
npm installCreate a .env file in the root directory:
VITE_SPACETIMEDB_HOST=ws://localhost:3000
VITE_SPACETIMEDB_DB_NAME=quickstart-chat
VITE_SPACETIMEAUTH_CLIENT_ID=YOUR_CLIENT_ID# Publish the SpacetimeDB module locally
npm run spacetime:publish:local
# Generate TypeScript bindings
npm run spacetime:generate
# Start the dev server
npm run dev# Publish the module to SpacetimeDB MainCloud
npm run spacetime:publish
# Build for production
npm run build| Script | Description |
|---|---|
npm run dev |
Start Vite dev server |
npm run build |
Type-check and build for production |
npm run preview |
Preview the production build |
npm run test |
Run unit tests with Vitest |
npm run lint |
Lint and format check |
npm run format |
Auto-format with Prettier |
npm run spacetime:generate |
Generate TypeScript bindings from the module |
npm run spacetime:publish:local |
Publish module to local SpacetimeDB |
npm run spacetime:publish |
Publish module to MainCloud |
This project is licensed under the Apache License 2.0.
Built with ❤️ using SpacetimeDB + React