spatz 2

Spatz-2

Beschreibung

Eine vollständige FullStack -Vorlage für Svelte, basierend auf dem ursprünglichen Spatz.

Live -Demo -App

Was ist der Unterschied zwischen Spatz und Spatz-2?

Spatz verwendet Standardformulare in Selte und Daisyui. SPATZ-2 verwendet Selte-Superforms, Shadcn-Sufelte, Stripe Payments und Svelte-Animations.

Tech Stack

• SVELTEKIT: Futuristisches Web -Framework zum Erstellen von Blazing Fast Web Apps.
• PocketBase: Selbübereingenommene Benutzerauth-, Datenbank-, Admin-UI- und API-Dokumentation.
• OpenAI: Chatgpt 3.5-Turbo & 4.0-Turbo für kontextbezogene Chatbots.
• Vercel AI SDK: AI/ML -Modelle für Bild-, Text- und Audioverarbeitung.
• Tailwindcss: Ein Utility-First CSS-Framework für die schnelle UI-Entwicklung.
• Sufle-Animations: Ein schlanker Hafen von Magic-UI.
• ZOD: Deklaration und Validierung von Typscript-First-Schema.

Merkmale

• Benutzerauthentifizierung.
• Benutzerprofil und Einstellungen auf dem Client.
• Admin -Dashboard in Taschenbasis.
• Streifenzahlungen und Abonnements.
• Dunkel-/Lichtmodus -Themen.
• Ikonifty -Symbole.
• GSAP -Animationen.
• Befehlspallette (CMD+J).
• Ai Chatbot mit Openai.
• Gästebuch mit PocketBase.
• Formulare von Svelte-superforms mit Client/Server-Validierung über ZOD.

Erste Schritte

Taschenbasis -Setup

1. Erstellen Sie ein Verzeichnis für Ihre Taschenbasis -Instanz und navigieren Sie dazu.

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

2. Laden Sie die neueste Version von PocketBase herunter, entpacken Sie es und starten Sie den 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. Melden Sie sich bei der PocketBase Admin -Konsole unter http://localhost:8090/_/ an und erstellen Sie eine neue Datenbank.

4. Gehen Sie zu Einstellungen> Kollektionen importieren, dann in den Zapfen von ./pocketbase/pb_schema.json (aus diesem Repo) einfügen und importieren.

Client -Setup

1. Klonen Sie das Repo und navigieren Sie zum Projektverzeichnis.

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

2. Kopieren Sie .Env.example und ersetzen Sie die Werte durch Ihre eigenen.

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

3. Installieren Sie die Abhängigkeiten und starten Sie den Entwicklungsserver.

pnpm i && pnpm run dev --host

4. Öffnen Sie Ihren Browser in http://localhost:5173 um die App zu sehen.

Entwicklung

Projektstruktur

 /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)

Ikonen

Die Symbole werden von Iconify/Svelte bereitgestellt. Sie können nach Symbolen auf Symbolen suchen.

Animationen

Animationen werden von GSAP bereitgestellt und sind einfach zu implementieren. Hier finden Sie die Dokumentation.

Beitrag zu Spatz

Beiträge werden begrüßt und geschätzt. Wenn Sie eine Feature -Anfrage haben, fügen Sie sie bitte als Ausgabe hinzu oder stellen Sie eine Pull -Anfrage.