Skip to main content

​
Prérequis

Node.js 18+ installé (Télécharger)
npm ou yarn installé
Compte Supabase créé (S’inscrire)
Git installé

​
Installation

1

Cloner le repository

git clone https://github.com/Lucdidi3514/assopedia-v2
cd kitasso
2

Installer les dépendances

npm install
Dépendances principales :
  • react 18.3.1
  • vite 6.3.5
  • @supabase/supabase-js 2.x
  • react-router-dom 6.x
  • tailwindcss 3.x
L’installation prend environ 2-3 minutes
3

Configurer Supabase

​
Créer un projet Supabase

  1. Allez sur supabase.com
  2. Créez un nouveau projet
  3. Notez l’URL et la clé API (anon key)

​
Créer le fichier .env

# À la racine du projet
touch .env
Ajoutez ces variables :
VITE_SUPABASE_URL=https://xxxxx.supabase.co
VITE_SUPABASE_ANON_KEY=eyJhbG...
Ne commitez JAMAIS le fichier .env ! Il est déjà dans .gitignore

​
Où trouver ces valeurs ?

Dans votre dashboard Supabase :
  • Settings → API
  • Copiez URL et anon public key
4

Initialiser la base de données

​
Exécuter les migrations

Les migrations sont dans supabase/migrations/. Vous avez 2 options :Option A : Via le Dashboard Supabase (recommandé pour démarrer)
  1. Ouvrez SQL Editor dans votre dashboard
  2. Exécutez les migrations dans l’ordre chronologique
  3. Commencez par 20240101000000_initial_schema.sql (exemple)
Option B : Via Supabase CLI (si installé)
supabase db push
Il y a 43 fichiers de migration à exécuter. Le dashboard vous permet de les copier/coller un par un.

​
Créer les buckets Storage

