frontend.md

@@ -18,11 +18,72 @@ TODO
 
 ## Organização do repositório
 
-TODO
+O projeto React Native do repositório de Frontend está organizado seguindo um padrão de componentização. Essa abordagem envolve a divisão da interface do usuário em componentes modulares e reutilizáveis, que são então compostos para formar as diversas telas ou páginas do aplicativo. Dessa forma, tendo um componente podemos passar parametros com o que quisermos ter e trabalhar na tela. As telas tem um comportamento semelhante, dado que elas são chamadas a partir de um arquivo que irá realizar o controle de roteamento do usuário passando as informações necessárias para que se possa executar as funcionalidades da aplicação.
+
+Diante disso, os pacotes do projeto estão divididos da forma abaixo:
+
+- :file_folder: `app/`: Telas e layouts principais.
+- :file_folder: `src/`
+  - :file_folder: `assets/`: Recursos estáticos como imagens e fontes.
+  - :file_folder: `components/`: Componentes reutilizáveis, incluindo:
+    - :file_folder: `ui/`: Componentes específicos do GlueStack.
+  - :file_folder: `constants/`: Constantes globais, como cores e strings.
+  - :file_folder: `contexts/`: Providers e contextos globais.
+  - :file_folder: `hooks/`: Hooks compartilhados para lógica reutilizável.
+  - :file_folder: `types/`: Definições de tipos TypeScript.
+
+  `+`: Arquivos de configuração do projeto, como tailwind.config.js, eslint.config.js, e tsconfig.json
 
 ## Padrões de código
 
-TODO
+Com intuito de manter legibilidade e consistência no código a seguir estão algumas padronizações definidas.
+
+### Nomenclatura de funções e variáveis
+
+Funções do projeto devem ser nomeadas em inglês e seguir o padrão **camelCase**, ou seja, devem iniciar com letra maiúscula e cada palavra ou abreviatura no meio da frase também deve iniciar com letra maiúscula. Por exemplo:
+
+- variableExample :heavy_check_mark:
+- Variable_Example :x:
+- Variableexample :x:
+- VariableExample :x:
+
+### Nomenclatura de componentes
+
+Componentes do projeto devem ser nomeadas em inglês e seguir o padrão **PascalCase**, ou seja, devem iniciar com letra maiúscula e cada palavra ou abreviatura no meio da frase também deve iniciar com letra maiúscula. Além disso, o nome do arquivo e da função de retorno do componente deve seguir o padrão `{O que é o componente?}.tsx`. Por exemplo:
+
+- InputText.tsx :heavy_check_mark:
+- Input_Text_Component.tsx :x:
+- Inputtext.tsx :x:
+- inputText.tsx :x:
+
+### Nomenclatura de telas
+
+Telas do projeto devem ser nomeadas em inglês e seguir o padrão **PascalCase**, ou seja, devem iniciar com letra maiúscula e cada palavra ou abreviatura no meio da frase também deve iniciar com letra maiúscula. Além disso, o nome do arquivo e da função de retorno da tela deve seguir o padrão `{O que é a tela?}.tsx`. Por exemplo:
+
+- CreateAccount.tsx :heavy_check_mark:
+- Create_Account.tsx :x:
+- Createaccount.tsx :x:
+- createAccount.tsx :x:
+
+### Documentação de componentes e telas
+
+Para que outras pessoas que forem olhar como utilizar seu componente ou tela é importante que elas entendam o que cada parâmetro quer dizer. Com isso, vem a importância da documentação de parâmetros de componentes e telas a fim de proporcionar uma compreensão rápida e evitar erros. Embora o nome da variável muitas vezes deixe explícito o que ela faz, outras vezes pode ser que não esteja tão claro assim. Dessa forma, isso leva a um custo de a pessoa ter de analisar o código para entender o que X valor significa. 
+
+Assim, para cada componente e tela, visto que componentes serão chamados múltiplas vezes e telas serão chamadas no roteamento, é importante seguir o seguinte padrão de documentação no começo do arquivo .tsx de cada um:
+
+- breve descrição do que o componente/tela é responsável
+- parametros do componente/tela e descrição do que eles representam
+- exemplo de chamada do componente/tela
+
+Veja esse exmplo:
+```
+/**
+ * Componente de modelo que cria um texto
+ *
+ * @param text       Texto principal do componente
+ * @example          <ComponentExample text={"teste"} />
+ */
+```
 
 ## Acessibilidade