Arquitetura.md

@@ -35,17 +35,6 @@
 
 - Para criar um diagrama de componentes eficiente para a aplicação "Cosmos", que ilustre claramente, podemos seguir a descrição a seguir, organizando os elementos conforme suas funções específicas:
 
-- **Componentes de Usuário (User Interface Components)**
-  - **Texto**
-    - **Função**: Text.
-    - **Responsabilidades**: Texto.
-    - **Plataformas Suportadas**: Texto.
-
-- **Componentes de Servidor (Server-side Components)**
-  - **Texto**
-    - **Função**: Texto.
-    - **Responsabilidades**: Texto.
-
 - **Componentes de Infraestrutura**
   - **Docker Containers**
     - **Função**: Isolamento e gerenciamento de dependências.
@@ -60,31 +49,25 @@
     - **Função**: Armazenamento para dados estáticos ou backups.
     - **Responsabilidades**: Integrar-se com a aplicação para armazenamento de dados não-relacionais.
 
-- **Componentes de Comunicação**
-  - **Texto**
-    - **Função**: Texto.
-    - **Responsabilidades**: Texto.
-
-
 # Definições de Tecnologias
 
 - Logo abaixo todas as tecnologias e linguagens de programação utilizadas no projeto.
 
 ## Frontend
 
-- **Repositório**: https://tools.ages.pucrs.br/
+- **Repositório**: https://tools.ages.pucrs.br/cosmos/cosmos-frontend
+
+- **React**: Biblioteca JavaScript usada para construir interfaces de usuário dinâmicas e interativas. Ela permite criar componentes reutilizáveis, o que facilita a manutenção e o desenvolvimento de grandes aplicações web. [Referência](https://react.dev/learn)
 
 - **TypeScript**: Linguagem de programação que estende JavaScript adicionando tipos estáticos, o que ajuda a detectar erros em tempo de desenvolvimento, melhorando a manutenção do código. [Referência](https://typescriptlang.org)
 
 - **JavaScript**: Uma linguagem de programação versátil usada principalmente para criar interatividade em sites e aplicações web. [Referência](https://developer.mozilla.org/pt-BR/docs/Web/JavaScript)
 
-- **Docker**: Plataforma que usa contêinerização para facilitar o desenvolvimento, o teste e a implantação de aplicações, garantindo que elas funcionem da mesma maneira em diferentes ambientes. [Referência](https://docker.com)
-
 - **HTML/CSS**: HTML é usado para estruturar o conteúdo na web, e CSS é usado para controlar a apresentação, formatação e layout. [Referência](https://developer.mozilla.org/en-US/docs/Web)
 
-- **React Navigation**: Biblioteca para lidar com navegação e transição entre as telas em aplicativos usando React Native ou React. [Referência](https://reactnavigation.org)
-
+- **SASS**: Pré-processador CSS que adiciona recursos como variáveis, aninhamento e mixins ao CSS, tornando o código mais organizado e fácil de manter. [Referência](https://sass-lang.com/documentation/)
 
+- **Docker**: Plataforma que usa contêinerização para facilitar o desenvolvimento, o teste e a implantação de aplicações, garantindo que elas funcionem da mesma maneira em diferentes ambientes. [Referência](https://docker.com)
 
 ## Backend
 
@@ -103,16 +86,30 @@
 
 - **Frontend:**
   - **Estrutura Principal**
+    - `.vscode`: Configurações para o editor VS Code, como extensões recomendadas e configurações específicas do projeto.
+    - `node_modules`: Bibliotecas e dependências do projeto instaladas via npm ou yarn.
+    - `public`: Pasta com arquivos estáticos, como index.html e imagens, servidos diretamente pelo servidor.
     - `src`: Diretório principal onde o código-fonte do front-end está organizado.
 
   - **Dentro do diretório src**
-    - `assets`: Recursos estáticos como imagens, vídeos ou arquivos de som.
-    - `components`: Componentes reutilizáveis usados em várias partes do aplicativo.
-    - `constants`: Constantes utilizadas ao longo do projeto, como cores, strings, etc.
-    - `controllers`: Lógica para manipular a interação entre a UI e o modelo de dados.
+    - `components`: Contém componentes reutilizáveis usados em várias partes do aplicativo.
+    - `context`: Armazena e gerencia os contextos do React, fornecendo estados globais e lógica compartilhada para a aplicação.
+    - `hooks`: Reúne hooks personalizados do React utilizados no projeto.
+    - `models`: Define as interfaces e tipos que descrevem as estruturas de dados usadas na aplicação.
+    - `pages`: Contém as páginas principais da aplicação, geralmente representando rotas únicas.
+    - `routes`: Gerencia as rotas e a navegação dentro da aplicação.
+    - `services`: Serviços que lidam com a lógica de negócios e as interações com APIs externas.
+    - `styles`: Define os estilos globais e componentes de estilo utilizados em toda a aplicação.
+    - `index.tsx`: Arquivo de entrada principal do projeto React, onde a aplicação é inicializada.
+    - `theme.ts`: Define e gerencia temas de estilo globais, como cores e tipografia.
 
   - **Arquivos de Configuração e Scripts**
-    - `Texto`: Texto
+    - `.eslintrc.js`: Arquivo de configuração para o ESLint, que define regras e padrões de código a serem seguidos no projeto, ajudando a manter a qualidade e consistência do código.
+    - `.gitignore`: Arquivo que especifica quais arquivos e diretórios devem ser ignorados pelo Git, evitando que informações sensíveis ou desnecessárias sejam versionadas.
+    - `.prettierrc`: Arquivo de configuração para o Prettier, que define regras de formatação de código, como indentação, uso de aspas, e comprimento máximo de linhas, para manter um estilo de código consistente.
+    - `package-lock.json` & `package.json`: Arquivos que gerenciam as dependências do projeto e garantem uma instalação consistente das mesmas.
+    - `README.md`: Arquivo de documentação do projeto, geralmente contendo instruções de instalação, uso e outras informações importantes sobre o projeto.
+    - `tsconfig.json`: Configurações do TypeScript para o projeto, definindo como o código TypeScript deve ser compilado.
 
 - **Backend:**
   - **Estrutura Principal**