Dans Storage du dashboard :
  1. Créez un bucket tool_logos
    • Public : ✅ Oui
    • File size limit : 2MB
    • Allowed MIME types : image/*
  2. Créez un bucket site_assets
    • Public : ✅ Oui
    • File size limit : 5MB
    • Allowed MIME types : image/*, video/*
5

Vérifier l'installation

Testez la connexion Supabase :
npm run dev
L’application devrait démarrer sur http://localhost:5173Vérifications :
  • ✅ Page d’accueil s’affiche
  • ✅ Catalogue d’outils charge (vide au début)
  • ✅ Pas d’erreurs console liées à Supabase

​
Premier lancement

​
Accéder à l’interface

npm run dev
URLs disponibles :

​
Créer un compte admin

Par défaut, Supabase désactive les inscriptions publiques. Pour créer un admin :

​
Via Dashboard Supabase

  1. Allez dans Authentication → Users
  2. Cliquez sur Add user → Create new user
  3. Entrez :
  4. Confirmez l’email si nécessaire

​
Se connecter

  1. Allez sur http://localhost:5173/admin
  2. Vous serez redirigé vers /login
  3. Entrez vos credentials
  4. Vous devriez accéder au dashboard admin
Une fois connecté, votre session persiste dans localStorage. Pas besoin de se reconnecter à chaque refresh.

​
Ajouter des données de test

​
Option 1 : Manuellement via Admin Dashboard

Une fois connecté en admin :
  1. Créer des catégories
    • Allez dans l’onglet Tools du dashboard
    • Créez des catégories (ex: “Communication”, “Gestion”, “Site Web”)
  2. Ajouter des outils
    • Cliquez sur + Nouvel outil
    • Remplissez le formulaire
    • Uploadez un logo
    • Assignez une catégorie
    • Sauvegardez
  3. Créer un workflow
    • Allez dans l’onglet Workflows
    • Cliquez sur + Nouveau workflow
    • Définissez les étapes
    • Publiez (status = active)

​
Option 2 : Via SQL (données de seed)

Créez un fichier seed.sql : 
-- Catégories
INSERT INTO categories (name) VALUES
  ('Communication'),
  ('Gestion de projet'),
  ('Site Web'),
  ('Paiements');

-- Outils
INSERT INTO tools (name, description, pricing_tier, category_id, website_url) VALUES
  ('Mailchimp', 'Plateforme email marketing', 'Freemium', 
   (SELECT id FROM categories WHERE name = 'Communication'), 
   'https://mailchimp.com'),
  ('Trello', 'Gestion de projets visuels', 'Freemium',
   (SELECT id FROM categories WHERE name = 'Gestion de projet'),
   'https://trello.com');
Exécutez dans le SQL Editor de Supabase.

​
Structure du projet

Voici l’organisation du code : 
kitasso/
├── src/
│   ├── api/                 # 🔌 API Layer (Supabase abstraction)
│   │   ├── auth.ts
│   │   ├── tools.ts
│   │   ├── workflows.ts
│   │   └── ...
│   │
│   ├── components/          # 🎨 Composants partagés
│   │   ├── App/
│   │   ├── forms/
│   │   ├── modals/
│   │   └── ui/
│   │
│   ├── features/            # 📦 Features métier
│   │   ├── tools/
│   │   ├── workflows/
│   │   ├── tool-packs/
│   │   └── quiz/
│   │
│   ├── hooks/               # 🪝 Custom hooks
│   │   ├── useAppData.ts
│   │   ├── useFavorites.ts
│   │   └── ...
│   │
│   ├── lib/                 # 🛠️ Utilities
│   │   ├── supabase.ts
│   │   └── auth.tsx
│   │
│   ├── pages/               # 📄 Pages (routes)
│   │   ├── Admin.tsx
│   │   ├── Compare.tsx
│   │   └── Login.tsx
│   │
│   ├── types/               # 📘 Types TypeScript
│   │   ├── database.ts
│   │   └── ...
│   │
│   └── utils/               # 🔧 Helpers
│
├── supabase/
│   └── migrations/          # 📊 43 fichiers SQL
│
├── public/                  # 🖼️ Assets statiques
│
├── .env                     # 🔐 Variables d'environnement
├── vite.config.ts           # ⚡ Config Vite
├── tailwind.config.js       # 🎨 Config Tailwind
└── package.json

Comprendre l'architecture

Documentation complète de l’organisation

​
Commandes disponibles

# Développement
npm run dev              # Lancer le serveur de dev (port 5173)

# Build
npm run build            # Build de production
npm run preview          # Preview du build local

# Quality
npm run lint             # Linter ESLint
npm run typecheck        # Vérification TypeScript

# Tests
npm test                 # Lancer les tests (Vitest)
npm run test:watch       # Tests en mode watch
npm run test:coverage    # Coverage report

# Analyse
npm run analyze          # Analyser la taille du bundle

​
Troubleshooting

​
Erreur : “Failed to fetch”

Cause : Connexion Supabase échoue Solutions :
  1. Vérifiez que .env contient les bonnes valeurs
  2. Vérifiez que votre projet Supabase est actif
  3. Testez la connexion directement : 
    // Dans la console du navigateur
const { data } = await window.supabase.from('tools').select('*');
console.log(data);

​
Erreur : “Row Level Security”

Cause : Politiques RLS bloquent l’accès Solution :
  1. Vérifiez que RLS est activé sur toutes les tables
  2. Vérifiez que les policies sont créées
  3. Testez avec un utilisateur authentifié

​
Page admin vide

Cause : Pas authentifié ou session expirée Solution :
  1. Reconnectez-vous via /login
  2. Vérifiez dans la console : localStorage.getItem('supabase.auth.token')
  3. Si null, créez un nouvel utilisateur admin

​
Images ne s’affichent pas

Cause : Buckets Storage mal configurés Solution :
  1. Vérifiez que les buckets existent
  2. Vérifiez qu’ils sont publics
  3. Testez l’URL d’une image directement dans le navigateur

​
Prochaines étapes

Explorer l'architecture

Comprendre l’organisation du code

Créer votre premier outil

Guide de la feature Tools

API Layer

Utiliser l’abstraction Supabase

Conventions de code

Standards et bonnes pratiques

​
Support

Besoin d’aide ?
  • 📖 Documentation : Parcourez les sections ci-dessous
  • 💬 GitHub Discussions : Posez vos questions
  • 🐛 Issues : Signalez un bug
  • 📧 Email : [email protected]