> ## Documentation Index
> Fetch the complete documentation index at: https://docs.replit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Qu'est-ce qu'un projet ?

> Découvrez ce que sont les projets sur Replit — le conteneur pour tout ce que vous construisez, des applications web et mobiles aux présentations et vidéos animées.

export const ArtifactGrid = () => {
  if (typeof document !== "undefined" && !document.getElementById("artifact-grid-styles")) {
    const style = document.createElement("style");
    style.id = "artifact-grid-styles";
    style.textContent = `
      .artifact-grid-wrap {
        --ag-bg: var(--replit-docs-bg, #F6F6F4);
        --ag-icon-bg: var(--replit-docs-bg-elevated, #F1F1EE);
        --ag-icon-border: var(--replit-docs-border, #DEDAD5);
        --ag-text: var(--replit-docs-text-muted, #5C5C5C);
        --ag-icon-color: var(--replit-docs-text-muted, #5C5C5C);
      }
      .dark .artifact-grid-wrap,
      html.dark .artifact-grid-wrap,
      [data-theme="dark"] .artifact-grid-wrap {
        --ag-bg: var(--replit-docs-bg, #1E1E1F);
        --ag-icon-bg: var(--replit-docs-bg-elevated, #222223);
        --ag-icon-border: var(--replit-docs-border, #39393D);
        --ag-text: var(--replit-docs-text-muted, #B8B8BE);
        --ag-icon-color: var(--replit-docs-text-muted, #B8B8BE);
      }
      @keyframes ag-fade-in {
        from { transform: translateY(8px); opacity: 0; }
        to { transform: translateY(0); opacity: 1; }
      }
      @media (hover: hover) {
        .artifact-grid-wrap .ag-icon-btn:hover {
          background: var(--ag-icon-border) !important;
        }
      }
    `;
    document.head.appendChild(style);
  }
  const types = [{
    name: "Web",
    icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
          <path fillRule="evenodd" d="M12 1.25c5.937 0 10.75 4.813 10.75 10.75S17.937 22.75 12 22.75 1.25 17.937 1.25 12 6.063 1.25 12 1.25Zm-9.217 11.5a9.25 9.25 0 0 0 7.468 8.333 15.25 15.25 0 0 1-2.982-8.333H2.783Zm13.948 0a15.249 15.249 0 0 1-2.983 8.333 9.25 9.25 0 0 0 7.469-8.333H16.73Zm-7.958 0A13.748 13.748 0 0 0 12 20.876a13.748 13.748 0 0 0 3.227-8.126H8.773Zm1.478-9.834a9.251 9.251 0 0 0-7.468 8.334H7.27a15.251 15.251 0 0 1 2.982-8.334ZM12 3.123a13.747 13.747 0 0 0-3.227 8.127h6.454A13.748 13.748 0 0 0 12 3.123Zm1.748-.207a15.25 15.25 0 0 1 2.983 8.334h4.486a9.251 9.251 0 0 0-7.469-8.334Z" clipRule="evenodd" />
        </svg>
  }, {
    name: "Mobile",
    icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
          <path fillRule="evenodd" d="M7 2.75c-.69 0-1.25.56-1.25 1.25v16c0 .69.56 1.25 1.25 1.25h10c.69 0 1.25-.56 1.25-1.25V4c0-.69-.56-1.25-1.25-1.25H7ZM4.25 4A2.75 2.75 0 0 1 7 1.25h10A2.75 2.75 0 0 1 19.75 4v16A2.75 2.75 0 0 1 17 22.75H7A2.75 2.75 0 0 1 4.25 20V4Zm7 14a.75.75 0 0 1 .75-.75h.01a.75.75 0 0 1 0 1.5H12a.75.75 0 0 1-.75-.75Z" clipRule="evenodd" />
        </svg>
  }, {
    name: "Slides",
    icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
          <path fillRule="evenodd" d="M20 2.25A2.75 2.75 0 0 1 22.75 5v14A2.75 2.75 0 0 1 20 21.75h-8A2.75 2.75 0 0 1 9.25 19V5A2.75 2.75 0 0 1 12 2.25h8Zm-8 1.5c-.69 0-1.25.56-1.25 1.25v14c0 .69.56 1.25 1.25 1.25h8c.69 0 1.25-.56 1.25-1.25V5c0-.69-.56-1.25-1.25-1.25h-8Z" clipRule="evenodd" />
          <path d="M6 4.25a.75.75 0 0 1 .75.75v14a.75.75 0 0 1-1.5 0V5A.75.75 0 0 1 6 4.25ZM2 6.25a.75.75 0 0 1 .75.75v10a.75.75 0 0 1-1.5 0V7A.75.75 0 0 1 2 6.25Z" />
        </svg>
  }, {
    name: "Design",
    icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
          <path d="M6.5 11.25a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5ZM17.5 9.25a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5ZM8.5 6.25a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5ZM13.5 5.25a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5Z" />
          <path fillRule="evenodd" d="M12 1.25c2.827 0 5.553 1.01 7.573 2.828C21.596 5.9 22.75 8.388 22.75 11A5.749 5.749 0 0 1 17 16.75h-2.25a1 1 0 0 0-.8 1.6l.3.4.1.143a2.5 2.5 0 0 1-2.1 3.857H12a10.75 10.75 0 1 1 0-21.5Zm0 1.5a9.25 9.25 0 1 0 0 18.5h.25a1 1 0 0 0 .8-1.6l-.3-.4a2.5 2.5 0 0 1 2-4H17l.21-.005A4.25 4.25 0 0 0 21.25 11c0-2.161-.953-4.252-2.68-5.807C16.84 3.636 14.476 2.75 12 2.75Z" clipRule="evenodd" />
        </svg>
  }, {
    name: "Animation",
    icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
          <path fillRule="evenodd" d="M10.024 7.25c.31.004.613.091.878.251l4.996 2.996a1.752 1.752 0 0 1 .625 2.367 1.75 1.75 0 0 1-.625.639v-.001l-4.995 2.995.001.001a1.75 1.75 0 0 1-2.654-1.505v-5.99a1.75 1.75 0 0 1 1.774-1.753Zm-.02 1.5a.252.252 0 0 0-.22.124.253.253 0 0 0-.034.127v5.998a.252.252 0 0 0 .127.219.253.253 0 0 0 .252-.004l.002-.001 4.997-2.997.002-.001a.252.252 0 0 0 .122-.215.25.25 0 0 0-.122-.215h-.002L10.13 8.786h-.002a.25.25 0 0 0-.125-.037Z" clipRule="evenodd" />
          <path fillRule="evenodd" d="M12 1.25c5.937 0 10.75 4.813 10.75 10.75S17.937 22.75 12 22.75 1.25 17.937 1.25 12 6.063 1.25 12 1.25Zm0 1.5a9.25 9.25 0 1 0 0 18.5 9.25 9.25 0 0 0 0-18.5Z" clipRule="evenodd" />
        </svg>
  }, {
    name: "Data Viz",
    icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
          <path d="M5 14.25a.75.75 0 0 1 .75.75v6a.75.75 0 0 1-1.5 0v-6a.75.75 0 0 1 .75-.75ZM12 8.25a.75.75 0 0 1 .75.75v12a.75.75 0 0 1-1.5 0V9a.75.75 0 0 1 .75-.75ZM19 2.25a.75.75 0 0 1 .75.75v18a.75.75 0 0 1-1.5 0V3a.75.75 0 0 1 .75-.75Z" />
        </svg>
  }, {
    name: "3D Game",
    icon: <svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor">
          <path fillRule="evenodd" d="M11.25 9.675A3.751 3.751 0 0 1 12 2.25a3.75 3.75 0 0 1 .75 7.425v4.575H19A2.75 2.75 0 0 1 21.75 17v2A2.75 2.75 0 0 1 19 21.75H5A2.75 2.75 0 0 1 2.25 19v-2A2.75 2.75 0 0 1 5 14.25h.25V13a.75.75 0 0 1 1.5 0v1.25h4.5V9.675ZM9.75 6a2.25 2.25 0 1 0 4.5 0 2.25 2.25 0 0 0-4.5 0ZM4.116 16.116A1.25 1.25 0 0 1 5 15.75h14A1.25 1.25 0 0 1 20.25 17v2A1.25 1.25 0 0 1 19 20.25H5a1.25 1.25 0 0 1-1.244-1.126L3.75 19v-2c0-.331.132-.65.366-.884Z" clipRule="evenodd" />
        </svg>
  }];
  const rows = [types.slice(0, 4), types.slice(4, 7)];
  const iconBtnStyle = {
    display: "flex",
    alignItems: "center",
    justifyContent: "center",
    width: "48px",
    height: "48px",
    border: "1px solid var(--ag-icon-border)",
    borderRadius: "12px",
    background: "var(--ag-icon-bg)",
    cursor: "default",
    color: "var(--ag-icon-color)",
    padding: 0,
    transition: "background 120ms ease-out",
    flexShrink: 0
  };
  return <div className="artifact-grid-wrap" style={{
    fontFamily: "'IBM Plex Sans', sans-serif",
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    gap: "12px",
    padding: "32px",
    background: "var(--ag-bg)",
    borderRadius: "16px",
    width: "100%",
    maxWidth: "460px",
    margin: "32px auto",
    opacity: 0,
    animation: "ag-fade-in 300ms ease-out forwards"
  }}>
      {rows.map((row, ri) => <div key={ri} style={{
    display: "flex",
    gap: "12px",
    justifyContent: "center"
  }}>
          {row.map(type => <div key={type.name} style={{
    display: "flex",
    flexDirection: "column",
    alignItems: "center",
    gap: "6px"
  }}>
              <div className="ag-icon-btn" style={iconBtnStyle}>
                {type.icon}
              </div>
              <span style={{
    fontSize: "11px",
    color: "var(--ag-text)",
    textAlign: "center",
    lineHeight: "1.2"
  }}>
                {type.name}
              </span>
            </div>)}
        </div>)}
    </div>;
};

