engageintellect/spatz-2

README

spatz-2

Description

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

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.
n8n Agent Workflows.
Guestbook with Pocketbase.
Forms by svelte-superforms, with client/server validation via Zod.

Getting Started

Pocketbase Setup

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

mkdir pb-spatz-2
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.29.3/pocketbase_0.29.3_linux_amd64.zip
unzip pocketbase_0.29.3_linux_amd64.zip
./pocketbase serve --http="0.0.0.0:8090"

Log in to the Pocketbase admin console at http://localhost:8090/_/ and create a new database.
Go to settings > Import collections, then paste in the contens of ./pocketbase/pb_schema.json (from this repo) and click import.

Client Setup

Clone the repo and navigate to the project directory.

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

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

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

Install the dependencies and start the development server.

pnpm i && pnpm run dev --host

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
│   │
│   ├── /notifications
│   ├── /privacy
│   ├── /subscriptions
│   ├── /technologies
│   ├── /terms
│   │
│   ├── /guestbook
│   │   └── /post
│   │       └── /[id]
│   ├── /users
│   │   └── /[id]
│   │
│   ├── /ai
│   │   ├── /chat
│   │   ├── /context
│   │   ├── /image-gen
│   │   └── /agent (n8n Workflow)
│   │
│   ├── /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
│   │   ├── /chat (OpenAI streaming API)
│   │   ├── /donate (for stripe payments)
│   │   ├── /fortune (fetch random tech founder quote)
│   │   ├── /image-gen (OpenAI DALL-E)
│   │   ├── /agent (n8n Workflow)
│   │   ├── /repo-data
│   │
│   │__ /auth (Pocketbase auth)
│   │   ├── /login
│   │   ├── /register
│   │   ├── /logout
│   │   └── /reset-password
│   │
│   └── /my (user-specific routes)
│       └── /settings
│           ├── /account
│           ├── /profile
│           ├── /security (for password management)
│           └── /subscription (existing stripe subscriptions)
/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.

Tips

If the payments don't work, check if there is a csp part in your svelte.config.js. You have to comment it out completely for Stripe to work.

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.