Commencer

Structure du projet

Architecture monorepo avec Nx, organisation des packages et structure des dossiers pour une maintenance optimale.

Pourquoi ce sujet est important

AVS s'intègre facilement dans n'importe quel framework JavaScript moderne. Découvrez comment structurer votre projet avec AVS selon votre framework préféré : Next.js, Vue, Angular, ou autres.

Explication

Choisissez votre framework

Sélectionnez votre framework pour voir la structure de projet recommandée avec AVS.

Next.js avec Tailwind CSS v4

Structure recommandée pour un projet Next.js 14+ avec App Router et AVS.

Structure Next.js

my-app/
├── src/
│   ├── app/                    # App Router
│   │   ├── globals.css        # Tailwind + AVS
│   │   ├── layout.tsx         # Layout racine
│   │   └── page.tsx           # Page d'accueil
│   ├── components/
│   │   ├── ui/                # Composants AVS
│   │   │   ├── button.tsx
│   │   │   ├── card.tsx
│   │   │   └── dialog.tsx
│   │   └── features/          # Composants métier
│   │       └── auth/
│   ├── lib/
│   │   ├── utils.ts           # Utilitaires
│   │   └── api.ts             # Client API
│   ├── styles/
│   │   ├── patterns.css       # Motifs AVS
│   │   └── tokens.css         # Tokens personnalisés
│   └── types/
│       └── index.ts           # Types TypeScript
├── public/
│   └── patterns/              # SVGs AVS
└── tailwind.config.ts         # Config Tailwind v4

Configuration

src/app/globals.css

@import "tailwindcss";

@theme {
  --color-avs-primary: #C0573E;
  --color-avs-secondary: #F5EBE0;
  --color-avs-accent: #1D1D1B;
  --color-avs-kente: #D4A017;
  --color-avs-ndop: #4A6741;
  --color-avs-indigo: #2A4A6B;

  --font-display: Georgia, serif;
  --font-mono: monospace;
}

@import '../styles/patterns.css';

src/app/page.tsx

export default function HomePage() {
  return (
    <div className="min-h-screen bg-avs-secondary">
      {/* Hero avec motif AVS */}
      <section className="avs-pattern-kente-royal relative py-20">
        <div className="absolute inset-0 bg-avs-primary/80" />
        <div className="relative container mx-auto px-4">
          <h1 className="font-display text-4xl text-avs-secondary">
            Bienvenue
          </h1>
        </div>
      </section>
    </div>
  );
}

Bonnes pratiques (tous frameworks)

1. Séparez les composants AVS

Gardez les composants AVS dans un dossier dédié (components/ui/). Cela facilite les mises à jour et la maintenance.

2. Utilisez les tokens AVS

Les couleurs AVS sont conçues pour fonctionner ensemble. Privilégiez bg-avs-primary, text-avs-secondary, etc.

3. Motifs avec parcimonie

Les motifs AVS sont puissants. Utilisez-les pour les sections hero, headers ou accents, pas sur tout le site.

Installation Philosophie