spatz

Description

A complete, fullstack template for Svelte.

Demo App

Features

• Sveltekit: Futuristic web framework for building blazing fast web apps.
• Pocketbase: Self-contained User Auth, Database, Admin UI, and API documentation.
• OpenAI: chatGPT 3.5-turbo & 4.0-turbo for contextually aware chatbots.
• Vercel AI SDK: AI/ML models for image, text, and audio processing.
• TailwindCSS: A utility-first CSS framework for rapid UI development.
• DaisyUI: A tailwind-based component library.
• Zod: TypeScript-first schema declaration and validation.

Screenshots

Home & Features

User Profile & Settings UI

Client/Pocketbase UI

Getting Started

Pocketbase Setup

1. Create a directory for your Pocketbase instance and navigate to it.

mkdir pb-spatz
cd pb-spatz

2. Download the latest release of Pocketbase, unzip it, and start the server.

wget https://github.com/pocketbase/pocketbase/releases/download/v0.22.9/pocketbase_0.22.9_linux_amd64.zip
unzip pocketbase_0.22.9_linux_amd64.zip
./pocketbase serve --http="0.0.0.0:8090"

3. Log in to the Pocketbase admin console at http://localhost:8090/_/ and create a new database.

4. Go to settings > Import collections, then paste in the contens of ./pocketbase/pb_schema.json (from this repo) and click import.

Client Setup

1. Clone the repo and navigate to the project directory.

git clone https://github.com/engageintellect/spatz
cd spatz

2. Copy .env.example and replace the values with your own.

cp .env.example .env.local (or .env)

3. Install the dependencies and start the development server.

pnpm i && pnpm run dev --host

4. Open your browser to http://localhost:5173 to see the app.

Development

Project Structure

/src
├── /lib
│   └── app.d.ts (global types)
├── /assets
│   └── /images
├── /components
├── /stores (global state)
├── /routes
│   ├── /guestbook
│   ├── /ai (nested routes)
│   │   ├── /a
│   │   ├── /b
│   │   └── /c
│   ├── /api
│   │   ├── /repoData (fetch github repository stars)
│   │   ├── /chat (OpenAI streaming API)
│   │__ /auth (Pocketbase auth)
│   │   ├── /login
│   │   ├── /register
│   │   ├── /logout
│   │   └── /reset-password
│   └── /my (user-specific routes)
│       ├── /account
│       ├── /profile
│       └── /settings
/pocketbase
├── pb_schema.json
/static
└── /docs (general documentation)

Icons

Icons are provided by iconify/svelte. You can search for icons on Icones.

Theming and Styling

The app comes pre-loaded with all of the standard themes from DaisyUI. You can also create your own here

Animations

Animations are provided by GSAP and are easy to implement. You can find the documentation here.

Contributing to spatz

Contributions are welcomed, and appreciated. If you have a feature request, please add it as an issue or make a pull request.