|
1 | 1 | ---
|
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." |
4 | 4 | ---
|
5 | 5 |
|
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). |
7 | 7 |
|
8 | 8 | <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). |
10 | 10 | </Check>
|
11 | 11 |
|
12 |
| - |
13 | 12 | <AccordionGroup>
|
14 | 13 | <Accordion title="Flutter" icon="flutter">
|
15 |
| - #### Supabase Backend: |
| 14 | + #### Supabase Backend |
16 | 15 |
|
17 | 16 | * [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 |
22 | 21 | * [Simple Chat App](https://github.com/powersync-ja/powersync.dart/tree/master/demos/supabase-simple-chat)
|
23 | 22 | * [Trello Clone App](https://github.com/powersync-ja/powersync-supabase-flutter-trello-demo)
|
24 | 23 |
|
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 |
28 | 30 |
|
29 |
| - #### Rails Custom Backend: |
30 | 31 | * [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 |
32 | 35 |
|
33 |
| - #### Django Custom Backend: |
34 | 36 | * [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) |
36 | 38 | </Accordion>
|
37 | 39 |
|
38 | 40 | <Accordion title="React Native & Expo" icon="react">
|
39 |
| - #### Supabase Backend: |
| 41 | + #### Supabase Backend |
| 42 | + |
40 | 43 | * [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) |
42 | 45 | * [PowerChat - Group Chat App](https://github.com/powersync-ja/powersync-js/tree/main/demos/react-native-supabase-group-chat)
|
43 | 46 |
|
44 |
| - #### Django Custom Backend: |
| 47 | + #### Django Custom Backend |
| 48 | + |
45 | 49 | * [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) |
47 | 51 | </Accordion>
|
48 | 52 |
|
49 | 53 | <Accordion title="JavaScript Web" icon="js">
|
50 |
| - #### Supabase Backend: |
| 54 | + #### Supabase Backend |
| 55 | + |
51 | 56 | * [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 |
56 | 61 | * [Vue To-Do List App](https://github.com/powersync-ja/powersync-js/tree/main/demos/vue-supabase-todolist)
|
57 | 62 | * [Angular To-Do List App](https://github.com/powersync-ja/powersync-js/tree/main/demos/angular-supabase-todolist)
|
58 | 63 | * [Yjs CRDT Text Collaboration Demo](https://github.com/powersync-ja/powersync-js/tree/main/demos/yjs-react-supabase-text-collab)
|
59 | 64 |
|
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 |
66 | 66 |
|
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 |
69 | 74 | </Accordion>
|
70 | 75 |
|
71 | 76 | <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 |
74 | 78 |
|
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 |
77 | 81 | </Accordion>
|
78 | 82 |
|
79 | 83 | <Accordion title="Kotlin Multiplatform" icon="k">
|
80 |
| - #### Supabase Backend: |
| 84 | + #### Supabase Backend |
81 | 85 |
|
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 |
84 | 88 | * [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) |
88 | 92 | </Accordion>
|
89 | 93 |
|
90 | 94 | <Accordion title="Swift" icon="swift">
|
91 |
| - #### Supabase Backend: |
| 95 | + #### Supabase Backend |
| 96 | + |
92 | 97 | * [To-Do List App](https://github.com/powersync-ja/powersync-swift/tree/main/Demo)
|
93 |
| - |
94 | 98 | </Accordion>
|
95 | 99 |
|
96 | 100 | <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) |
99 | 104 | </Accordion>
|
100 | 105 |
|
101 |
| - <Accordion title="Custom Backend Examples" icon="screwdriver-wrench"> |
| 106 | + <Accordion title="Backend Examples" icon="screwdriver-wrench"> |
| 107 | + #### Django |
| 108 | + |
102 | 109 | * [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 | + |
107 | 122 | * [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) |
109 | 124 | </Accordion>
|
110 | 125 |
|
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) |
119 | 136 | </Accordion>
|
120 | 137 |
|
121 | 138 | <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 |
123 | 145 |
|
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 |
128 | 150 |
|
129 |
| - #### JavaScript & TypeScript: |
| 151 | + #### JavaScript & TypeScript Projects |
130 | 152 |
|
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 |
135 | 157 | * 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 |
140 | 162 | </Accordion>
|
141 | 163 | </AccordionGroup>
|
142 | 164 |
|
143 | 165 | ## Additional Resources
|
144 | 166 |
|
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: |
146 | 168 |
|
147 | 169 | <CardGroup>
|
148 | 170 | <Card title="Use Case Examples" icon="gear" href="/usage/use-case-examples" horizontal />
|
|
0 commit comments