Guide de Contribution

Prérequis

• Node.js 20.x
• Docker et Docker Compose
• Git
• Un éditeur de code (VS Code recommandé)

Workflow Git

Branches

Branche	Usage
main	Production, stable
develop	Développement, intégration
feature/*	Nouvelles fonctionnalités
fix/*	Corrections de bugs
hotfix/*	Corrections urgentes prod

Créer une Feature

# Depuis develop
git checkout develop
git pull origin develop

# Créer la branche
git checkout -b feature/ma-fonctionnalite

# Développer...
git add .
git commit -m "feat: description de la fonctionnalité"

# Push
git push origin feature/ma-fonctionnalite

# Créer une Pull Request vers develop

Conventions de Commit

Format : type(scope): description

Types :

• feat : Nouvelle fonctionnalité
• fix : Correction de bug
• docs : Documentation
• style : Formatage (pas de changement de code)
• refactor : Refactorisation
• test : Ajout de tests
• chore : Maintenance, dépendances

Exemples :

feat(frontend): ajouter la page de confirmation d'invitation
fix(generator): corriger le timeout sur les longues vidéos
docs: mettre à jour le README
refactor(backend): simplifier la logique d'invitation

---

Standards de Code

TypeScript/Angular

// Utiliser les types explicites
function calculateTotal(items: Item[]): number {
  return items.reduce((sum, item) => sum + item.price, 0);
}

// Préférer les fonctions pures
const formatDate = (date: Date): string => {
  return date.toLocaleDateString('fr-FR');
};

// Utiliser async/await plutôt que .then()
async function fetchData(): Promise<Data> {
  const response = await fetch(url);
  return response.json();
}

Composants Angular

@Component({
  selector: 'app-message-card',
  standalone: true,
  imports: [CommonModule],
  template: `
    <div class="card">
      <h3>{{ message.author }}</h3>
      <p [innerHTML]="message.content"></p>
    </div>
  `
})
export class MessageCardComponent {
  @Input({ required: true }) message!: Message;
}

Services

@Injectable({ providedIn: 'root' })
export class ProductService {
  private readonly supabase = inject(SupabaseService);

  async getProducts(): Promise<Product[]> {
    const { data, error } = await this.supabase.client
      .from('product')
      .select('*');

    if (error) {
      throw new Error(`Failed to fetch products: ${error.message}`);
    }

    return data;
  }
}

---

Linting et Formatage

ESLint

# Vérifier
npm run lint

# Corriger automatiquement
npm run lint -- --fix

Prettier

# Formater
npm run prettier

# Vérifier sans modifier
npm run prettier -- --check

Configuration VS Code

.vscode/settings.json :

{
  "editor.formatOnSave": true,
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": true
  }
}

---

Structure des Fichiers

Frontend

src/app/
├── pages/                    # Pages/Routes
│   └── feature/
│       ├── feature.component.ts
│       ├── feature.component.html
│       └── feature.component.scss
├── components/               # Composants réutilisables
│   └── shared-component/
├── services/                 # Services métier
│   └── feature.service.ts
├── state/                    # NGXS stores
│   └── feature/
│       ├── feature.state.ts
│       └── feature.actions.ts
└── models/                   # Interfaces/Types
    └── feature.model.ts

Nommage

Type	Convention	Exemple
Composants	kebab-case	message-card.component.ts
Services	kebab-case	product.service.ts
Interfaces	PascalCase	Product, Message
Constantes	SCREAMING_SNAKE	MAX_VIDEO_DURATION
Variables	camelCase	currentUser

---

Tests

Avant de Commiter

# Lancer les tests
npm test

# Vérifier le build
npm run build

# Linter
npm run lint

Pull Request Checklist

• Tests passent
• Pas d'erreurs de lint
• Build réussit
• Documentation mise à jour si nécessaire
• Commits propres et bien nommés

---

Code Review

Pour l'Auteur

1. Description claire de la PR
2. Screenshots si changement UI
3. Tests pour les nouvelles fonctionnalités
4. Petites PR (< 400 lignes si possible)

Pour le Reviewer

1. Fonctionnalité : Le code fait-il ce qu'il doit faire ?
2. Lisibilité : Le code est-il compréhensible ?
3. Sécurité : Y a-t-il des failles potentielles ?
4. Performance : Y a-t-il des optimisations évidentes ?
5. Tests : Les tests couvrent-ils les cas importants ?

---

Ressources

• Angular Style Guide
• TypeScript Handbook
• Conventional Commits
• NGXS Documentation