spatz 2

Spatz-2

Keterangan

Template full -stack lengkap untuk Svelte, berdasarkan spatz asli.

Aplikasi demo langsung

Apa perbedaan antara Spatz dan Spatz-2?

Spatz menggunakan bentuk standar di Svelte dan Daisyui. Spatz-2 menggunakan langsing-superforms, shadcn-svelte, pembayaran strip, dan animasi langsing.

Tumpukan teknologi

• Sveltekit: Kerangka web futuristik untuk membangun aplikasi web cepat menyala.
• PocketBase: Dokumentasi Pengguna Mandiri, Database, Admin UI, dan API yang mandiri.
• OpenAI: Chatgpt 3.5-turbo & 4.0-turbo untuk chatbots yang secara kontekstual sadar.
• Vercel AI SDK: Model AI/ML untuk pemrosesan gambar, teks, dan audio.
• TailwindCSS: Kerangka kerja CSS utilitas-pertama untuk pengembangan UI yang cepat.
• Svelte-Animations: Port Magic-UI yang langsing.
• ZOD: Deklarasi dan Validasi Skema TypeScript-First.

Fitur

• Otentikasi pengguna.
• Profil dan Pengaturan Pengguna pada Klien.
• Admin Dasbor di PocketBase.
• Pembayaran & Langganan Strip.
• Tema mode gelap/terang.
• Ikon ikon.
• Animasi GSAP.
• Perintah Pallette (CMD+J).
• AI Chatbot dengan Openai.
• Buku tamu dengan PocketBase.
• Formulir oleh SVELTE-SUPERFORMS, dengan validasi klien/server melalui ZOD.

Memulai

Pengaturan PocketBase

1. Buat direktori untuk instance saku Anda dan navigasikan ke sana.

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

2. Unduh rilis terbaru PocketBase, unzip, dan mulai 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. Masuk ke konsol admin saku di http://localhost:8090/_/ dan membuat database baru.

4. Buka Pengaturan> Koleksi Impor, lalu tempel di Contens dari ./pocketbase/pb_schema.json (dari repo ini) dan klik impor.

Pengaturan Klien

1. Kloning repo dan navigasikan ke direktori proyek.

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

2. Salin .env.example dan ganti nilainya dengan nilai sendiri.

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

3. Instal dependensi dan mulai server pengembangan.

pnpm i && pnpm run dev --host

4. Buka browser Anda ke http://localhost:5173 untuk melihat aplikasi.

Perkembangan

Struktur proyek

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

Ikon

Ikon disediakan oleh Iconify/Svelte. Anda dapat mencari ikon pada ikon.

Animasi

Animasi disediakan oleh GSAP dan mudah diimplementasikan. Anda dapat menemukan dokumentasinya di sini.

Berkontribusi pada Spatz

Kontribusi disambut, dan dihargai. Jika Anda memiliki permintaan fitur, silakan tambahkan sebagai masalah atau buat permintaan tarik.