Template de Services SvelteKit

Un template moderne et complet pour créer rapidement des applications web avec SvelteKit, TailwindCSS, et une architecture robuste.

🚀 Fonctionnalités

• SvelteKit 5 avec les dernières fonctionnalités (Runes, Snippets)
• TailwindCSS 4 pour un design moderne et responsive
• Authentification complète avec gestion des sessions
• API REST structurée avec Axios et retry automatique
• TanStack Query pour la gestion des données
• Composants UI modernes avec shadcn/ui et bits-ui
• Gestion des organisations (optionnel)
• TypeScript pour la sécurité des types
• Formulaires validés avec Zod et TanStack Form

📋 Prérequis

• Node.js 18+
• pnpm 8+
• Python 3.8+ (pour Copier)

🛠️ Installation

Avec Copier

# Installer Copier si nécessaire
pip install copier

# Générer un nouveau projet à partir du template
copier copy gh:oxiliere/oxtemplate mon-nouveau-projet

# Ou depuis un chemin local
copier copy /chemin/vers/oxtemplate mon-nouveau-projet

Manuellement

# Cloner le template
git clone https://github.com/oxiliere/oxtemplate.git
cd oxtemplate/{{app_name}}

# Installer les dépendances
pnpm install

# Copier le fichier d'environnement
cp .env.example .env

# Configurer les variables d'environnement dans .env

# Lancer le serveur de développement
pnpm dev

⚙️ Configuration

Le fichier .env contient les variables d'environnement nécessaires :

# URL de base de l'API principale
VITE_PUBLIC_API_BASE_URL=http://localhost:8000

# URL de l'API d'authentification
VITE_PUBLIC_API_AUTH_URL=http://localhost:8000

# URL de base pour l'interface d'authentification
VITE_PUBLIC_AUTH_BASE_URL=http://localhost:5173

# URL de redirection après déconnexion
VITE_PUBLIC_LOGOUT_REDIRECT_URL=http://localhost:5173/auth/login

📦 Structure du projet

{{app_name}}/
├── src/
│   ├── lib/
│   │   ├── api/              # Configuration API et endpoints
│   │   ├── components/       # Composants réutilisables
│   │   │   ├── layout/      # Composants de mise en page
│   │   │   ├── shared/      # Composants partagés
│   │   │   └── ui/          # Composants UI (shadcn/ui)
│   │   ├── hooks/           # Hooks Svelte personnalisés
│   │   ├── pages/           # Pages complètes
│   │   ├── stores/          # Stores Svelte
│   │   └── utilities/       # Fonctions utilitaires
│   └── routes/              # Routes SvelteKit
├── .env.example             # Variables d'environnement exemple
├── package.json
└── README.md

🎨 Stack technique

Frontend

• SvelteKit - Framework web moderne
• Svelte 5 - Framework UI réactif avec Runes
• TypeScript - Typage statique
• TailwindCSS 4 - Framework CSS utility-first
• Vite 7 - Build tool ultra-rapide

UI/UX

• shadcn/ui - Composants UI accessibles
• bits-ui - Composants headless
• Lucide - Icônes modernes
• Sonner - Notifications toast élégantes
• Mode Watcher - Gestion du thème clair/sombre

Gestion des données

• TanStack Query - Gestion d'état serveur
• TanStack Form - Gestion de formulaires
• Axios - Client HTTP
• Zod - Validation de schémas

Utilitaires

• clsx & tailwind-merge - Gestion des classes CSS
• lodash - Fonctions utilitaires
• store2 - LocalStorage amélioré

🔧 Scripts disponibles

# Développement
pnpm dev

# Build de production
pnpm build

# Prévisualisation du build
pnpm preview

# Vérification TypeScript
pnpm check

# Formatage du code
pnpm format

# Linting
pnpm lint

📝 Utilisation du template

Créer une nouvelle page

<!-- src/lib/pages/MaPage.svelte -->
<script lang="ts">
  import { Button } from '$lib/components/ui/button';
</script>

<div class="container mx-auto p-8">
  <h1 class="text-3xl font-bold">Ma nouvelle page</h1>
  <Button>Action</Button>
</div>

Créer un endpoint API

// src/lib/api/endpoints/mon-endpoint.ts
import APIEndPoint from '@/utilities/rest';

export const MonEndpoint = {
  items: new APIEndPoint('/items', '/items/:id'),
};

Utiliser TanStack Query

// src/lib/api/queries/mon-query.ts
import { queryOptions } from '@tanstack/svelte-query';
import { MonEndpoint } from '../endpoints/mon-endpoint';

export const monQueryOptions = {
  list: () => queryOptions({
    queryKey: ['items'],
    queryFn: () => MonEndpoint.items.list(),
  }),
};

🤝 Contribution

Les contributions sont les bienvenues ! N'hésitez pas à ouvrir une issue ou une pull request.

📄 Licence

MIT © Oxiliere

🔗 Liens utiles

• Documentation SvelteKit
• Documentation Svelte 5
• Documentation TailwindCSS
• Documentation TanStack Query