## Qu'est-ce qu'un projet ?

Un projet est le conteneur pour tout ce que vous construisez sur Replit. Il contient votre code, vos données et tous les artefacts que vous créez — applications web, applications mobiles, présentations, tableaux de bord de données et vidéos. Lorsque vous dites à Agent ce que vous voulez, il crée un projet et construit les artefacts à l'intérieur.

Pensez à un projet comme à un espace de travail sur votre bureau. Tout se trouve au même endroit et peut partager les mêmes informations, mais chaque élément a un rôle différent.

Par exemple, si vous demandez à Agent de construire une application de suivi de fitness, il crée un projet avec un artefact d'application mobile ainsi que le backend, la base de données et le stockage dont il a besoin pour fonctionner.

<ArtifactGrid />

Concepts clés :

* **Projet** : Le conteneur qui contient tout — votre code, vos données et tous vos artefacts
* **Artefact** : Une sortie publiable dans un projet (une application web, une présentation, une vidéo, etc.)
* **Ressources** : Chaque artefact bénéficie automatiquement d'un accès à un backend, une base de données et un stockage de fichiers — aucune configuration requise

<Note>
  La publication déploie l'intégralité de votre projet en une seule fois. Tous les artefacts sont mis en ligne ensemble, afin qu'ils restent toujours synchronisés.
