KARNY

Suivi d'entretien et historique de votre véhicule
Application Next.js — Ajoutez, suivez et analysez l'entretien de votre voiture

Fonctionnalités • Stack • Déploiement • Développement

---

✨ Fonctionnalités

• 🚗 Garage — Gérez tous vos véhicules avec leurs informations (marque, modèle, année, immatriculation)
• 📝 Journal d'entretien — Ajoutez des entrées : vidange, pneus, freins, révision, contrôle technique…
• 📊 Dashboard — Visualisez l'état général et les statistiques de votre parc automobile
• 🔧 Pièces détachées — Suivi des pièces : achat, installation, garantie
• 📈 Statistiques — Analyse des coûts d'entretien par mois, par type d'intervention
• 🩺 Carnet de santé — Vue d'ensemble de l'état de santé de chaque véhicule
• 📄 Génération PDF — Export des rapports d'entretien avec @react-pdf/renderer
• ☁️ Cloud Supabase — Synchronisation des données sur le cloud
• 💾 Mode démo — Fonctionnalités disponibles sans compte (stockage local)
• 🌙 Thème sombre/clair — Interface adaptative avec next-themes
• 📱 Mobile-first — Design responsive optimisé pour mobile avec BottomNav

🖼️ Pages

Page	Description
Accueil	Splash screen + navigation rapide vers les sections principales
Garage	Liste des véhicules avec leurs informations essentielles
Ajout	Formulaire d'ajout d'une nouvelle entrée d'entretien
Dashboard	Statistiques globales et graphiques d'entretien
Pièces	Gestion des pièces détachées et consommables
Logs	Historique complet des entretiens avec filtres
Santé	État de santé détaillé de chaque véhicule

🛠️ Stack Technique

Technologie	Usage
Next.js 16	Framework React — App Router, rendu statique
React 19	UI — Dernière version avec les hooks les plus récents
TypeScript	Typage statique pour un code robuste
Tailwind CSS 4	Design system utilitaire nouvelle génération
Supabase	Backend — Authentification, base de données PostgreSQL
@react-pdf/renderer	Génération de documents PDF côté client
next-themes	Gestion du thème sombre/clair
Geist Font	Typographie moderne (Geist Sans + Geist Mono)

🚀 Déploiement

L'application est déployée sur Cloudflare Pages (statique).

# Build de production
npm run build

# Lancement du serveur de production
npm start

Paramètres Cloudflare Pages

Champ	Valeur
Framework	None
Build command	npm run build
Build output directory	out
next.config.ts	output: 'export' ✅ déjà configuré
Deploy command	(vide)

📦 Variables d'environnement

Variable	Description
NEXT_PUBLIC_SUPABASE_URL	URL du projet Supabase
NEXT_PUBLIC_SUPABASE_ANON_KEY	Clé publique Supabase (anon)

💻 Développement

# Cloner le projet
git clone https://github.com/idhem85/karny.git
cd karny

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

# Installer les dépendances
npm install

# Lancer le serveur de développement
npm run dev

# Build de production
npm run build

Structure du projet

app/                      # App Router (Next.js)
├── page.tsx              # Page d'accueil (Splash)
├── layout.tsx            # Layout principal
├── garage/               # Gestion des véhicules
├── add-log/              # Ajout d'entretien
├── dashboard/            # Tableau de bord
├── parts/                # Pièces détachées
├── logs/                 # Historique
├── health/               # Santé véhicule
├── stats/                # Statistiques
├── globals.css           # Styles globaux
├── error.tsx             # Page d'erreur
└── not-found.tsx         # Page 404

components/               # Composants réutilisables
├── BottomNav.tsx         # Navigation mobile
├── ThemeToggle.tsx       # Bouton thème
├── FloatingActionButton.tsx  # FAB
└── ...

lib/                      # Utilitaires et fonctions
├── supabase.ts           # Client Supabase
└── ...

hooks/                    # Hooks personnalisés
data/                     # Données statiques
public/                   # Assets statiques

📄 Licence

Projet privé — Tous droits réservés.

---

Développé par idhem85
KARNY — Suivi d'entretien de votre véhicule