Front-End.md

+| [Home](home) | [Escopo e Cronograma](escopo-e-cronograma) | [Processo](processo) | [Mockups](design_mockups) | [**Configuração**](configuracao) | [Arquitetura](arquitetura) | [Código](codigo) | [BD](banco_dados) | [Qualidade](qualidade) | [Utilização](utilizacao) | [Front-end](front-end) |
+| :----------: | :---------------------------: | :------------------: | :--------------: | :------------------------------: | :------------------------: | :--------------: | :---------------: | :--------------------: | :----------------------: | :---------: |
+
+# Bem-vindo à WIKI do Front-end
+
+Esta WIKI foi criada para fornecer uma visão geral e instruções detalhadas sobre o front-end do projeto HoorTech. Aqui, você encontrará informações sobre a arquitetura do projeto, as tecnologias e bibliotecas utilizadas, e os passos necessários para configurar e rodar o ambiente de desenvolvimento.
+
+Este documento é uma referência completa para desenvolvedores que trabalham no projeto, facilitando a compreensão da estrutura e dos componentes utilizados. Siga os tópicos abaixo para obter informações específicas:
+
+- [**Arquitetura Base**](#arquitetura-base): Entenda a estrutura do projeto e o papel de cada diretório e arquivo principal.
+- [**Tecnologias Utilizadas**](#tecnologias-utilizadas): Descubra as ferramentas e frameworks que compõem a base do projeto, como React e Docker.
+- [**Bibliotecas Utilizadas**](#bibliotecas-utilizadas): Veja uma descrição das bibliotecas principais, como Material UI e jsPDF, e como elas aprimoram a funcionalidade e a aparência da aplicação.
+- [**Rodando o Front-end pela Primeira Vez**](#rodando-o-front-end-pela-primeira-vez): Um guia passo a passo para configurar o ambiente de desenvolvimento e rodar a aplicação localmente.
+- [**Scripts Disponíveis**](#scripts-disponíveis): Lista dos comandos que podem ser executados para iniciar, compilar e configurar o projeto.
+
+Use esta WIKI como um recurso de apoio para colaborar e desenvolver no Front-end!
+
+## Arquitetura Base
+**Também disponível em**: [Arquitetura](arquitetura)
+```python
+hoortech_frontend/
+├── node_modules/            # Módulos e pacotes instalados via npm
+├── public/                  # Arquivos públicos estáticos
+│   ├── favicon.ico          # Ícone da aba do navegador
+│   ├── index.html           # Arquivo HTML principal
+│   ├── logo192.png          # Ícone padrão (opcional)
+│   ├── logo512.png          # Ícone padrão (opcional)
+│   ├── manifest.json        # Configurações de PWA (opcional)
+│   └── robots.txt           # Configurações para motores de busca
+├── src/                     # Código-fonte do projeto
+│   ├── assets/              # Arquivos estáticos (imagens, fontes, etc.)
+│   ├── components/          # Componentes React reutilizáveis
+│   │   ├── camera/          # Componentes relacionados à câmera
+│   │   ├── displayLayout/   # Componentes de layout de exibição
+│   │   ├── header/          # Componente do cabeçalho
+│   │   ├── languageDropdown/ # Dropdown para seleção de idioma
+│   │   ├── modal/           # Componentes de modal
+│   │   ├── primaryButton/   # Botão principal reutilizável
+│   │   └── translationHistory/ # Histórico de traduções realizadas
+│   ├── pages/               # Componentes de página
+│   ├── services/            # Serviços para comunicação com APIs
+│   ├── styles/              # Arquivos de estilização (CSS, SASS, etc.)
+│   ├── tests/               # Arquivos de testes
+│   ├── utils/               # Funções utilitárias e helpers
+│   ├── routes.js            # Configuração de rotas da aplicação
+│   ├── App.js               # Componente principal
+│   ├── index.js             # Ponto de entrada do React
+│   └── ...
+├── .gitignore               # Arquivos a serem ignorados pelo Git
+├── das                      # Arquivo adicional (explicação necessária se relevante)
+├── DockerFile               # Arquivo de configuração para Docker
+├── package.json             # Arquivo de configuração do npm
+├── package-lock.json        # Versões exatas das dependências instaladas
+└── README.md                # Instruções do projeto
+```
+## Tecnologias Utilizadas
+
+- **React**: React é uma biblioteca JavaScript focada na criação de interfaces de usuário dinâmicas e responsivas. Desenvolvido pelo Facebook, ele permite construir aplicações utilizando componentes reutilizáveis e de fácil manutenção, o que facilita o desenvolvimento e a escalabilidade do projeto.  
+
+  No projeto HoorTech, o React foi escolhido pela sua vasta documentação e comunidade ativa, o que torna o aprendizado acessível para novos desenvolvedores, incluindo os estudantes de AGES I. Além disso, a estrutura declarativa e modular do React permite que os novos integrantes participem ativamente no desenvolvimento desde o início. O React também facilita o uso de WebSockets, essenciais para implementar funcionalidades em tempo real, tornando-o uma escolha ideal para as necessidades específicas do projeto.
+
+- **Docker**: Docker é uma plataforma que permite criar, implantar e executar aplicações em contêineres, garantindo que o ambiente de execução seja consistente em diferentes máquinas e sistemas. No projeto HoorTech, o Docker é utilizado para criar um contêiner que encapsula o front-end com todas as suas dependências, garantindo que a aplicação rode de forma previsível, independente do ambiente do desenvolvedor. 
+
+  Com Docker, é possível configurar o ambiente de desenvolvimento e produção de forma rápida e padronizada, facilitando o processo de deploy e a integração com outros serviços. Isso permite que os desenvolvedores e a equipe de operações executem a aplicação em qualquer sistema que suporte Docker, assegurando uma execução consistente do projeto.
+
+
+## Bibliotecas Utilizadas:
+- **Material UI**: Material UI é uma biblioteca de componentes React que implementa o Material Design, o sistema de design desenvolvido pelo Google. Ela fornece uma ampla gama de componentes prontos e estilizados, como botões, formulários, tabelas, ícones, entre outros, permitindo que a aplicação tenha uma aparência moderna e consistente. O Material UI facilita a criação de interfaces de usuário responsivas e customizáveis, proporcionando uma experiência de usuário otimizada e visualmente atraente.
+
+- **jsPDF**: jsPDF é uma biblioteca JavaScript que permite gerar documentos PDF diretamente no navegador. Com ela, é possível criar arquivos PDF contendo textos, imagens, gráficos e outros elementos de forma programática. No projeto, o jsPDF é usado para possibilitar funcionalidades como exportação de relatórios, recibos ou outros documentos, gerando PDFs sem a necessidade de um servidor para processamento.
+
+## Rodando o Front-end pela primeira vez
+
+Siga os passos abaixo para configurar e iniciar o ambiente de desenvolvimento do projeto HoorTech.
+
+### 1. Pré-requisitos
+
+Certifique-se de ter os seguintes requisitos instalados:
+
+- **Node.js**: [Baixe o Node.js aqui](https://nodejs.org/)
+- **npm** (incluso com o Node.js) ou **yarn** (opcional): [Yarn](https://yarnpkg.com/)
+
+### 2. Clonar o Repositório
+
+Primeiro, clone o repositório do projeto para a sua máquina local. No terminal, execute o seguinte comando:
+
+```bash
+git clone https://tools.ages.pucrs.br/hoortech/hoortech_frontend.git
+```
+
+### 3. Clonar o Repositório
+
+Após clonar o repositório, entre no diretório do projeto
+```bash
+cd hoortech_frontend
+```
+### 4. Instale as dependências
+```bash
+npm install
+```
+ou  
+```bash
+yarn install
+```
+E todas as dependências disponíveis na aba [Scripts Disponíveis](#scripts-disponíveis)
+### 5. Inicie o servidor de desenvolvimento
+```bash
+npm start
+```
+ou
+```bash
+yarn start
+```
+### 6. Abrindo a aplicação manualmente (localHost):
+
+Recomenda-se abrir a aplicação em uma **aba anônima** (ou modo privado) do navegador. Isso ajuda a evitar problemas ou bugs relacionados ao *cache armazenado na máquina*, garantindo que a aplicação seja carregada com as *atualizações mais recentes*.  
+Utilize o **localHost** abaixo (verifique se em sua máquina o caminho é o padrão utilizado no projeto):
+```arduino
+http://localhost:5003
+```
+
+## Scripts Disponíveis:  
+No diretório do projeto, você pode executar os seguintes comandos:
+- *npm start*: 
+  - Inicia o servidor de desenvolvimento.
+- *npm run build*:
+  - Compila a aplicação para produção na pasta build.
+- *npm run eject*:  
+  - Remove a dependência de configuração do create-react-app.
+- *npm install @mui/icons-material @mui/material @emotion/styled @emotion/react*:
+  - instala Material Icons. (Atente-se para a versão atual do mui-material e do mui-icon-materials para que estejam na mesma versão)
+- *npm install jspdf*:  
+  - instala a biblioteca jsPDF 
+- *Porta atualmente utilizada*:
+  - http://localhost:5003
\ No newline at end of file