spatz 2

Спатц-2

Описание

Полный шаблон Fullstack для Svelte, основанный на оригинальном Спатце.

Живое демонстрационное приложение

В чем разница между Спатцем и Спатцем-2?

Спатц использует стандартные формы в стройной и Daisyui. Spatz-2 использует стройные сборы, Shadcn-Svelte, полосовые платежи и стройные анимации.

Технический стек

• SVELTEKIT: футуристическая веб -структура для создания Blazing Fast Web Apps.
• Pocketbase: автономная пользовательская авторитет, база данных, пользовательский интерфейс и документация API.
• OpenAI: CHATGPT 3.5-Turbo & 4.0-Turbo для контекста-аккуратных чат-ботов.
• Vercel AI SDK: модели AI/ML для обработки изображения, текста и аудио.
• Tailwindcss: первая коммунальная структура CSS для быстрой разработки пользовательского интерфейса.
• СВОВНАЯ АВАЗИЯ: СВОВНЫЙ ПОРТ В МАГИО.
• ZOD: TypeScript-первая схема объявления и проверка.

Функции

• Аутентификация пользователя.
• Профиль пользователя и настройки на клиенту.
• Административная панель в карманной базе.
• Платежи и подписки.
• Темные/световые темы.
• Иконичные значки.
• GSAP анимации.
• Команда Паллетт (CMD+J).
• Ай чат -бот с Openai.
• Гостевая книга с карманной базой.
• Формы от Svelte-Superforms, с проверкой клиента/сервера через ZOD.

Начиная

Настройка карманной базы

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. Перейдите в настройки> Импортные коллекции, затем вставьте в Contens of ./pocketbase/pb_schema.json (из этого репо) и нажмите «Импорт».

Настройка клиента

1. Клонировать репо и перейти к каталогу проекта.

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 и легко реализовать. Вы можете найти документацию здесь.

Вклад в Спатц

Вклады приветствуются и ценятся. Если у вас есть запрос на функцию, добавьте его в качестве проблемы или сделайте запрос на вытяжение.