> ## 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 configure 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 remplit un objectif 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 elle a besoin pour fonctionner.

<ArtifactGrid />

Concepts clés :

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

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

## Ce que vous pouvez construire

| Type                                                                      | Description                                                                             | Exemple                                                                                 |
| ------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
| **[Application web](/references/artifact-types/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](/references/artifact-types/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](/references/artifact-types/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](/references/artifact-types/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                           |
| **[Animation](/references/artifact-types/animated-videos)**               | Une vidéo de motion graphics exportable 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/learn/design/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 des artefacts vivent dans le même projet, ils partagent automatiquement les mêmes données et la même logique backend. Pour en savoir plus, voir [Artefacts](/fr/references/projects-and-artifacts/artifacts#multiple-artifacts-in-one-project).

## Gérer vos projets

Votre page Projets liste 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 trouver le bon projet dans un espace de travail chargé.

### Voyez d'un coup d'œil ce que contient chaque projet

Chaque carte de projet affiche de petites icônes pour les artefacts qu'il contient — pour chaque application web, application mobile, présentation, visualisation de données ou animation dans le 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 dans le projet" width="721" height="1022" data-path="images/replitai/projects-page-artifacts.png" />
</Frame>

### Filtrer par artefact

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

* **Web** — projets contenant une application web
* **Mobile** — projets contenant une application mobile
* **Data** — projets contenant une visualisation de données
* **Slides** — projets contenant une présentation
* **Design** — projets en mode Design
* **Jeu 3D**, **Agent & Automatisation**, et plus encore

Sélectionnez **Tout type de construction** 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 Type de construction sur la page Projets filtrant par artefact, avec les options Design, Web, Data, Mobile, Jeu 3D et Slides" width="472" height="622" data-path="images/replitai/projects-page-build-type-filter.png" />
</Frame>

### Trier par dernière ouverture

La page Projets est triée par **dernière ouverture par vous** par défaut — les projets dans lesquels vous avez travaillé le plus récemment apparaissent en haut. C'est particulièrement utile dans les espaces de travail d'équipe, où les modifications récentes d'autres membres enfouiraient autrement votre travail actuel.

Vous pouvez changer le tri en sélectionnant un autre en-tête de colonne (par exemple, **Dernière mise à jour** ou **Nom**).

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

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

Pour épingler un projet, ouvrez le menu de débordement (trois points) sur la carte du projet et sélectionnez **Épingler**. Sélectionnez **Désépingler** dans le même menu pour supprimer l'épingle.

## Étapes suivantes

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

  <Card title="Applications web" href="/references/artifact-types/web-apps" icon="globe">
    Construisez des applications web full-stack
  </Card>

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

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

  <Card title="Présentations" href="/references/artifact-types/slide-decks" icon="presentation-screen">
    Créez des présentations par conversation
  </Card>
</CardGroup>