arquitetura.md

@@ -11,16 +11,42 @@ Para que uma task possa ser declarada como finalizada é preciso que:
  - Não quebra nenhuma funcionalidade anteriormente desenvolvida
  - Código foi revisado e aprovado por um AGES III ou AGES IV
 
-## Diagramas
-
 ### Diagrama de Deployment
 ![alt text](./diagramas/diagramas_deploy-diagram-v0.1.jpg)
 
+## Frontend
 
-# **Entendendo o *react pattern* utilizado no front**
+### Módulos do sistema
+- **actions**
+    - description
+- **assets**
+    - Pasta com as imagens que são utilizadas na aplicação, geralmente SVGs.
+- **components**
+    - Onde ficam os componentes da aplicação. Geralmente os componentes são criados da maneira mais genérica possível, para ser reutilizado diversas vezes.
+- **pages**
+    - Onde ficam as páginas da aplicação. Elas são compostas pelos componentes e quando finalizadas significam alguma funcionalidade do app.
+- **providers**
+    - description
+- **reducers**
+    - description
+- **routes**
+    - Camada de rotas da aplicação. Definição de todas as rotas utilizando uma propriedade `path` que permite definir a rota.
+- **services**
+    - Onde ficam os serviços da aplicação como as definições para realizar chamadas ao backend.
+- **styles**
+    - Pasta com o estilo da aplicação, majoritariamente possuindo a paleta de cores.
+- **utils**
+    - Pasta com funções uteis para o sistema, geralmente é algo que é usado mais de uma vez e não é um componente.
+
+### Diagrama do Sistema
+Forma que alguns módulos comunicam entre si. Componentes são implementados de forma genérica, que juntos fromam uma tela, que pode ser chamada pelas rotas da aplicação para criar o fluxo das telas.
+![alt text](./diagramas/diagramas_sistema_front.png)
+
+
+### **Entendendo o *react pattern* utilizado no front**
 
 Esta explicação foi baseado neste excelente [artigo](https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0), sugiro ler caso queira aprofundar-se mais no assunto. Entretanto, algumas alterações foram feitas para adequar-se mais ao nosso projeto.
-## *Presentational and Container Components*
+### *Presentational and Container Components*
 
 O React fornece muitas vantagens para a reutilização de código. É possível perceber que tudo fica mais simples se você conseguir dividir os seus componentes em duas categorias: *Container* e *Presentational components*. Talvez você não conheça por esses nomes, por isso eles também podem ser chamados de *Fat & Skinny*, *Smart & Dumb, Stateful & Pure, Screens & Components*, etc. Eles não são exatamente iguais, mas a ideia principal é similar.
 
@@ -45,29 +71,10 @@ O React fornece muitas vantagens para a reutilização de código. É possível
     
 -   ***Presentational components* são essencialmente sua “palette”.** Você pode colocá-lo em uma página e mexer em todas as variações de design, sem tocar na sua lógica. Você também pode executar *screenshot regression tests* nesta página (*(to-do) estruturação dos testes*)
 
-# Módulos do sistema - Front: TO-DO
-- **actions**
-    - description
-- **assets**
-    - description
-- **components**
-    - description
-- **pages**
-    - description
-- **providers**
-    - description
-- **reducers**
-    - description
-- **routes**
-    - description
-- **services**
-    - description
-- **styles**
-    - description
-- **utils**
-    - description
 
 
+## Backend
+
 
 
 ## Esta é a página onde irá ficar todas as informações da Arquitetura do seu projeto, Como: