Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Odonno/surrealdb-presence-demo
Demo project on how to create a realtime presence web application using SurrealDB Live Queries
https://github.com/Odonno/surrealdb-presence-demo
jotai live-query presence react react-query realtime surrealdb tanstack-query typescript vite
Last synced: about 1 month ago
JSON representation
Demo project on how to create a realtime presence web application using SurrealDB Live Queries
- Host: GitHub
- URL: https://github.com/Odonno/surrealdb-presence-demo
- Owner: Odonno
- Created: 2023-10-24T18:13:54.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2024-07-04T17:42:23.000Z (6 months ago)
- Last Synced: 2024-08-01T22:43:18.992Z (5 months ago)
- Topics: jotai, live-query, presence, react, react-query, realtime, surrealdb, tanstack-query, typescript, vite
- Language: TypeScript
- Homepage:
- Size: 665 KB
- Stars: 16
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-surreal - SurrealDB Presence Demo - Demo project on how to create a realtime presence web application using SurrealDB Live Queries. (Projects)
README
# SurrealDB Presence Demo
This is a demo project on how to create a realtime presence web application using SurrealDB Live Queries.
## Tech stack
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
## Features
- 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
## Get started
1. Start a new SurrealDB instance locally
```bash
surreal start --log debug --user root --pass root memory --auth --allow-guests
```
2. Apply migrations
```bash
surrealdb-migrations apply
```
3. Install dependencies and run the web app
```bash
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:
```bash
bun run .\simulator.ts
```
## Architecture
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