Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/engageintellect/spatz-2
just like spatz... but with shadcn-svelte, svelte-animations, svelte-superforms, stripe payments, content-filtering, and more.
https://github.com/engageintellect/spatz-2
ai bad-words chatgpt magic-ui openai openai-api pocketbase shadcn-svelte stripe stripe-payments svelte svelte-animations svelte-superforms sveltekit tailwindcss vercel-ai vercel-ai-sdk zod
Last synced: about 7 hours ago
JSON representation
just like spatz... but with shadcn-svelte, svelte-animations, svelte-superforms, stripe payments, content-filtering, and more.
- Host: GitHub
- URL: https://github.com/engageintellect/spatz-2
- Owner: engageintellect
- License: mit
- Created: 2024-07-23T03:03:02.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-09-15T02:57:52.000Z (5 months ago)
- Last Synced: 2024-09-15T18:05:27.473Z (5 months ago)
- Topics: ai, bad-words, chatgpt, magic-ui, openai, openai-api, pocketbase, shadcn-svelte, stripe, stripe-payments, svelte, svelte-animations, svelte-superforms, sveltekit, tailwindcss, vercel-ai, vercel-ai-sdk, zod
- Language: Svelte
- Homepage: https://spatz2.engage-dev.com
- Size: 117 MB
- Stars: 88
- Watchers: 1
- Forks: 8
- Open Issues: 4
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# spatz-2
## Description
A complete, fullstack template for Svelte, based on the original [spatz](https://github.com/engageintellect).
[Live Demo App](https://spatz2.engage-dev.com)
## 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](https://kit.svelte.dev/): Futuristic web framework for building blazing fast web apps.
- [Pocketbase](https://pocketbase.io): Self-contained User Auth, Database, Admin UI, and API documentation.
- [OpenAI](https://openai.com): chatGPT 3.5-turbo & 4.0-turbo for contextually aware chatbots.
- [Vercel AI SDK](https://vercel.com/ai): AI/ML models for image, text, and audio processing.
- [TailwindCSS](https://tailwindcss.com): A utility-first CSS framework for rapid UI development.
- [svelte-animations](https://animation-svelte.vercel.app/): A svelte port of Magic-UI.
- [Zod](https://zod.dev): 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.
```bash
mkdir pb-spatz-2
cd pb-spatz-2
```
2. Download the latest release of Pocketbase, unzip it, and start the server.
```bash
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.
```bash
git clone https://github.com/engageintellect/spatz-2
cd spatz-2
```
2. Copy .env.example and replace the values with your own.
```bash
cp .env.example .env.local (or .env)
```
3. Install the dependencies and start the development server.
```bash
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](https://www.npmjs.com/package/@iconify/svelte).
You can search for icons on [Icones](https://icones.js.org/collection/all).
### Animations
Animations are provided by GSAP and are easy to implement. You can find the documentation [here](https://greensock.com/docs/v3/GSAP).
## 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.