Skip to content

Commit 5fbece8

Browse files
authored
Minor additions (#154)
* General wording and structure improvements * common installation issues for node * Update resources/demo-apps-example-projects.mdx
1 parent b9608b2 commit 5fbece8

File tree

3 files changed

+149
-94
lines changed

3 files changed

+149
-94
lines changed

resources/demo-apps-example-projects.mdx

Lines changed: 99 additions & 77 deletions
Original file line numberDiff line numberDiff line change
@@ -1,148 +1,170 @@
11
---
2-
title: "Demo Apps / Example Projects"
3-
description: "Gallery of example projects built with PowerSync."
2+
title: "Demo Apps & Example Projects"
3+
description: "Gallery of projects showcasing PowerSync implementations across platforms and frameworks."
44
---
55

6-
Example projects are listed under backend they use, but you can easily wire up your own backend as documented [here](/installation/app-backend-setup).
6+
This page showcases example projects organized by platform and backend technology. You can adapt any example to work with your preferred backend as documented in our [Backend Setup Guide](/installation/app-backend-setup).
77

88
<Check>
9-
We're constantly expanding our list of example projects. If you'd like to see an example that is not currently available, [let us know on Discord](https://discord.gg/powersync).
9+
We continuously expand our collection of example projects. If you need an example that isn't available yet, [let us know on Discord](https://discord.gg/powersync).
1010
</Check>
1111

12-
1312
<AccordionGroup>
1413
<Accordion title="Flutter" icon="flutter">
15-
#### Supabase Backend:
14+
#### Supabase Backend
1615

1716
* [To-Do List App](https://github.com/powersync-ja/powersync.dart/tree/master/demos/supabase-todolist)
18-
* Includes [Full-Text Search](/usage/use-case-examples/full-text-search) (FTS) example
19-
* Includes example of [Handling Attachments](/integration-guides/supabase-+-powersync/handling-attachments) (files)
20-
* [To-Do List app + Drift](https://github.com/powersync-ja/powersync.dart/tree/master/demos/supabase-todolist-drift)
21-
* [To-Do List app demonstrating data persistence with local-only tables](https://github.com/powersync-ja/powersync.dart/tree/main/demos/supabase-todolist-optional-sync)
17+
* Includes [Full-Text Search](/usage/use-case-examples/full-text-search) capabilities
18+
* Demonstrates [File/Attachment Handling](/integration-guides/supabase-+-powersync/handling-attachments)
19+
* [To-Do List App + Drift](https://github.com/powersync-ja/powersync.dart/tree/master/demos/supabase-todolist-drift)
20+
* [To-Do List App with Local-Only Tables](https://github.com/powersync-ja/powersync.dart/tree/main/demos/supabase-todolist-optional-sync) - Shows data persistence without syncing
2221
* [Simple Chat App](https://github.com/powersync-ja/powersync.dart/tree/master/demos/supabase-simple-chat)
2322
* [Trello Clone App](https://github.com/powersync-ja/powersync-supabase-flutter-trello-demo)
2423

25-
#### Node.js Custom Backend:
26-
* [To-Do List App](https://github.com/powersync-ja/powersync.dart/tree/main/demos/firebase-nodejs-todolist)
27-
* Corresponding backend demo: [Node.js Backend for To-Do List App, with Firebase Auth](https://github.com/powersync-ja/powersync-nodejs-firebase-backend-todolist-demo) (also linked below)
24+
#### Node.js Custom Backend
25+
26+
* [To-Do List App with Firebase Auth](https://github.com/powersync-ja/powersync.dart/tree/main/demos/firebase-nodejs-todolist)
27+
* Corresponding backend: [Node.js Backend with Firebase Auth](https://github.com/powersync-ja/powersync-nodejs-firebase-backend-todolist-demo)
28+
29+
#### Rails Custom Backend
2830

29-
#### Rails Custom Backend:
3031
* [GoToFun App](https://github.com/powersync-ja/powersync-rails-flutter-demo)
31-
* This repo includes both the Flutter app and Rails backend
32+
* This repo contains both the Flutter app and Rails backend
33+
34+
#### Django Custom Backend
3235

33-
#### Django Custom Backend:
3436
* [To-Do List App](https://github.com/powersync-ja/powersync.dart/tree/master/demos/django-todolist)
35-
* Corresponding backend demo: [Django Backend for To-Do List App](https://github.com/powersync-ja/powersync-django-backend-todolist-demo) (also linked below)
37+
* Corresponding backend: [Django Backend](https://github.com/powersync-ja/powersync-django-backend-todolist-demo)
3638
</Accordion>
3739

3840
<Accordion title="React Native & Expo" icon="react">
39-
#### Supabase Backend:
41+
#### Supabase Backend
42+
4043
* [To-Do List App](https://github.com/powersync-ja/powersync-js/tree/main/demos/react-native-supabase-todolist)
41-
* Includes an example of [Handling Attachments](/integration-guides/supabase-+-powersync/handling-attachments) (files)
44+
* Demonstrates [File/Attachment Handling](/integration-guides/supabase-+-powersync/handling-attachments)
4245
* [PowerChat - Group Chat App](https://github.com/powersync-ja/powersync-js/tree/main/demos/react-native-supabase-group-chat)
4346

44-
#### Django Custom Backend:
47+
#### Django Custom Backend
48+
4549
* [To-Do List App](https://github.com/powersync-ja/powersync-js/tree/main/demos/django-react-native-todolist)
46-
* Corresponding backend demo: [Django Backend for To-Do List App](https://github.com/powersync-ja/powersync-django-backend-todolist-demo) (also linked below)
50+
* Corresponding backend: [Django Backend](https://github.com/powersync-ja/powersync-django-backend-todolist-demo)
4751
</Accordion>
4852

4953
<Accordion title="JavaScript Web" icon="js">
50-
#### Supabase Backend:
54+
#### Supabase Backend
55+
5156
* [React To-Do List App](https://github.com/powersync-ja/powersync-js/tree/main/demos/react-supabase-todolist)
52-
* Includes [Full-Text Search](/usage/use-case-examples/full-text-search) (FTS) example
53-
* [React To-Do List app demonstrating data persistence with local-only tables](https://github.com/powersync-ja/powersync-js/tree/main/demos/react-supabase-todolist-optional-sync)
54-
* [React 'Multi-Client Widget'](https://github.com/powersync-ja/powersync-js/tree/main/demos/react-multi-client)
55-
* This is the demo widget displayed on the [PowerSync homepage](https://www.powersync.com/) which shows how data flows from one PowerSync client to another.
57+
* Includes [Full-Text Search](/usage/use-case-examples/full-text-search) capabilities
58+
* [React To-Do List App with Local-Only Tables](https://github.com/powersync-ja/powersync-js/tree/main/demos/react-supabase-todolist-optional-sync) - Shows data persistence without syncing
59+
* [React Multi-Client Widget](https://github.com/powersync-ja/powersync-js/tree/main/demos/react-multi-client)
60+
* Featured on the [PowerSync homepage](https://www.powersync.com/) demonstrating real-time data flow between clients
5661
* [Vue To-Do List App](https://github.com/powersync-ja/powersync-js/tree/main/demos/vue-supabase-todolist)
5762
* [Angular To-Do List App](https://github.com/powersync-ja/powersync-js/tree/main/demos/angular-supabase-todolist)
5863
* [Yjs CRDT Text Collaboration Demo](https://github.com/powersync-ja/powersync-js/tree/main/demos/yjs-react-supabase-text-collab)
5964

60-
#### Starter Projects:
61-
* [example-electron](https://github.com/powersync-ja/powersync-js/tree/main/demos/example-electron): Example demonstrating the use of PowerSync together with an [Electron](https://www.electronjs.org/) rendered web app. Also see the [Node.js + Electron example](https://github.com/powersync-ja/powersync-js/tree/main/demos/example-electron-node) which runs PowerSync in the main process.
62-
* [example-capacitor](https://github.com/powersync-ja/powersync-js/tree/main/demos/example-capacitor): Example demonstrating the use of PowerSync together with a [Capacitor](https://capacitorjs.com/) app.
63-
* [example-nextjs](https://github.com/powersync-ja/powersync-js/blob/main/demos/example-nextjs/README.md): A minimal example demonstrating setup with [Next.js](https://nextjs.org/).
64-
* [example-webpack](https://github.com/powersync-ja/powersync-js/blob/main/demos/example-webpack/README.md): A minimal example demonstrating bundling with [Webpack](https://webpack.js.org/).
65-
* [example-vite](https://github.com/powersync-ja/powersync-js/blob/main/demos/example-vite/README.md): A minimal example demonstrating bundling with [Vite](https://vitejs.dev/).
65+
#### Framework Integration Examples
6666

67-
#### Other
68-
* [example-vite-encryption](https://github.com/powersync-ja/powersync-js/blob/main/demos/example-vite-encryption/README.md): A minimal example demonstrating encryption of the web database.
67+
* [Electron](https://github.com/powersync-ja/powersync-js/tree/main/demos/example-electron) - PowerSync in an Electron web app (renderer process)
68+
* Also see [Node.js + Electron](https://github.com/powersync-ja/powersync-js/tree/main/demos/example-electron-node) for PowerSync in the main process
69+
* [Capacitor](https://github.com/powersync-ja/powersync-js/tree/main/demos/example-capacitor) - PowerSync in a Capacitor app
70+
* [Next.js](https://github.com/powersync-ja/powersync-js/blob/main/demos/example-nextjs/README.md) - Minimal setup with Next.js
71+
* [Webpack](https://github.com/powersync-ja/powersync-js/blob/main/demos/example-webpack/README.md) - Bundling with Webpack
72+
* [Vite](https://github.com/powersync-ja/powersync-js/blob/main/demos/example-vite/README.md) - Bundling with Vite
73+
* [Vite with Encryption](https://github.com/powersync-ja/powersync-js/blob/main/demos/example-vite-encryption/README.md) - Web database encryption demo
6974
</Accordion>
7075

7176
<Accordion title="Node.js (alpha)" icon="node-js">
72-
#### Self-Hosted:
73-
* [CLI example](https://github.com/powersync-ja/powersync-js/tree/main/demos/example-node): Demonstrates a small Node.js CLI client opening a database, connecting PowerSync and running live queries.
77+
#### Examples
7478

75-
#### Other
76-
* [Electron](https://github.com/powersync-ja/powersync-js/tree/main/demos/example-electron-node): An Electron example that runs PowerSync in the main process using the Node.js SDK. As opposed to [this Electron example](https://github.com/powersync-ja/powersync-js/tree/main/demos/example-electron) running PowerSync in the renderer process using the Web SDK.
79+
* [CLI Example](https://github.com/powersync-ja/powersync-js/tree/main/demos/example-node) - Node.js CLI client connecting to PowerSync and running live queries
80+
* [Electron Main Process](https://github.com/powersync-ja/powersync-js/tree/main/demos/example-electron-node) - PowerSync in Electron's main process using the Node.js SDK
7781
</Accordion>
7882

7983
<Accordion title="Kotlin Multiplatform" icon="k">
80-
#### Supabase Backend:
84+
#### Supabase Backend
8185

82-
* [Minimal 'Hello PowerSync' App](https://github.com/powersync-ja/powersync-kotlin/tree/main/demos/hello-powersync)
83-
* Includes Android, iOS and Desktop (JVM) targets.
86+
* [Hello PowerSync](https://github.com/powersync-ja/powersync-kotlin/tree/main/demos/hello-powersync) - Minimal starter app
87+
* Supports Android, iOS, and Desktop (JVM) targets
8488
* [To-Do List App](https://github.com/powersync-ja/powersync-kotlin/tree/main/demos/supabase-todolist)
85-
* Includes Android, iOS targets.
86-
* [To-Do List App as a native Android application](https://github.com/powersync-ja/powersync-kotlin/tree/main/demos/android-supabase-todolist)
87-
89+
* Supports Android and iOS targets
90+
* Includes a guide for [implementing background sync on Android](https://github.com/powersync-ja/powersync-kotlin/blob/main/demos/supabase-todolist/docs/BackgroundSync.md)
91+
* [Native Android To-Do List App](https://github.com/powersync-ja/powersync-kotlin/tree/main/demos/android-supabase-todolist)
8892
</Accordion>
8993

9094
<Accordion title="Swift" icon="swift">
91-
#### Supabase Backend:
95+
#### Supabase Backend
96+
9297
* [To-Do List App](https://github.com/powersync-ja/powersync-swift/tree/main/Demo)
93-
9498
</Accordion>
9599

96100
<Accordion title=".NET (alpha)" icon="microsoft">
97-
#### Self-Hosted:
98-
* [CLI example](https://github.com/powersync-ja/powersync-dotnet/tree/main/demos/CommandLine)
101+
#### Examples
102+
103+
* [CLI Application](https://github.com/powersync-ja/powersync-dotnet/tree/main/demos/CommandLine)
99104
</Accordion>
100105

101-
<Accordion title="Custom Backend Examples" icon="screwdriver-wrench">
106+
<Accordion title="Backend Examples" icon="screwdriver-wrench">
107+
#### Django
108+
102109
* [Django Backend for To-Do List App](https://github.com/powersync-ja/powersync-django-backend-todolist-demo)
103-
* Corresponding front-end demo app: React Native [To-Do List App](https://github.com/powersync-ja/powersync-js/tree/main/demos/django-react-native-todolist) (also linked above)
104-
* [Node.js Backend for To-Do List App ](https://github.com/powersync-ja/powersync-nodejs-backend-todolist-demo)
105-
* [Node.js Backend for To-Do List App, with Firebase Auth](https://github.com/powersync-ja/powersync-nodejs-firebase-backend-todolist-demo)
106-
* Corresponding front-end demo app: Flutter [To-Do List App](https://github.com/powersync-ja/powersync.dart/tree/main/demos/firebase-nodejs-todolist) (also linked above)
110+
* For use with:
111+
* React Native [To-Do List App](https://github.com/powersync-ja/powersync-js/tree/main/demos/django-react-native-todolist)
112+
* Flutter [To-Do List App](https://github.com/powersync-ja/powersync.dart/tree/master/demos/django-todolist)
113+
114+
#### Node.js
115+
116+
* [Node.js Backend for To-Do List App](https://github.com/powersync-ja/powersync-nodejs-backend-todolist-demo)
117+
* [Node.js Backend with Firebase Auth](https://github.com/powersync-ja/powersync-nodejs-firebase-backend-todolist-demo)
118+
* For use with: Flutter [To-Do List App with Firebase Auth](https://github.com/powersync-ja/powersync.dart/tree/main/demos/firebase-nodejs-todolist)
119+
120+
#### Rails
121+
107122
* [Rails Backend for GoToFun App](https://github.com/powersync-ja/powersync-rails-flutter-demo/tree/main/gotofun-backend)
108-
* Corresponding front-end demo app: Flutter [GoToFun App](https://github.com/powersync-ja/powersync-rails-flutter-demo/tree/main/gotofun-app) (also linked above)
123+
* For use with: Flutter [GoToFun App](https://github.com/powersync-ja/powersync-rails-flutter-demo/tree/main/gotofun-app)
109124
</Accordion>
110125

111-
<Accordion title="Self-Hosting" icon="desktop">
112-
* [To-Do List App with Docker Compose](https://github.com/powersync-ja/self-host-demo)
113-
* [Postgres + Node.js Backend](https://github.com/powersync-ja/self-host-demo/tree/main/demos/nodejs-postgres-bucket-storage)
114-
* [Postgres + Postgres sync bucket storage + Node.js Backend](https://github.com/powersync-ja/self-host-demo/tree/main/demos/nodejs)
115-
* [MongoDB + Node.js Backend](https://github.com/powersync-ja/self-host-demo/tree/main/demos/nodejs-mongodb)
116-
* [MySQL + Node.js Backend](https://github.com/powersync-ja/self-host-demo/tree/main/demos/nodejs-mysql)
117-
* [Supabase Backend (Postgres) + Local Development Example](https://github.com/powersync-ja/self-host-demo/tree/main/demos/supabase)
118-
* [Django Backend](https://github.com/powersync-ja/self-host-demo/tree/main/demos/django)
126+
<Accordion title="Self-Hosting Examples" icon="desktop">
127+
#### Complete Stacks with Docker Compose
128+
129+
* [To-Do List App with Docker Compose](https://github.com/powersync-ja/self-host-demo) - Various backend configurations:
130+
* [Postgres + Node.js](https://github.com/powersync-ja/self-host-demo/tree/main/demos/nodejs-postgres-bucket-storage)
131+
* [Postgres + Postgres Sync Bucket Storage + Node.js](https://github.com/powersync-ja/self-host-demo/tree/main/demos/nodejs)
132+
* [MongoDB + Node.js](https://github.com/powersync-ja/self-host-demo/tree/main/demos/nodejs-mongodb)
133+
* [MySQL + Node.js](https://github.com/powersync-ja/self-host-demo/tree/main/demos/nodejs-mysql)
134+
* [Supabase (Postgres) + Local Development](https://github.com/powersync-ja/self-host-demo/tree/main/demos/supabase)
135+
* [Django](https://github.com/powersync-ja/self-host-demo/tree/main/demos/django)
119136
</Accordion>
120137

121138
<Accordion title="Notable Community Projects" icon="people-carry-box">
122-
#### Flutter:
139+
#### Custom Backends
140+
141+
* Laravel Backend
142+
* https://github.com/IsmailAshour/powersync-laravel-backend
143+
144+
#### Flutter Projects
123145

124-
* Flutter + Supabase + Firebase
125-
* [https://github.com/Gambley1/flutter-instagram-offline-first-clone](https://github.com/Gambley1/flutter-instagram-offline-first-clone)
126-
* Testing PowerSync with Jepsen for formal consistency validation
127-
* [https://github.com/nurturenature/jepsen-powersync](https://github.com/nurturenature/jepsen-powersync)
146+
* Flutter Instagram Clone with Supabase + Firebase
147+
* https://github.com/Gambley1/flutter-instagram-offline-first-clone
148+
* Jepsen PowerSync Testing - Formal consistency validation framework
149+
* https://github.com/nurturenature/jepsen-powersync
128150

129-
#### JavaScript & TypeScript:
151+
#### JavaScript & TypeScript Projects
130152

131-
* SolidJS hooks for PowerSync queries
132-
* [https://github.com/aboviq/powersync-solid](https://github.com/aboviq/powersync-solid)
133-
* Effect + Kysely + Stytch
134-
* [https://github.com/guillempuche/localfirst\_react\_server](https://github.com/guillempuche/localfirst_react_server)
153+
* SolidJS Hooks for PowerSync Queries
154+
* https://github.com/aboviq/powersync-solid
155+
* Effect + Kysely + Stytch Integration
156+
* https://github.com/guillempuche/localfirst_react_server
135157
* Tauri + Shadcn UI
136-
* [https://github.com/romatallinn/powersync-tauri](https://github.com/romatallinn/powersync-tauri)
137-
* Expo Web
138-
* [https://github.com/ImSingee/powersync-web-workers](https://github.com/ImSingee/powersync-web-workers)
139-
* Our [React Native Web](/client-sdk-references/react-native-and-expo/react-native-web-support) support should now remove the need to "Patch the `@powersync/web` module"
158+
* https://github.com/romatallinn/powersync-tauri
159+
* Expo Web Integration
160+
* https://github.com/ImSingee/powersync-web-workers
161+
* Note: Our [React Native Web support](/client-sdk-references/react-native-and-expo/react-native-web-support) now eliminates the need to patch the `@powersync/web` module
140162
</Accordion>
141163
</AccordionGroup>
142164

143165
## Additional Resources
144166

145-
A growing collection of use case examples and tutorials are also available:
167+
Also explore our growing collection of use case examples and tutorials:
146168

147169
<CardGroup>
148170
<Card title="Use Case Examples" icon="gear" href="/usage/use-case-examples" horizontal />

snippets/node/installation.mdx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -42,4 +42,10 @@ This SDK requires [`better-sqlite3`](https://www.npmjs.com/package/better-sqlite
4242
pnpm install better-sqlite3
4343
```
4444
</Tab>
45-
</Tabs>
45+
</Tabs>
46+
47+
**Common installation issues**
48+
49+
The `better-sqlite` package requires native compilation, which depends on certain system tools. This compilation process is handled by `node-gyp` and may fail if required dependencies are missing or misconfigured.
50+
51+
Refer to the [PowerSync Node package README](https://www.npmjs.com/package/@powersync/node) for more details.

0 commit comments

Comments
 (0)