diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
new file mode 100644
index 000000000..5a8957227
--- /dev/null
+++ b/.github/workflows/release.yml
@@ -0,0 +1,51 @@
+name: Release curriculum
+
+on:
+  pull_request:
+    branches:
+      - main
+
+jobs:
+  build_dist:
+    name: Build dist files
+    if: ${{ github.head_ref == 'next' || github.head_ref == 'release_workflow_test'}}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+      - run: npm ci
+  version_tag_release:
+    - name: Version and tag release
+      id: version_tag_release # npm version will tag release automatically git-tag-release
+      steps:
+        - name: Parse changelog
+          id: get_changelog
+          run: npm run changelog
+          outputs:
+            changelog: ${{ steps.get_changelog.outputs }}
+          env:
+            isMajor: ${{ steps.get_changelog.outputs.contains('!:')}}
+            isMinor: ${{ steps.get_changelog.outputs.contains('feat') && !env.isMajor }}
+        - name: Increment version
+          id: bump_version
+          run: npm version ${{ (env.isMajor && 'major') || (env.isMinor && 'minor') || 'patch' }} -m 'chore(release): Bumps version to v%s and updates dist files'
+          outputs:
+            new_tag: ${{ steps.bump_version.outputs }}
+  create_release:
+    - name: Create release
+      id: create_release
+      steps:
+        - name: Make notes
+          id: make_notes
+          uses: mikepenz/release-changelog-builder-action@{latest-release}
+        - name: Make release draft
+          id: release_draft
+          run: echo "Creating release draft"
+          # run: |
+          #     gh release create ${{jobs.version_tag_release.outputs.new_tag}} \
+          #         --repo="$GITHUB_REPOSITORY" \
+          #         --title="${GITHUB_REPOSITORY#*/} ${{jobs.version_tag_release.outputs.new_tag}}" \
+          #         --notes ${{steps.make_notes.outputs.changelog}} \
+          #         --draft
diff --git a/package-lock.json b/package-lock.json
index c84714af4..fd5d6b7f5 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "curriculum",
-  "version": "7.7.0",
+  "version": "8.2.1",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "curriculum",
-      "version": "7.7.0",
+      "version": "8.2.1",
       "license": "CC-BY-SA-4.0",
       "dependencies": {
         "@emotion/react": "^11.11.3",
@@ -25,7 +25,7 @@
         "react-dom": "^17.0.2",
         "react-intl": "^6.5.5",
         "react-router-dom": "^6.20.1",
-        "vite": "^5.0.11",
+        "vite": "^5.0.12",
         "web-vitals": "^3.5.1"
       },
       "devDependencies": {
@@ -13597,9 +13597,9 @@
       }
     },
     "node_modules/vite": {
-      "version": "5.0.11",
-      "resolved": "https://registry.npmjs.org/vite/-/vite-5.0.11.tgz",
-      "integrity": "sha512-XBMnDjZcNAw/G1gEiskiM1v6yzM4GE5aMGvhWTlHAYYhxb7S3/V1s3m2LDHa8Vh6yIWYYB0iJwsEaS523c4oYA==",
+      "version": "5.0.12",
+      "resolved": "https://registry.npmjs.org/vite/-/vite-5.0.12.tgz",
+      "integrity": "sha512-4hsnEkG3q0N4Tzf1+t6NdN9dg/L3BM+q8SWgbSPnJvrgH2kgdyzfVJwbR1ic69/4uMJJ/3dqDZZE5/WwqW8U1w==",
       "dependencies": {
         "esbuild": "^0.19.3",
         "postcss": "^8.4.32",
diff --git a/package.json b/package.json
index b80621841..47a27e7ac 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,10 @@
     "preview": "vite preview",
     "test": "vitest run ./src/components/**/*.spec.jsx",
     "link-parser": "rm -rf node_modules/@laboratoria/curriculum-parser && ln -s ../../../curriculum-parser node_modules/@laboratoria/",
-    "link-react": "rm -rf node_modules/@laboratoria/react && ln -s ../../../react node_modules/@laboratoria/"
+    "link-react": "rm -rf node_modules/@laboratoria/react && ln -s ../../../react node_modules/@laboratoria/",
+    "preversion": "npm test",
+    "version": "rm -rf dist && npm run build:content && git add -A dist",
+    "postversion": "echo 'post versioning should do git push and git push --tags'"
   },
   "dependencies": {
     "@emotion/react": "^11.11.3",
@@ -51,7 +54,7 @@
     "react-dom": "^17.0.2",
     "react-intl": "^6.5.5",
     "react-router-dom": "^6.20.1",
-    "vite": "^5.0.11",
+    "vite": "^5.0.12",
     "web-vitals": "^3.5.1"
   },
   "devDependencies": {
diff --git a/projects/02-dataverse/README.pt.md b/projects/02-dataverse/README.pt.md
index aacce6691..7c43baaac 100644
--- a/projects/02-dataverse/README.pt.md
+++ b/projects/02-dataverse/README.pt.md
@@ -138,7 +138,7 @@ implementadas:
 * A aplicação deve permitir à usuária filtrar os dados. Você usará
   um elemento [`<select>`](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Element/select)
   com [um atributo de dados](https://developer.mozilla.org/pt-BR/docs/Learn/HTML/Howto/Use_data_attributes)
-  `data-testid="selecionar-filtro"`, e um atributo `name` com o nome
+  `data-testid="select-filter"`, e um atributo `name` com o nome
   da propriedade pela qual irá filtrar (por exemplo, se for filtrar por "tipo",
   o `<select>` terá `name="tipo"`). Os `<option>` deste `<select>` deverão
   ter no atributo `value` o valor do filtro (por exemplo, se for filtrar
@@ -148,19 +148,19 @@ implementadas:
   - Terá pelo menos um controle `<select>` para ordenar.
   - Se usar apenas um controle `<select>`, deve ter
     [um atributo de dados](https://developer.mozilla.org/pt-BR/docs/Learn/HTML/Howto/Use_data_attributes)
-    `data-testid="selecionar-ordenar"` e um atributo `name` com o nome da
+    `data-testid="select-sort"` e um atributo `name` com o nome da
     propriedade pela qual irá ordenar (por exemplo, se for ordenar por
     "num" seria `name="num"`). Este `<select>` terá dois [`<option>`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/option)
     com `value` `asc` e `desc`, para ordenar de forma ascendente e descendente
     respectivamente (por exemplo, `<option value="asc">A - Z</option>`).
   - Uma alternativa é oferecer à usuária uma ordenação mais complexa.
     Pode implementar a ordenação por várias propriedades. Neste caso, seria com
-    um `<select>` com um atributo de dados `data-testid="selecionar-ordenar"`,
+    um `<select>` com um atributo de dados `data-testid="select-sort"`,
     e que contenha filhos `<option>` com um `value` com o nome da propriedade
     pela qual irá ordenar. (Por exemplo, `<option value="nome">Nome</option>`).
     Além disso, você precisará de outro controle (`<radio>`,`<select>`, etc.)
     para indicar se a ordenação é ascendente ou descendente. Esse controle
-    secundário terá um atributo `name="ordem-ordenacao"`, e terá valores
+    secundário terá um atributo `name="sort-order"`, e terá valores
     `asc` e `desc`.
 
 * As funcionalidades de ordenação devem operar sobre os dados filtrados.
@@ -170,7 +170,7 @@ implementadas:
 
 * A aplicação deve permitir à usuária reiniciar a aplicação, limpando
   filtros e ordenamentos, com um `<button>` com um atributo de dados
-  `data-testid="botao-limpar"`.
+  `data-testid="button-clear"`.
 
 * As operações de filtrar, ordenar, limpar, etc. não devem recarregar
   a página, mas sim adicionar conteúdo de maneira
diff --git a/projects/03-dataverse-chat/README.pt.md b/projects/03-dataverse-chat/README.pt.md
index e9cd758b3..7c9369191 100644
--- a/projects/03-dataverse-chat/README.pt.md
+++ b/projects/03-dataverse-chat/README.pt.md
@@ -7,10 +7,11 @@
 * [3. Considerações gerais](#3-considerações-gerais)
 * [4. Funcionalidades](#4-funcionalidades)
 * [5. Considerações técnicas](#5-considerações-técnicas)
-* [6. Critérios de aceitação mínimos do projeto](#6-critérios-de-aceitação-mínimos-do-projeto)
-* [7. Objetivos de aprendizagem](#7-objetivos-de-aprendizagem)
-* [8. Dicas, guias e leituras complementares](#8-dicas-guias-e-leituras-complementares)
-* [9. Considerações para solicitar seu Feedback do Projeto](#9-considerações-para-solicitar-seu-feedback-do-projeto)
+* [6. Marcos](#6-Marcos)
+* [7. Critérios de aceitação mínimos do projeto](#7-critérios-de-aceitação-mínimos-do-projeto)
+* [8. Objetivos de aprendizagem](#8-objetivos-de-aprendizagem)
+* [9. Dicas, guias e leituras complementares](#9-dicas-guias-e-leituras-complementares)
+* [10. Considerações para solicitar seu Feedback do Projeto](#10-considerações-para-solicitar-seu-feedback-do-projeto)
 
 ***
 
@@ -259,7 +260,27 @@ os estilos necessários para a sua aplicação.
 Esta pasta contém os testes das suas funções e componentes. Por exemplo, os
 testes das `dataFunctions` devem estar aqui.
 
-## 6. Critérios de aceitação mínimos do projeto
+## 6. Marcos
+
+Para resolver um problema,
+é importante compreendê-lo em profundidade.
+Uma forma de fazer isso é desmembrá-lo em problemas menores.
+Isso nos ajudará a identificar as causas do problema e
+a desenvolver soluções mais eficazes.
+
+Neste projeto, sugerimos que trabalhe por marcos.
+Isso permitirá que você se concentre em um problema de cada vez e
+acompanhe seu progresso.
+A seguir, apresentamos um cronograma de marcos que
+pode ajudá-lo a organizar seu trabalho.
+
+* [Marco 1](./docs/01-milestone.md)
+* [Marco 2](./docs/02-milestone.md)
+* [Marco 3](./docs/03-milestone.md)
+* [Marco 4](./docs/04-milestone.md)
+* [Marco 5](./docs/05-milestone.md)
+
+## 7. Critérios de aceitação mínimos do projeto
 
 Além das funcionalidades que definimos na seção de [Funcionalidades](#4-funcionalidades),
 o seu projeto deve atender aos seguintes requisitos:
@@ -344,7 +365,7 @@ _functions_ (_funções_), _lines_ (_linhas_) e _branches_ (_ramos_) do arquivo
 `src/dataFunctions.js`, que contém as suas funções e é detalhado na seção de
 [Considerações técnicas](#5-considerações-técnicas).
 
-## 7. Objetivos de aprendizagem
+## 8. Objetivos de aprendizagem
 
 > ℹ️ Esta seção será automaticamente gerada no idioma apropriado, com base nos
 > objetivos de aprendizagem declarados em [`project.yml`](./project.yml),
@@ -353,11 +374,11 @@ _functions_ (_funções_), _lines_ (_linhas_) e _branches_ (_ramos_) do arquivo
 > Aqui você pode conferir uma [lista de todos os objetivos de aprendizagem](../../learning-objectives/data.yml)
 > que contempla nossa grade curricular.
 
-## 8. Dicas, guias e leituras complementares
+## 9. Dicas, guias e leituras complementares
 
 ### Primeiros passos
 
-Junte-se ao canal Slack [#project-dataverse-chat](https://claseslaboratoria.slack.com/archives/C03MV35EP5M)
+Junte-se ao canal Slack [#project-dataverse-chat-pt](https://claseslaboratoria.slack.com/archives/C06GE35H7B7)
 para conversar e pedir ajuda sobre o projeto.
 
 Sugerimos algumas tarefas para iniciar o projeto. Não é
@@ -451,7 +472,7 @@ sua aplicação.
 * [Vercel](https://vercel.com/)
 * [Netlify](https://www.netlify.com/)
 
-## 9. Considerações para solicitar seu Feedback do Projeto
+## 10. Considerações para solicitar seu Feedback do Projeto
 
 Antes de agendar seu Feedback do Projeto com um coach, certifique-se de que
 seu projeto:
diff --git a/projects/03-dataverse-chat/docs/01-milestone.pt.md b/projects/03-dataverse-chat/docs/01-milestone.pt.md
new file mode 100644
index 000000000..902ca58a1
--- /dev/null
+++ b/projects/03-dataverse-chat/docs/01-milestone.pt.md
@@ -0,0 +1,56 @@
+# **MARCO 1:** SPA
+
+Bem-vinda ao primeiro marco do seu aprendizado em JavaScript
+através de projetos. Neste marco, você começará construindo uma
+[SPA](https://pt.wikipedia.org/wiki/Aplicativo_de_p%C3%A1gina_%C3%BAnica)
+(Single Page Application).
+
+## Tarefas deste marco
+
+- [Protótipo de Dataverse](#prototipo-de-dataverse)
+- [Criação de Visualizações da SPA](#criação-de-visualizações-da-spa)
+
+### Protótipo de Dataverse
+
+Projete as visualizações da página inicial, onde serão apresentados
+os elementos do seu conjunto de dados, bem como as visualizações de
+Chat Individual e Chat em Grupo. A premissa é otimizar e
+reutilizar o design do protótipo do projeto anterior,
+incorporando exclusivamente a visualização de chat individual e/ou
+chat em grupo, evitando a necessidade de reinventá-lo.
+
+É fundamental que a sua proposta visual não apenas reflita a
+essência da sua solução ideal, mas também siga
+estritamente os princípios fundamentais do
+[design visual](https://coda.io/d/Bootcamp-UX-Contenido_dqkqk2rV9Z2/Diseno-de-interfaces_suOT7#_luWsQ).
+
+> [!TIP]
+> Use a identidade visual ou o protótipo do seu projeto anterior.
+
+### Criação de Visualizações da SPA
+
+  1. Seguindo este [guia](https://github.com/Laboratoria/curriculum/blob/main/guides/router-spa/README.pt.md),
+  vá até a pasta `views`.
+  2. Crie dois arquivos: `Home.js` e `About.js`,
+  cada um desses arquivos representará uma visualização.
+  3. Dentro de cada arquivo, adicione pelo menos um elemento ou
+  texto representativo da visualização correspondente.
+
+![Pré-visualização spa](./assets/previewSPA.gif)
+
+## Precisa de Ajuda?
+
+Se em algum momento você tiver dúvidas ou perguntas durante o desenvolvimento
+deste projeto, não hesite em procurar ajuda!
+Lembre-se de que você pode contar com:
+
+- **Documentação do Projeto:** Certifique-se de revisar cuidadosamente a
+documentação fornecida no [README](../README.md); especialmente as
+dicas, sugestões e leituras complementares.
+
+- **Coaches:** Os coaches estão aqui para ajudar você.
+Se você enfrentar obstáculos que a documentação não resolve ou se precisar
+de uma explicação mais detalhada, não hesite em solicitar uma OH ou
+nos enviar uma mensagem pelo Slack.
+
+[👈Todos os marcos](../README.md#6-marcos)
diff --git a/projects/03-dataverse-chat/docs/02-milestone.pt.md b/projects/03-dataverse-chat/docs/02-milestone.pt.md
new file mode 100644
index 000000000..57ed3ac2c
--- /dev/null
+++ b/projects/03-dataverse-chat/docs/02-milestone.pt.md
@@ -0,0 +1,148 @@
+# **MARCO 2:** Visualização de dados
+
+A divisão do código em funções pequenas facilita sua
+reutilização em projetos diferentes. O objetivo deste marco é fazer com que o Dataverse
+funcione a 100% dentro da sua SPA,
+incluindo as funções de filtragem,
+ordenação e cálculo.
+
+## Tarefas deste marco
+
+- [Migração do conjunto de dados do Dataverse](#migração-do-conjunto-de-dados-do-dataverse)
+- [Reutilização de Funções do Dataverse](#reutilização-de-funções-do-dataverse)
+- [Configuração de testes para funções migradas](#configuração-de-testes-para-funções-migradas)
+- [Visualizar o conjunto de Dados](#visualizar-o-conjunto-de-dados)
+
+### Migração do conjunto de dados do Dataverse
+
+Crie uma pasta chamada `data` dentro de `src`.
+Dentro dessa pasta, crie um arquivo `dataset.js` e
+copie seu conjunto de dados para esse arquivo.
+
+``` js
+// src/data/dataset.js
+
+export default [
+  {
+    "id": "marie-curie",
+    "name": "Marie Curie",
+    "shortDescription": "Física e química, ganhadora de dois Prêmios Nobel.",
+    "description": "física e química ...",
+    "imageUrl": "https://laboratoria-dataverse-talks.netlify.app/public/marie-curie.jpg",
+    "facts": {
+      "yearOfBirth": "1867",
+      "yearOfDeath": "1934",
+      "birthPlace": "Varsóvia, Polônia",
+      "mainField": "Física e Química"
+    },
+    "extraInfo": {
+      "imageSource": "https://www.historyextra.com/period/first-world-war/life-of-the-week-marie-curie/"
+    }
+  },
+]
+```
+
+### Reutilização de Funções do Dataverse
+
+Vamos reutilizar as funções de filtragem, ordenação e
+cálculo do seu projeto anterior neste novo projeto.
+Para isso, crie um novo arquivo no seguinte caminho:
+`src/lib/dataFunctions.js` e copie as funções mencionadas
+para esse arquivo. Se ainda não existir, você precisará criar uma pasta
+chamada `lib` dentro da pasta `src` (src/lib).
+
+>[!TIP]
+> Volte ao README principal tantas vezes quanto necessário.
+> [5. Considerações técnicas](../README.md#5-considerações-técnicas)
+
+Exemplo:
+
+```js
+// src/lib/dataFunctions.js
+
+export const filterData = (data, filterBy, value) => {
+  return 'example';
+};
+
+export const sortData = (data, sortBy, sortOrder) => {
+  return [];
+};
+
+export const computeStats = (data) => {
+  return [];
+};
+```
+
+>[!TIP]
+> Consulte estes links para obter mais informações sobre como importar
+> [módulos](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Guide/Modules)
+> e [funções](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Functions)
+
+### Configuração de testes para funções migradas
+
+Para continuar com as migrações, é necessário criar uma
+pasta `test` na
+raiz do projeto. Dentro da pasta `test`, crie um arquivo
+`dataFunctions.spec.js`. Neste arquivo, copie seus testes do Dataverse
+e ajuste as importações para que funcionem corretamente.
+
+``` js
+// test/dataFunctions.spec.js
+
+import { data } from '../src/data/dataset.js';
+import { filterData } from '../src/lib/dataFunctions.js';
+
+console.log(data);
+
+describe('filterData', () => {
+
+  it('returns `filterData`', () => {
+    expect(filterData()).toBe('example');
+  });
+});
+```
+
+>[!TIP]
+> Na pasta de testes, considere ter um arquivo de teste
+(suite) para cada arquivo JavaScript que deseja testar.
+
+### Visualizar o conjunto de Dados
+
+Uma vez que as funções estejam em `dataFunctions.js`
+junto com seus respectivos testes,
+podemos avançar com a visualização do conjunto de dados.
+O objetivo é conseguir visualizar
+o conjunto de dados de forma semelhante ao Dataverse, mas dentro da SPA.
+
+Para alcançar isso, recomendamos que você faça modificações
+no arquivo `Home.js` localizado na pasta `views`.
+Este arquivo deve conter o código necessário para
+visualizar o conjunto de dados. Tenha em mente que,
+neste caso, cada visualização deve retornar
+um elemento para que possa ser renderizado pelo router.
+É provável que você precise adaptar o
+código da sua visualização anterior para modificar um novo elemento
+dentro desta visualização `Home.js`.
+Se tiver dúvidas, você pode revisar novamente o
+[guia do router](https://github.com/Laboratoria/curriculum/blob/main/guides/router-spa/README.pt.md)
+e consultar os coaches para obter
+mais clareza neste processo.
+
+``` js
+// src/views/Home.js
+
+import { data } from '../data/dataset.js';
+import { filterData } from '../lib/dataFunctions.js';
+
+export function Home(props) {
+  const viewEl = document.createElement('div');
+  //Modificariamos el contenido del nuevo elemento con lo realizado en Dataverse
+  viewEl.innerHTML = `
+    <h1>DataVerse</h1>
+    ...
+  `;
+  return viewEl;
+}
+```
+
+[👈Todos os marcos](../README.md#6-marcos)
diff --git a/projects/03-dataverse-chat/docs/03-milestone.pt.md b/projects/03-dataverse-chat/docs/03-milestone.pt.md
new file mode 100644
index 000000000..9b2d702f4
--- /dev/null
+++ b/projects/03-dataverse-chat/docs/03-milestone.pt.md
@@ -0,0 +1,144 @@
+# **MARCO 3:** Conectar a API OpenAI (chat individual)
+
+Armazenar de forma segura sua chave de API e garantir que nosso aplicativo se
+conecte de forma eficaz à API OpenAI são o cerne deste marco.
+<!-- Este é um dica do Github Pages, https://github.com/orgs/community/discussions/16925 -->
+> [!IMPORTANT]
+> Para isso, certifique-se de solicitar sua APIKEY aos coaches.
+
+## Tarefas deste marco
+
+- [Manejo da API KEY na Aplicação](#manejo-da-api-key-na-aplicação)
+- [Armazenamento Seguro da API KEY com Local Storage](#armazenamento-seguro-da-api-key-com-local-storage)
+- [Testes para funções de API Key](#testes-para-funções-de-api-key)
+- [Criação de uma visualização para interagir com cada elemento do conjunto de dados](#criação-de-uma-visualização-para-interagir-com-cada-elemento-do-conjunto-de-dados)
+- [Integração com Open AI](#integração-com-open-ai)
+
+### Manejo da API KEY na Aplicação
+
+O manejo das API KEYs é crucial para manter a segurança.
+A fim de não incluir a chave diretamente no código do aplicativo,
+crie um campo de entrada que permita inserir ou colar a API KEY.
+Este campo de entrada pode estar localizado em uma visualização,
+diálogo ou modal.
+
+![Preview apiKey](./assets/previewApiKey.png)
+
+### Armazenamento Seguro da API KEY com Local Storage
+
+Para garantir a segurança e persistência da
+API KEY, sugere-se utilizar [Local Storage](https://developer.mozilla.org/pt-BR/docs/Web/API/Window/localStorage).
+Recomendamos seguir estes passos:
+
+1. Na pasta `lib`, crie um novo arquivo chamado `apiKey.js`.
+
+2. Dentro de `apiKey.js`, implemente duas funções essenciais:
+
+```js
+// src/lib/apiKey.js
+
+export const getApiKey = () => {
+   // Implementa el código para obtener la API KEY desde Local Storage
+};
+
+export const setApiKey = (key) => {
+  // Implementa el código para guardar la API KEY en Local Storage
+};
+```
+
+### Testes para funções de API Key
+
+Dentro da pasta `test`, crie um arquivo chamado
+`apiKey.spec.js`. Neste arquivo, desenvolva os
+testes correspondentes. Você pode utilizar o seguinte
+esquema como ponto de partida:
+
+``` js
+// test/apiKey.spec.js
+
+import { getApiKey, setApiKey } from '../src/lib/apiKey.js';
+
+describe('getApiKey', () => {
+
+  it('debería devolver el valor de la API Key', () => {
+    // Desarrolla el test correspondiente aquí
+  });
+});
+
+describe('setApiKey', () => {
+
+  it('debería establecer correctamente la API Key', () => {
+   // Desarrolla el test correspondiente aquí
+  });
+});
+
+```
+
+### Criação de uma visualização para interagir com cada elemento do conjunto de dados
+
+Para facilitar a interação com um elemento específico do nosso
+conjunto de dados, criaremos uma nova visualização. Siga estes passos:
+
+1. Acesse a pasta `views` do seu projeto.
+Se encontrar um arquivo chamado `About.js`,
+renomeie-o conforme o conjunto de dados
+com o qual está lidando, como por exemplo `Planet.js`
+se estiver trabalhando com dados de planetas.
+Se o arquivo `About.js` não existir,
+você pode criar um novo com um nome relevante.
+
+2. Dentro deste arquivo, desenvolva a visualização que permitirá interagir
+com os elementos do conjunto de dados. Você pode incluir componentes como botões,
+formulários ou qualquer outro elemento necessário para alcançar o objetivo específico
+da sua aplicação.
+
+3. Certifique-se de que esta visualização possa receber um identificador (id)
+ou outros dados necessários para mostrar o elemento específico do conjunto
+de dados. Você pode conseguir isso usando parâmetros, como por
+exemplo através dos
+[search params](https://developer.mozilla.org/pt-BR/docs/Web/API/URLSearchParams)
+da URL que o router pode comunicar.
+
+![Preview Detail](./assets/previewDetail.gif)
+
+> [!IMPORTANT]
+> Lembre-se de utilizar as funções que criamos anteriormente em `apiKey.js`
+para gerenciar de forma segura a API KEY.
+
+### Integração com Open AI
+
+Para obter respostas de cada elemento ou personagem e poder interagir
+com ele ou ela, é essencial fazer uma solicitação HTTP para a OpenAI.
+Neste processo, é recomendável se familiarizar com os conceitos de
+[promessas](https://curriculum.laboratoria.la/pt/topics/javascript/async/promises)
+e considerar o uso de
+[fetch](https://developer.mozilla.org/pt-BR/docs/Web/API/Fetch_API/Using_Fetch)
+ou [axios](https://axios-http.com/docs/intro)
+para realizar a solicitação.
+
+Sugerimos que você organize o código associado a esta tarefa dentro da pasta `lib`.
+Nesta pasta, você pode criar um arquivo chamado `openAIApi.js`,
+que conterá uma função específica. Esta função deve receber um parâmetro
+que armazena as mensagens; tenha em mente que essas mensagens devem seguir uma
+estrutura específica, que você pode entender melhor consultando a
+[documentação](https://platform.openai.com/docs/api-reference/chat/create)
+fornecida pela OpenAI.
+
+```js
+// src/lib/openAIApi.js
+
+// Importa la función para obtener la API KEY desde apiKey.js
+import { getApiKey } from './apiKey.js';
+
+
+export const communicateWithOpenAI = (messages) => {
+   //Aquí es donde debes implementar la petición con fetch o axios
+};
+
+```
+
+> [!NOTE]
+> `communicateWithOpenAI` é uma sugestão para o nome
+da sua função. Você pode escolher o nome que preferir.
+
+[👈Todos os marcos](../README.md#6-marcos)
diff --git a/projects/03-dataverse-chat/docs/04-milestone.pt.md b/projects/03-dataverse-chat/docs/04-milestone.pt.md
new file mode 100644
index 000000000..6e7dcf794
--- /dev/null
+++ b/projects/03-dataverse-chat/docs/04-milestone.pt.md
@@ -0,0 +1,81 @@
+# **MARCO 4:** Conectar a API OpenAI (chat grupal)
+
+O objetivo deste marco é permitir que os usuários interajam com
+todos os personagens através de um chat grupal.
+
+## Tarefas deste marco
+
+- [Criação de uma visualização para interagir com todos os elementos do conjunto de dados](#criação-de-uma-visualização-para-interagir-com-todos-os-elementos-do-conjunto-de-dados)
+- [Consumo da integração com Open AI](#consumo-da-integração-com-open-ai)
+- [Implementação de testes](#implementação-de-testes)
+
+### Criação de uma visualização para interagir com todos os elementos do conjunto de dados
+
+1. Navegue até a pasta `views` em seu projeto e dentro dela,
+crie um componente para a visualização do chat grupal,
+por exemplo, `ChatGroup.js` ou `Panel.js`,
+que mostrará um chat grupal com todos os personagens.
+Este componente deve permitir aos usuários enviar
+mensagens para todos os personagens ou elementos do conjunto de dados
+e receber respostas.
+
+2. A visualização deve ser capaz de obter os dados necessários (id) para
+mostrar os elementos do conjunto de dados.
+Isso pode ser feito passando os dados como parâmetros ou utilizando
+funções que obtêm os dados.
+
+### Consumo da integração com Open AI
+
+Obtenha as respostas de todos os elementos nos dados utilizando
+a função designada para consumir a API da OpenAI,
+neste exemplo, `communicateWithOpenAI`.
+Isso permitirá que os usuários interajam com todos os
+personagens através
+de um chat grupal.
+
+> [!TIP]
+> Revise o tópico de
+>[Promessas](https://curriculum.laboratoria.la/pt/topics/javascript/async/promises)
+>e o método
+>[Promise.all()](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript/Reference/Global_Objects/Promise/all)
+
+Para alcançar este objetivo, siga estes passos:
+
+1. Obtenha a lista de elementos nos dados.
+
+2. Para cada elemento na lista:
+
+   + Envie uma mensagem para a função communicateWithOpenAI.
+   + Guarde a resposta da função communicateWithOpenAI.
+   + Mostre a resposta da função communicateWithOpenAI.
+
+![Preview Chat Grupal](./assets/previewGrupalChat.gif)
+
+### Implementação de testes
+
+Para verificar o funcionamento das funções criadas, crie um arquivo
+`openAIApi.spec.js` na pasta `test`.
+
+> [!TIP]
+> Você pode revisar esta documentação sobre [Testes de código assíncrono](https://jestjs.io/pt-BR/docs/asynchronous).
+
+``` js
+// test/openAIApi.spec.js
+
+import { communicateWithOpenAI } from '../src/utils/openAIApi.js';
+
+describe('communicateWithOpenAI', () => {
+  test('communicateWithOpenAI', () => {
+    return communicateWithOpenAI().then(data => {
+      expect(data).toBe('example');
+    });
+  });
+});
+
+```
+
+> [!NOTE]
+> `communicateWithOpenAI` é uma sugestão para o nome
+da sua função. Você pode escolher o nome que preferir.
+
+[👈Todos os marcos](../README.md#6-marcos)
diff --git a/projects/03-dataverse-chat/docs/05-milestone.pt.md b/projects/03-dataverse-chat/docs/05-milestone.pt.md
new file mode 100644
index 000000000..ea00e1dfd
--- /dev/null
+++ b/projects/03-dataverse-chat/docs/05-milestone.pt.md
@@ -0,0 +1,72 @@
+# **MARCO 5:** Refatoração e Modularização
+
+O objetivo deste **marco opcional** é melhorar a estrutura
+e organização do aplicativo através da refatoração
+e modularização.
+
+A refatoração e modularização são essenciais para
+melhorar a estrutura de um aplicativo. A primeira
+otimiza o código sem alterar seu comportamento, enquanto
+a segunda divide o aplicativo em componentes mais
+gerenciáveis. É crucial executar e corrigir os testes
+simultaneamente para garantir a integridade do código.
+
+Ao dividir um aplicativo em componentes menores,
+podemos alcançar os seguintes benefícios:
+
+* Melhora a legibilidade e compreensão do código.
+* Facilita a manutenção e atualização do código.
+* Reduz a complexidade do aplicativo.
+* Melhora o desempenho do aplicativo.
+
+## Tarefas deste marco
+
+* [Identificar partes para dividir](#identificar-partes-para-dividir)
+* [Implementar a divisão dos componentes menores](#implementar-a-divisão-dos-componentes-menores)
+* [Assegurar o funcionamento pós-refatoração](#assegurar-o-funcionamento-pós-refatoração)
+
+### Identificar partes para dividir
+
+Para esta tarefa, você deve examinar o aplicativo e buscar áreas
+que possam ser divididas em componentes menores.
+Algumas coisas a serem consideradas são:
+
+1. Funções que realizam tarefas independentes.
+2. Dados que são usados de forma independente.
+3. Interface do usuário que pode ser dividida em partes menores.
+
+### Implementar a divisão dos componentes menores
+
+Uma vez identificadas as partes que podem ser divididas,
+você deve implementar a divisão em componentes menores.
+Isso pode ser feito de várias maneiras, como:
+
+1. Criar novos componentes a partir de código existente.
+2. Mover código existente para componentes existentes.
+3. Reestruturar o código existente para que seja mais modular.
+
+### Assegurar funcionamento pós-refatoração
+
+É importante testar o aplicativo após a refatoração para garantir
+que ele funcione corretamente. Isso pode ser feito testando
+o aplicativo manualmente ou utilizando um framework de testes automatizados.
+
+#### Exemplo
+
+Vamos supor que temos um aplicativo que mostra uma lista de personagens.
+O aplicativo possui uma visualização que exibe a lista de personagens,
+e uma função que obtém os dados dos personagens.
+
+Para melhorar a estrutura e organização do aplicativo,
+podemos dividir a função `getCharacters()` em dois componentes
+menores:
+
+1. Um componente `CharacterRepository` que é responsável por obter
+os dados dos personagens.
+
+2. Um componente `CharacterList` que é responsável por exibir a lista de personagens.
+
+Essa divisão nos permite separar a lógica de obtenção de dados
+da lógica de visualização. Isso torna o aplicativo mais fácil de entender e manter.
+
+[👈Todos os marcos](../README.md#6-marcos)