Erant-OldApp/README.md

Svelte + Appwrite = 🚀

Blazing fast development with done backend and fully-prepared frontend.

Appwrite installation

Appwrite installation

Frontend included

• tailwind
• scss
• css reset
• typescript
• routing
• ready routes
• oauth
• folder structure
• common components
• simple icons
• service worker
• path aliases
• database realtime subscribers
• vite
• prettier
• editorconfig

Database subscribers

  <script>
    import CollectionSubscriber from '$lib/database'
    import Layout from '$lib/components/Layout'

    const subscriber = new CollectionSubscriber('[database-id]', '[collection-id]')
    // listen changes in database and automatically rerender on change
    // current data = [{ name: 'John', lastName: 'Doe' }, ...]
  </script>

  <Layout>
    {$subscriber ? $subscriber[0].name : ''}
  </Layout>

Realtime todo app using CollectionSubscriber

<script>
  import CollectionSubscriber from '$lib/database'
  import Layout from '$lib/components/Layout'

  const subscriber = new CollectionSubscriber('[database-id]', '[collection-id]')
  let value = ''
</script>

<Layout>
  <div>
    <input type="text" bind:value />
    <button on:click={() => subscriber.add({ name: value })}>Add</button>
  </div>

  <div>
    {#each $subscriber as collectionDocument}
      <div>
        <p>{collectionDocument.name}</p>
        <button on:click={() => subscriber.delete(collectionDocument.$id)}>Remove</button>
      </div>
    {/each}
  </div>
</Layout>

Routing

  <script>
    import { Router, Route, ProtectedRoute, Redirect, navigate, link, back, forward } from '$lib/router'
    import Home from './routes/home.svelte'
    import Profile from './routes/profile.svelte'
    import { account } from '$lib/stores/appwrite'
    import oauth from '$lib/stores/oauth'

    const user = oauth(account)
  </script>

  <main>
    <Router>
      <Route path="/" component={Home}>
      <ProtectedRoute path="/profile" allow={$user?.status} fallback="/" component={Profile}>

      <a href="/about" use:link>About us</a>
    </Router>
  </main>

Social auth icons

  <script>
    import { Github } from '@icons-pack/svelte-simple-icons'
    import Layout from '$lib/components/Layout'
    import { account, url } from '$lib/stores/appwrite'
  </script>

  <Layout>
    <button on:click={() => account.createOAuth2Session('github', url.oauth.success, url.oauth.failure)}>
      <Github />
    </button>
  </Layout>