</Note>

## Ce que vous pouvez construire

| Type                                                        | Ce que c'est                                                                            | Exemple                                                                                 |
| ----------------------------------------------------------- | --------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
| **[Application web](/fr/replitai/web-apps)**                | Un site web ou une application web que les gens visitent dans leur navigateur           | Une boutique en ligne, un outil de réservation, un site portfolio                       |
| **[Application mobile](/fr/replitai/building-mobile-apps)** | Une application native que les gens installent sur leur téléphone                       | Un suivi de fitness, une application de commande de restaurant                          |
| **[Visualisation de données](/fr/replitai/data-apps)**      | Un tableau de bord interactif avec des graphiques, des filtres et des données en direct | Un rapport de ventes, un suivi de métriques, une vue analytique                         |
| **[Présentation](/fr/replitai/slide-decks)**                | Une présentation que vous pouvez présenter ou exporter                                  | Un pitch deck, une mise à jour d'équipe, un aperçu de produit                           |
| **[Vidéo animée](/fr/replitai/animated-videos)**            | Une vidéo en motion graphics que vous pouvez exporter en MP4                            | Une vidéo de lancement de produit, une explication, du contenu pour les réseaux sociaux |
| **Jeu 3D**                                                  | Un jeu 3D, une simulation ou une expérience interactive                                 | Un jeu de puzzle, une simulation physique, une expérience interactive                   |
| **[Design](/fr/replitai/canvas)**                           | Directions visuelles et prototypes explorés sur le canvas de design                     | Moodboards, maquettes, exploration de design                                            |

