> ## 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.

# O que é um Projeto?

> Saiba o que são projetos no Replit — o contêiner para tudo que você constrói, de aplicativos web e mobile a apresentações de slides e vídeos animados.

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>;
};

## O que é um projeto?

Um projeto é o contêiner para tudo que você constrói no Replit. Ele guarda seu código, dados e todos os artefatos que você cria — aplicativos web, aplicativos mobile, apresentações de slides, dashboards de dados e vídeos. Quando você diz ao Agent o que quer, ele configura um projeto e constrói os artefatos dentro dele.

Pense em um projeto como uma área de trabalho na sua mesa. Tudo fica em um só lugar e pode compartilhar as mesmas informações, mas cada peça serve a um propósito diferente.

Por exemplo, se você pedir ao Agent para construir um aplicativo de rastreamento de fitness, ele cria um projeto com um artefato de aplicativo mobile juntamente com o backend, banco de dados e armazenamento necessários para funcionar.

<ArtifactGrid />

Conceitos principais:

* **Projeto**: O contêiner que guarda tudo — seu código, dados e todos os seus artefatos
* **Artefato**: Uma saída publicável dentro de um projeto (um aplicativo web, apresentação de slides, vídeo, etc.)
* **Recursos**: Cada artefato recebe acesso automático a um backend, banco de dados e armazenamento de arquivos — sem necessidade de configuração

<Note>
  A publicação implanta todo o seu projeto de uma vez. Todos os artefatos entram no ar juntos, para que estejam sempre sincronizados.
</Note>

## O que você pode construir

| Tipo                                                                      | O que é                                                        | Exemplo                                                                        |
| ------------------------------------------------------------------------- | -------------------------------------------------------------- | ------------------------------------------------------------------------------ |
| **[Aplicativo web](/pt/features/artifact-types/web-apps)**                | Um site ou aplicativo web que as pessoas acessam no navegador  | Uma loja online, uma ferramenta de reservas, um site de portfólio              |
| **[Aplicativo mobile](/pt/features/artifact-types/building-mobile-apps)** | Um aplicativo nativo que as pessoas instalam no celular        | Um rastreador de fitness, um aplicativo de pedidos de restaurante              |
| **[Visualização de dados](/pt/features/artifact-types/data-apps)**        | Um dashboard interativo com gráficos, filtros e dados ao vivo  | Um relatório de vendas, um rastreador de métricas, uma visão analítica         |
| **[Apresentação de slides](/pt/features/artifact-types/slide-decks)**     | Uma apresentação que você pode exibir ou exportar              | Um pitch deck, uma atualização de equipe, uma visão geral do produto           |
| **[Animação](/pt/features/artifact-types/animated-videos)**               | Um vídeo de motion graphics que você pode exportar como MP4    | Um vídeo de lançamento de produto, um explicativo, conteúdo para redes sociais |
| **Jogo 3D**                                                               | Um jogo 3D, simulação ou experiência interativa                | Um jogo de quebra-cabeça, uma simulação de física, uma experiência interativa  |
| **[Design](/pt/learn/design/canvas)**                                     | Direções visuais e prototipagem exploradas no canvas de design | Mood boards, mockups, exploração de design                                     |

Um único projeto pode conter vários artefatos. Por exemplo, você pode construir um aplicativo web para seus clientes, um aplicativo mobile para sua equipe e uma apresentação de slides para investidores — tudo no mesmo projeto. Quando os artefatos vivem no mesmo projeto, eles automaticamente compartilham os mesmos dados e lógica de backend. Para saber mais, consulte [Artefatos](/pt/features/projects-and-artifacts/artifacts#multiple-artifacts-in-one-project).

## Gerenciando seus projetos

Sua página de Projetos lista todos os projetos que você criou ou foi convidado. É a forma mais rápida de voltar ao trabalho recente e encontrar o projeto certo em um workspace movimentado.

### Veja rapidamente o que há em cada projeto

Cada cartão de projeto mostra pequenos ícones para os artefatos que contém, para cada aplicativo web, aplicativo mobile, apresentação de slides, visualização de dados ou animação no projeto. Passe o mouse sobre qualquer ícone para visualizar a captura de tela desse artefato diretamente no cartão, para que você possa distinguir os projetos sem precisar abri-los.

<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="Cartão de projeto na página de Projetos com ícones de artefatos e um menu suspenso listando todos os artefatos dentro do projeto" width="721" height="1022" data-path="images/replitai/projects-page-artifacts.png" />
</Frame>

### Filtre por artefato

Use o menu suspenso **Tipo de build** no topo da página de Projetos para filtrar sua lista por artefato. Selecione um para ver apenas os projetos que contêm esse tipo de artefato:

* **Web** — projetos que contêm um aplicativo web
* **Mobile** — projetos que contêm um aplicativo mobile
* **Data** — projetos que contêm uma visualização de dados
* **Slides** — projetos que contêm uma apresentação de slides
* **Design** — projetos no modo Design
* **Jogo 3D**, **Agent e Automação** e mais

Selecione **Qualquer tipo de build** para limpar o filtro.

<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 suspenso de tipo de build na página de Projetos filtrando por artefato, com opções de Design, Web, Data, Mobile, Jogo 3D e Slides" width="472" height="622" data-path="images/replitai/projects-page-build-type-filter.png" />
</Frame>

### Ordene por última abertura

A página de Projetos é ordenada por **última abertura por você** por padrão — os projetos em que você passou mais tempo recentemente aparecem no topo. Isso é especialmente útil em workspaces de equipe, onde as edições recentes de outros membros de outra forma soterrariam seu trabalho atual.

Você pode alterar a ordenação selecionando um cabeçalho de coluna diferente (por exemplo, **Última atualização** ou **Nome**).

### Fixe os projetos que você mais usa

Fixe um projeto para mantê-lo no topo da sua lista. Os pins são **privados para você** — fixar um projeto em um workspace de equipe não altera o que os outros membros veem.

Para fixar um projeto, abra o menu de opções (três pontos) no cartão do projeto e selecione **Fixar**. Selecione **Desafixar** no mesmo menu para remover o pin.

## Próximos passos

<CardGroup cols={3}>
  <Card title="Artefatos" href="/pt/features/projects-and-artifacts/artifacts" icon="layer-group">
    Saiba como criar, alternar e gerenciar artefatos
  </Card>

  <Card title="Aplicativos Web" href="/pt/features/artifact-types/web-apps" icon="globe">
    Construa aplicativos web full-stack
  </Card>

  <Card title="Aplicativos Mobile" href="/pt/features/artifact-types/building-mobile-apps" icon="mobile">
    Crie aplicativos nativos para iOS e Android
  </Card>

  <Card title="Visualização de Dados" href="/pt/features/artifact-types/data-apps" icon="chart-bar">
    Construa dashboards interativos e ferramentas de exploração de dados
  </Card>

  <Card title="Apresentações de Slides" href="/pt/features/artifact-types/slide-decks" icon="presentation-screen">
    Crie apresentações por meio de conversas
  </Card>
</CardGroup>