Svelte + Appwrite = 🚀

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

Frontend included:

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

Included:

• prettier
• editorconfig

Database subscribers

  <script>
    import { createCollectionSubscriber } from '$lib/database'
    import Layout from '$lib/components/Layout'

    const subscriber = createCollectionSubscriber('[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>

  <script>
    import { createDocumentSubscriber } from '$lib/database'
    import Layout from '$lib/components/Layout'

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

  <Layout>
    {$subscriber?.name ?? ''}
  </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>