Un seul projet peut contenir plusieurs artefacts. Par exemple, vous pourriez construire une application web pour vos clients, une application mobile pour votre équipe et une présentation pour les investisseurs — tout dans le même projet. Lorsque les artefacts se trouvent dans le même projet, ils partagent automatiquement les mêmes données et la même logique backend. Pour en savoir plus, consultez [Artefacts](/fr/replitai/artifacts#multiple-artifacts-in-one-project).

## Gérer vos projets

Votre page Projets répertorie tous les projets que vous avez créés ou auxquels vous avez été invité. C'est le moyen le plus rapide de reprendre un travail récent et de retrouver le bon projet dans un espace de travail chargé.

### Voir d'un coup d'œil ce qui se trouve dans chaque projet

Chaque carte de projet affiche de petites icônes pour les artefacts qu'elle contient pour chaque application web, application mobile, diaporama, visualisation de données ou vidéo animée du projet. Survolez n'importe quelle icône pour prévisualiser la capture d'écran de cet artefact directement sur la carte, afin de distinguer les projets sans les ouvrir.

<Frame>
  <img src="https://mintcdn.com/replit/IDyPuGH-IuCET9Hi/images/replitai/projects-page-artifacts.png?fit=max&auto=format&n=IDyPuGH-IuCET9Hi&q=85&s=c6a8bbd53ed0fb847c7e94a96f446962" alt="Carte de projet sur la page Projets avec des icônes d'artefacts et un menu déroulant listant chaque artefact contenu dans le projet" width="721" height="1022" data-path="images/replitai/projects-page-artifacts.png" />
</Frame>

### Filtrer par artefact

Utilisez le menu déroulant **Build type** en haut de la page Projets pour filtrer votre liste par artefact. Choisissez-en un pour ne voir que les projets contenant ce type d'artefact :

* **Web** — projets qui contiennent une application web
* **Mobile** — projets qui contiennent une application mobile
* **Data** — projets qui contiennent une visualisation de données
* **Slides** — projets qui contiennent un diaporama
* **Design** — projets en mode Design
* **3D Game**, **Agent & Automation**, et plus encore

Sélectionnez **Any build type** pour effacer le filtre.

<Frame>
  <img src="https://mintcdn.com/replit/IDyPuGH-IuCET9Hi/images/replitai/projects-page-build-type-filter.png?fit=max&auto=format&n=IDyPuGH-IuCET9Hi&q=85&s=0b328400d8b1f1edde4575cc2184eec7" alt="Menu déroulant Build type sur la page Projets filtrant par artefact, avec les options Design, Web, Data, Mobile, 3D Game et Slides" width="472" height="622" data-path="images/replitai/projects-page-build-type-filter.png" />
</Frame>

### Trier par dernière ouverture

Par défaut, la page Projets est triée par **dernière ouverture par vous** — les projets dans lesquels vous avez passé du temps le plus récemment apparaissent en haut. C'est particulièrement utile dans les espaces de travail d'équipe, où les modifications récentes des autres membres enterreraient sinon votre travail en cours.

Vous pouvez changer le tri en sélectionnant un autre en-tête de colonne (par exemple, **Last updated** ou **Name**).

### Épingler les projets que vous utilisez le plus

Épinglez un projet pour le garder en haut de votre liste. Les épingles sont **privées** — épingler un projet dans un espace de travail d'équipe ne change rien à ce que les autres membres voient.

Pour épingler un projet, ouvrez le menu d'options (trois points) sur la carte du projet et sélectionnez **Pin**. Sélectionnez **Unpin** dans le même menu pour retirer l'épingle.

## Prochaines étapes

<CardGroup cols={3}>
  <Card title="Artefacts" href="/fr/replitai/artifacts" icon="layer-group">
    Apprenez à créer, basculer entre et gérer des artefacts
  </Card>

  <Card title="Applications web" href="/fr/replitai/web-apps" icon="globe">
    Construisez des applications web full-stack
  </Card>

  <Card title="Applications mobiles" href="/fr/replitai/building-mobile-apps" icon="mobile">
    Créez des applications iOS et Android natives
  </Card>

  <Card title="Visualisation de données" href="/fr/replitai/data-apps" icon="chart-bar">
    Construisez des tableaux de bord interactifs et des outils d'exploration de données
  </Card>

  <Card title="Diaporamas" href="/fr/replitai/slide-decks" icon="presentation-screen">
    Créez des présentations par conversation
  </Card>
</CardGroup>