spatz-2

Description

A complete, fullstack template for Svelte, based on the original spatz.

Live Demo App

What's the difference between spatz and spatz-2?

spatz uses standard forms in svelte and daisyUI. spatz-2 uses svelte-superforms, shadcn-svelte, stripe payments, and svelte-animations.

Tech Stack

• 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.
• svelte-animations: A svelte port of Magic-UI.
• Zod: TypeScript-first schema declaration and validation.

Features

• User Authentication.
• User Profile and Settings on client.
• Admin Dashboard in Pocketbase.
• Stripe Payments & Subscriptions.
• Dark/Light Mode Themes.
• Iconifty Icons.
• GSAP Animations.
• Command Pallette (CMD+j).
• AI Chatbot with OpenAI.
• Guestbook with Pocketbase.
• Forms by svelte-superforms, with client/server validation via Zod.

Getting Started

Pocketbase Setup

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

mkdir pb-spatz-2
cd pb-spatz-2

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

wget https://github.com/pocketbase/pocketbase/releases/download/v0.23.4/pocketbase_0.24.4_linux_amd64.zip
unzip pocketbase_0.24.3_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-2
cd spatz-2

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
│   ├── /schema.ts (Zod schema)
│   └── app.d.ts (global types)
├── /assets
│   └── /images
├── /components
│   ├── /magic-ui (svelte-animations)
│   └── /ui (shared components)
├── /stores (global state)
├── /routes
│   ├── /guestbook
│   │   └── /post
│   │       └── /[id]
│   ├── /users
│   │   └── /[id]
│   ├── /technologies
│   ├── /subscriptions
│   ├── /terms
│   ├── /ai
│   │   ├── /chat
│   │   ├── /context
│   │   ├── /a
│   │   ├── /b
│   │   └── /c
│   ├── /donate
│   │   ├── /cancel (redirect when cancelling stripe payment)
│   │   └── /success (redirect after successful stripe payment)
│   ├── /checkout
│   │   ├── /payment (redirect when cancelling stripe payment)
│   │   ├── /cancel (redirect when cancelling stripe payment)
│   │   └── /success (redirect after successful stripe payment)
│   ├── /api
│   │   ├── /repo-data (fetch github repository stars)
│   │   ├── /fortune (fetch random tech founder quote)
│   │   ├── /chat (OpenAI streaming API)
│   │   └── /donate (for stripe payments)
│   │__ /auth (Pocketbase auth)
│   │   ├── /login
│   │   ├── /register
│   │   ├── /logout
│   │   └── /reset-password
│   └── /my (user-specific routes)
│       ├── /profile
│       ├── /account
│       ├── /billing (for subscriptions)
│       └── /settings
/pocketbase
├── pb_schema.json
/static
└── /docs (general documentation)

Icons

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

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.