+<nav><ul><li><a href="/">TinyBase</a></li><li><a href="/demos/">Demos</a></li></ul></nav><section class="s1" id="/demos/" data-id="D2"><h1>Demos</h1><p>This is a selection of demos that show how <a href="/">TinyBase</a> can be used in real-world applications.</p><h3 id="tinyhub">TinyHub</h3><p><a href="https://github.com/tinyplex/tinyhub">TinyHub</a> is a local-first GitHub client, built in public, using <a href="/">TinyBase</a>, React, and GitHub OAuth. You can try it out <a href="https://tinyhub.org">here</a>.</p><h3 id="tinyrooms">TinyRooms</h3><p><a href="https://github.com/tinyplex/tinyrooms">TinyRooms</a> is a local-first app demo, using <a href="/">TinyBase</a>, PartyKit, and optional GitHub OAuth. You can try it out <a href="https://tinyrooms.jamesgpearce.partykit.dev">here</a>.</p><h3 id="vite-templates">Vite Templates</h3><p>You can also use Vite to start simple demo apps of your own. We provide the following templates to get started with:</p><div class="table"><table><thead><tr><th>Template</th><th>Language</th><th>React</th><th>Plus</th></tr></thead><tbody><tr><td><a href="https://github.com/tinyplex/vite-tinybase">vite-tinybase</a></td><td>JavaScript</td><td>No</td><td></td></tr><tr><td><a href="https://github.com/tinyplex/vite-tinybase-ts">vite-tinybase-ts</a></td><td>TypeScript</td><td>No</td><td></td></tr><tr><td><a href="https://github.com/tinyplex/vite-tinybase-react">vite-tinybase-react</a></td><td>JavaScript</td><td>Yes</td><td></td></tr><tr><td><a href="https://github.com/tinyplex/vite-tinybase-ts-react">vite-tinybase-ts-react</a></td><td>TypeScript</td><td>Yes</td><td></td></tr><tr><td><a href="https://github.com/tinyplex/vite-tinybase-ts-react-sync">vite-tinybase-ts-react-sync</a></td><td>TypeScript</td><td>Yes</td><td><a href="/guides/synchronization/">Synchronization</a></td></tr><tr><td><a href="https://github.com/tinyplex/vite-tinybase-ts-react-crsqlite">vite-tinybase-ts-react-crsqlite</a></td><td>TypeScript</td><td>Yes</td><td>CR-SQLite</td></tr><tr><td><a href="https://github.com/tinyplex/tinybase-ts-react-partykit">tinybase-ts-react-partykit</a></td><td>TypeScript</td><td>Yes</td><td>PartyKit</td></tr><tr><td><a href="https://github.com/tinyplex/tinybase-ts-react-electricsql">tinybase-ts-react-electricsql</a></td><td>TypeScript</td><td>Yes</td><td>ElectricSQL</td></tr></tbody></table></div><h3 id="on-site-demos">On-site Demos</h3><p>For the main set of <a href="/">TinyBase</a> demos on this site, we start with the obligatory '<a href="/demos/hello-world/">Hello World</a>' example, and then advance from there. Some demos have multiple versions which start simple and then gain additional functionality with subsequent iterations.</p><p>For a 'kitchen-sink' demo that shows <a href="/">TinyBase</a> really being put through its paces, take a look at the <a href="/demos/drawing/">Drawing</a> demo.</p><p>This set of demos should grow over time, so keep checking back!</p><section class="s2" id="/demos/hello-world/" data-id="HW"><h2><a href="/demos/hello-world/">Hello World</a></h2><p>These demos demonstrate the absolute basics of using <a href="/">TinyBase</a>, with an obligatory 'Hello World' example.</p><ul><li><a href="/demos/hello-world/hello-world-v1/">Hello World v1</a></li><li><a href="/demos/hello-world/hello-world-v2/">Hello World v2</a></li><li><a href="/demos/hello-world/hello-world-v3/">Hello World v3</a></li><li><a href="/demos/hello-world/hello-world-v4/">Hello World v4</a></li></ul></section><section class="s2" id="/demos/rolling-dice/" data-id="RD"><h2><a href="/demos/rolling-dice/">Rolling Dice</a></h2><p>These demos demonstrate metrics (such as average dice rolls) and indexes (such as grouping multiple dice rolls).</p><ul><li><a href="/demos/rolling-dice/averaging-dice-rolls/">Averaging Dice Rolls</a></li><li><a href="/demos/rolling-dice/grouping-dice-rolls/">Grouping Dice Rolls</a></li></ul></section><section class="s2" id="/demos/countries/" data-id="C2"><h2><a href="/demos/countries/">Countries</a></h2><p>In this demo, we build a simple app that uses React and a simple <a href="/api/store/interfaces/store/store/"><code>Store</code></a> object to load and display country data.</p></section><section class="s2" id="/demos/todo-app/" data-id="TA"><h2><a href="/demos/todo-app/">Todo App</a></h2><p>These demos demonstrate how to build a classic 'Todo' app, with successive levels of complexity.</p><ul><li><a href="/demos/todo-app/todo-app-v1-the-basics/">Todo App v1 (the basics)</a></li><li><a href="/demos/todo-app/todo-app-v2-indexes/">Todo App v2 (indexes)</a></li><li><a href="/demos/todo-app/todo-app-v3-persistence/">Todo App v3 (persistence)</a></li><li><a href="/demos/todo-app/todo-app-v4-metrics/">Todo App v4 (metrics)</a></li><li><a href="/demos/todo-app/todo-app-v5-checkpoints/">Todo App v5 (checkpoints)</a></li><li><a href="/demos/todo-app/todo-app-v6-collaboration/">Todo App v6 (collaboration)</a></li></ul></section><section class="s2" id="/demos/drawing/" data-id="D3"><h2><a href="/demos/drawing/">Drawing</a></h2><p>In this demo, we build a more complex drawing app, using many of the features of <a href="/">TinyBase</a> together.</p></section><section class="s2" id="/demos/city-database/" data-id="CD"><h2><a href="/demos/city-database/">City Database</a></h2><p>In this demo, we build an app that loads over 140,000 records to push the size and performance limits of <a href="/">TinyBase</a>.</p></section><section class="s2" id="/demos/car-analysis/" data-id="CA"><h2><a href="/demos/car-analysis/">Car Analysis</a></h2><p>In this demo, we build an app that showcases the query capabilities of <a href="/">TinyBase</a> v2.0, grouping and sorting dimensional data for lightweight analytical usage.</p></section><section class="s2" id="/demos/movie-database/" data-id="MD"><h2><a href="/demos/movie-database/">Movie Database</a></h2><p>In this demo, we build an app that showcases the relational query capabilities of <a href="/">TinyBase</a> v2.0, joining together information about movies, directors, and actors.</p></section><section class="s2" id="/demos/word-frequencies/" data-id="WF"><h2><a href="/demos/word-frequencies/">Word Frequencies</a></h2><p>In this demo, we load the list of the 10,000 most common words in English, index them for a fast search experience, and showcase <a href="/">TinyBase</a> v2.1's ability to register a <a href="/api/store/type-aliases/store/row/"><code>Row</code></a> in multiple <a href="/api/indexes/type-aliases/concept/slice/"><code>Slice</code></a> arrays of an <a href="/api/indexes/type-aliases/concept/index/"><code>Index</code></a>.</p></section><section class="s2" id="/demos/ui-components/" data-id="UIC"><h2><a href="/demos/ui-components/">UI Components</a></h2><p>In this set of demos, we use a <a href="/api/store/interfaces/store/store/"><code>Store</code></a> containing some sample data to showcase the UI components in the <a href="/api/ui-react-dom/"><code>ui-react-dom</code></a> module.</p><ul><li><a href="/demos/ui-components/valuesinhtmltable/"><ValuesInHtmlTable /></a></li><li><a href="/demos/ui-components/tableinhtmltable/"><TableInHtmlTable /></a></li><li><a href="/demos/ui-components/sortedtableinhtmltable/"><SortedTableInHtmlTable /></a></li><li><a href="/demos/ui-components/sliceinhtmltable/"><SliceInHtmlTable /></a></li><li><a href="/demos/ui-components/relationshipinhtmltable/"><RelationshipInHtmlTable /></a></li><li><a href="/demos/ui-components/resulttableinhtmltable/"><ResultTableInHtmlTable /></a></li><li><a href="/demos/ui-components/resultsortedtableinhtmltable/"><ResultSortedTableInHtmlTable /></a></li><li><a href="/demos/ui-components/editablevalueview/"><EditableValueView /></a></li><li><a href="/demos/ui-components/editablecellview/"><EditableCellView /></a></li><li><a href="/demos/ui-components/inspector/"><Inspector /></a></li></ul></section></section>
0 commit comments