spatz 2

spatz-2

Description

Un modèle complet et complet pour Svelte, basé sur le spatz original.

Application de démonstration en direct

Quelle est la différence entre Spatz et Spatz-2?

Spatz utilise des formes standard dans Svelte et Daisyui. SPATZ-2 utilise des formes de super-super formes, Shadcn-Svelte, Stripe Payments et Svelte-Animations.

Pile technologique

• Sveltekit: Framework Web futuriste pour créer des applications Web rapides flamboyantes.
• Pocketbase: auto-conçu User Auth, Database, Admin UI et API Documentation.
• OpenAI: Chatgpt 3.5-turbo et 4.0-turbo pour les chatbots contextuellement conscients.
• Vercel AI SDK: Modèles AI / ML pour l'image, le texte et le traitement audio.
• TailwindCSS: un cadre CSS d'abord de l'utilitaire pour le développement rapide de l'interface utilisateur.
• Svelte-Animations: un port svelte de Magic-UI.
• ZOD: DÉCLARATION ET VALIDATION SCHEMA-FIRST-FIRST.

Caractéristiques

• Authentification utilisateur.
• Profil utilisateur et paramètres sur le client.
• Tableau de bord d'administration dans Pocket Base.
• Paiements et abonnements à rayures.
• Thèmes en mode sombre / léger.
• Icônes iconifles.
• Animations GSAP.
• Palette de commande (CMD + J).
• Ai chatbot avec openai.
• Livre d'or avec une base de poche.
• Formulaires par Svelte-Superforms, avec validation client / serveur via ZOD.

Commencer

Configuration de la base de poche

1. Créez un répertoire pour votre instance de poche et y accédez.

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

2. Téléchargez la dernière version de Pocketbase, dézippez-la et démarrez le serveur.

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. Connectez-vous à la console d'administration de PocketBase en http://localhost:8090/_/ et créez une nouvelle base de données.

4. Accédez à Paramètres> Importer des collections, puis collez dans les contenses de ./pocketbase/pb_schema.json (à partir de ce repo) et cliquez sur Importer.

Configuration du client

1. Clone le repo et accédez au répertoire du projet.

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

2. Copiez .env.example et remplacez les valeurs par les vôtres.

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

3. Installez les dépendances et démarrez le serveur de développement.

pnpm i && pnpm run dev --host

4. Ouvrez votre navigateur à http://localhost:5173 pour voir l'application.

Développement

Structure du projet

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

Icônes

Les icônes sont fournies par iconify / svelte. Vous pouvez rechercher des icônes sur les icones.

Animations

Les animations sont fournies par GSAP et sont faciles à mettre en œuvre. Vous pouvez trouver la documentation ici.

Contribuant à Spatz

Les contributions sont les bienvenues et appréciées. Si vous avez une demande de fonctionnalité, veuillez l'ajouter en tant que problème ou faire une demande de traction.