spatz 2

Spatz-2

คำอธิบาย

เทมเพลต Fullstack ที่สมบูรณ์สำหรับ Svelte ซึ่งขึ้นอยู่กับ Spatz ดั้งเดิม

แอพสาธิตสด

Spatz และ Spatz-2 แตกต่างกันอย่างไร?

Spatz ใช้รูปแบบมาตรฐานใน Svelte และ Daisyui Spatz-2 ใช้ svelte-superforms, Shadcn-Svelte, การชำระเงินลายและ Svelte-Animations

ซ้อนเทค

• Sveltekit: Futuristic Web Framework สำหรับการสร้างแอพพลิเคชั่นเว็บที่รวดเร็ว
• PocketBase: ผู้ใช้ที่มีอยู่ในตัวเองฐานข้อมูลผู้ดูแลระบบ UI และ API
• OpenAI: CHATGPT 3.5-turbo & 4.0-turbo สำหรับ chatbots ที่รับรู้ตามบริบท
• Vercel AI SDK: โมเดล AI/ML สำหรับการประมวลผลภาพข้อความและเสียง
• Tailwindcss: เฟรมเวิร์ก CSS ยูทิลิตี้แรกสำหรับการพัฒนา UI อย่างรวดเร็ว
• Svelte-Animations: พอร์ต Svelte of Magic-ui
• ZOD: การประกาศและการตรวจสอบสคีมา TypeScript ก่อน

คุณสมบัติ

• การรับรองความถูกต้องของผู้ใช้
• โปรไฟล์ผู้ใช้และการตั้งค่าบนไคลเอนต์
• แดชบอร์ดผู้ดูแลระบบใน PocketBase
• การชำระเงินและการสมัครสมาชิก
• ชุดรูปแบบโหมดมืด/แสง
• ไอคอน Iconifty
• แอนิเมชั่น GSAP
• คำสั่งพาเล็ต (CMD+J)
• AI Chatbot กับ Openai
• สมุดเยี่ยมพร้อม PocketBase
• แบบฟอร์มโดย svelte-superforms พร้อมการตรวจสอบไคลเอนต์/เซิร์ฟเวอร์ผ่าน ZOD

เริ่มต้น

การตั้งค่า PocketBase

1. สร้างไดเรกทอรีสำหรับอินสแตนซ์ PocketBase ของคุณและนำทางไป

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

2. ดาวน์โหลดรุ่นล่าสุดของ PocketBase เปิดซิปและเริ่มเซิร์ฟเวอร์

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. เข้าสู่ระบบคอนโซลผู้ดูแลระบบ PocketBase ที่ http://localhost:8090/_/ และสร้างฐานข้อมูลใหม่

4. ไปที่การตั้งค่า> นำเข้าคอลเลกชันจากนั้นวางในการเชื่อมต่อของ ./pocketbase/pb_schema.json (จาก repo นี้) และคลิกนำเข้า

การตั้งค่าไคลเอนต์

1. โคลน repo และนำทางไปยังไดเรกทอรีโครงการ

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

2. คัดลอก. env.example และแทนที่ค่าด้วยของคุณเอง

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

3. ติดตั้งการพึ่งพาและเริ่มต้นเซิร์ฟเวอร์การพัฒนา

pnpm i && pnpm run dev --host

4. เปิดเบราว์เซอร์ของคุณเป็น http://localhost:5173 เพื่อดูแอพ

การพัฒนา

โครงสร้างโครงการ

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

ไอคอน

ไอคอนจัดทำโดย iconify/svelte คุณสามารถค้นหาไอคอนบนไอคอน

ภาพเคลื่อนไหว

แอนิเมชั่นจัดทำโดย GSAP และใช้งานง่าย คุณสามารถค้นหาเอกสารได้ที่นี่

มีส่วนร่วมใน spatz

การบริจาคได้รับการต้อนรับและชื่นชม หากคุณมีคำขอคุณสมบัติโปรดเพิ่มเป็นปัญหาหรือทำคำขอดึง