Guide de Démarrage Développeur

# Cloner le repository
git clone https://github.com/Lucdidi3514/assopedia-v2
cd kit-asso

# Vérifier Node.js version
node --version  # Doit être 18+

# Installation
npm install

# Temps estimé : 2-3 minutes

# Créer le fichier .env
cp .env.example .env

# Éditer .env avec vos credentials
nano .env  # ou code .env

VITE_SUPABASE_URL=https://xxxxx.supabase.co
VITE_SUPABASE_ANON_KEY=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9...

# Si Supabase CLI installé
npm install -g supabase
supabase link --project-ref your-project-ref
supabase db push

-- Créer une catégorie
INSERT INTO categories (name) VALUES ('Communication');

-- Créer un outil de test
INSERT INTO tools (name, description, pricing_tier, category_id)
VALUES (
  'Notion',
  'Outil tout-en-un pour la gestion de projets',
  'Freemium',
  (SELECT id FROM categories WHERE name = 'Communication')
);

# Démarrer Vite
npm run dev

# Serveur disponible sur http://localhost:5173

kit-asso/
├── src/
│   ├── api/              # Couche d'abstraction Supabase
│   ├── components/       # Composants UI réutilisables
│   ├── features/         # Modules par domaine métier
│   ├── hooks/            # Custom React hooks
│   ├── lib/              # Utilitaires core (auth, storage)
│   ├── pages/            # Pages route
│   ├── types/            # Définitions TypeScript
│   ├── utils/            # Helpers (icons, colors, sanitization)
│   ├── App.tsx           # Root component
│   ├── main.tsx          # Entry point
│   └── router.tsx        # React Router config
├── supabase/
│   └── migrations/       # 43 fichiers SQL
├── public/               # Assets statiques
├── .env                  # Variables d'environnement (à créer)
├── package.json
├── vite.config.ts
└── tailwind.config.js

import { supabase } from './client';
import { handleSupabaseError } from './base';

export const toolsApi = {
  // Lister tous les outils
  async list() {
    const { data, error } = await supabase
      .from('tools')
      .select(`
        *,
        category:categories(name),
        features:tool_features(filter:filters(*))
      `);

    if (error) throw handleSupabaseError(error);
    return data;
  },

  // Créer un outil
  async create(tool: ToolInsert) {
    const { data, error } = await supabase
      .from('tools')
      .insert(tool)
      .select()
      .single();

    if (error) throw handleSupabaseError(error);
    return data;
  }
};

import { toolsApi } from '@/api';

function ToolsList() {
  const [tools, setTools] = useState([]);

  useEffect(() => {
    toolsApi.list().then(setTools);
  }, []);

  return (
    <div>
      {tools.map(tool => (
        <div key={tool.id}>{tool.name}</div>
      ))}
    </div>
  );
}

import { useAppData } from '@/hooks/useAppData';

function HomePage() {
  const { tools, workflows, packs, loading, error } = useAppData();

  if (loading) return <LoadingSpinner />;
  if (error) return <ErrorMessage />;

  return (
    <div>
      <h1>Catalogue : {tools.length} outils</h1>
      <ToolsGrid tools={tools} />
    </div>
  );
}

import { Tool } from '@/types/database';
import { ToolLogo } from './ToolLogo';
import { PricingBadge } from './PricingBadge';

interface ToolCardProps {
  tool: Tool;
  onClick?: () => void;
}

export function ToolCard({ tool, onClick }: ToolCardProps) {
  return (
    <div 
      onClick={onClick}
      className="bg-white rounded-lg p-4 shadow-md hover:shadow-lg transition-shadow cursor-pointer"
    >
      <ToolLogo url={tool.logo_url} name={tool.name} size="md" />
      <h3 className="font-semibold mt-3">{tool.name}</h3>
      <p className="text-sm text-gray-600 mt-1">{tool.description}</p>
      <PricingBadge tier={tool.pricing_tier} className="mt-3" />
    </div>
  );
}

import { createBrowserRouter } from 'react-router-dom';
import { NewPage } from './pages/NewPage';

export const router = createBrowserRouter([
  {
    path: '/',
    element: <App />,
    children: [
      // ... routes existantes
      {
        path: '/nouvelle-page',
        element: <NewPage />
      }
    ]
  }
]);

# Développement
npm run dev              # Serveur dev avec HMR

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

# Tests
npm test                 # Run tests once
npm run test:watch       # Watch mode
npm run test:coverage    # Coverage report

# Qualité de code
npm run lint             # ESLint check
npm run typecheck        # TypeScript check

# Analyse
npm run analyze          # Bundle size analysis

# 1. Pull dernières modifications
git pull origin main

# 2. Installer nouvelles dépendances (si package.json modifié)
npm install

# 3. Lancer dev server
npm run dev

# 4. Développer avec HMR
# ... modifier le code, sauvegarder, voir les changements instantanément

# 5. Vérifier la qualité avant commit
npm run lint
npm run typecheck
npm test

# 6. Commit et push
git add .
git commit -m "feat: nouvelle fonctionnalité"
git push

// src/api/client.ts
import { createClient } from '@supabase/supabase-js';

export const supabase = createClient(
  import.meta.env.VITE_SUPABASE_URL,
  import.meta.env.VITE_SUPABASE_ANON_KEY,
  {
    auth: {
      persistSession: true,
      autoRefreshToken: true,
      detectSessionInUrl: true
    },
    // Activer les logs en dev
    global: {
      headers: {
        'x-client-info': 'kit-asso-dev'
      }
    }
  }
);

# Extension Chrome/Firefox
# Rechercher "React Developer Tools"

# Vérifier .env
cat .env

# Relancer le serveur
npm run dev

# Vérifier les migrations Supabase
# Dashboard > SQL Editor > Vérifier les tables

# Se connecter en tant qu'admin
# Ou vérifier les policies dans /database/rls