This is a demo project on how to create a realtime presence web application using SurrealDB Live Queries.

This is a list of the most important technologies used in this project:

• React + TypeScript (Vite template)
• TanStack Query
• jotai (jotai-forms)
• SurrealDB
• surrealdb-migrations

• Authentication
  • Sign up
  • Sign in
  • Sign out
  • Display authenticated user details such as realtime presence
• List of rooms with number of active users
  • List of joined rooms vs. other rooms
  • Join a room
• Joined rooms
  • Display the list of users in rooms
  • Show presence of each user
  • Send message
  • Show realtime messages (when a user entered or left a room, when a new message is sent)
  • Leave the room

Current configuration:

• Signal user presence in room periodically (every 10 seconds)
• Display presence status:
  • green - < 2min of inactivity
  • yellow - < 10min of inactivity
  • gray - > 10min of inactivity

1. Start a new SurrealDB instance locally

surreal start --log debug --user root --pass root memory --auth --allow-guests

2. Apply migrations

surrealdb-migrations apply

3. Install dependencies and run the web app

bun install
bun start

4. Launch your web browser on the generated url (eg. http://localhost:5173/) and play with the app (create new accounts, join rooms, leave rooms)

And voilà!

5. If you feel a little lonely when playing locally with the app, know that there is a simulator to bring some life. Adding new users who have the ability to join rooms, to leave rooms and sometimes to write a message!

Run the following command to start the simulator:

bun run .\simulator.ts

This project is using the following architecture:

• /schemas - list of SurrealDB tables
• /events - list of SurrealDB events
• /migrations - list of db migrations that will be automatically applied
• /src
  • /api - TanStack query hooks
  • /components
  • /constants
  • /contexts - Theme and SurrealDB providers
  • /hooks - custom React hooks
  • /lib - functions and app models
  • /mutations - surql query files to create or update data, using SurrealDB events
  • /pages
  • /queries - surql query files to query the database, using SurrealDB tables