Arquitetura.md

@@ -30,7 +30,7 @@ Esta seção é dedicada a apresentar a arquitetura definida para o projeto. <br
 
 ## ⚙ Backend
 
-Com base nos princípios de *Clean Architecture*[1], estruturamos um projeto *backend* utilizando a seguinte Stack:
+Com base nos princípios de *Clean Architecture*[1], estruturamos um projeto *Backend* utilizando a seguinte Stack:
 
 ![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white)
 ![Express.js](https://img.shields.io/badge/express.js-%23404d59.svg?style=for-the-badge&logo=express&logoColor=%2361DAFB)
@@ -62,6 +62,30 @@ Link para o Repositório: [Backend](https://tools.ages.pucrs.br/planline/backend
 
 ## 📱 Frontend Mobile
 
+Com base nos princípios de *Clean Architecture*[1], estruturamos um projeto *Mobile* utilizando a seguinte Stack:
+
+![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)
+![Expo](https://img.shields.io/badge/expo-1C1E24?style=for-the-badge&logo=expo&logoColor=#D04A37)
+![REACT](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)
+![Tailwindcss](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white)
+
+Do qual possui uma arquitetura em camadas, das quais são caracterizadas pelos seguintes diretórios:
+
+### Components
+
+Descrevem elementos visuais independentes, os quais possuem uma lógica descrita internamente, em cada componente. Também há componentes que se utilizam de outros componentes, tornando-se um componente de maior complexidade. Os componentes asseguram que o código seja desacoplado, flexível, reutilizável, e de fácil manutenção. Atualmente, é usual organizá-los em uma página para a estruturação dela.
+
+### Hooks
+
+Assim como *Components*, os *Hooks* permitem reunir diversas lógicas para um único código, proporcionando características idênticas aos *Components*, ou seja, código desacoplado, flexível, reutilizável, e de fácil manutenção.
+
+### Pages
+
+São as telas da aplicação. Onde reunimos os *Components* e *Hooks* a fim de organizar os módulos do sistema na página.
+
+### Services
+
+É a camada responsável por dispor serviços para a aplicação. Dentre eles, estão as funcionalidades do Firebase.
 
 
 Link para o Repositório: [Mobile](https://tools.ages.pucrs.br/planline/mobile)
@@ -70,6 +94,39 @@ Link para o Repositório: [Mobile](https://tools.ages.pucrs.br/planline/mobile)
 
 ## 💻 Frontend Web
 
+Com base nos princípios de *Clean Architecture*[1], estruturamos um projeto *Web* utilizando a seguinte Stack:
+
+![TypeScript](https://img.shields.io/badge/TypeScript-007ACC?style=for-the-badge&logo=typescript&logoColor=white)
+![Vite](https://img.shields.io/badge/vite-%23646CFF.svg?style=for-the-badge&logo=vite&logoColor=white)
+![REACT](https://img.shields.io/badge/React-20232A?style=for-the-badge&logo=react&logoColor=61DAFB)
+![Tailwindcss](https://img.shields.io/badge/Tailwind_CSS-38B2AC?style=for-the-badge&logo=tailwind-css&logoColor=white)
+
+Do qual possui uma arquitetura em camadas, das quais são caracterizadas pelas seguintes pastas:
+
+### Components
+
+Descrevem elementos visuais independentes, os quais possuem uma lógica descrita internamente, em cada componente. Também há componentes que se utilizam de outros componentes, tornando-se um componente de maior complexidade. Os componentes asseguram que o código seja desacoplado, flexível, reutilizável, e de fácil manutenção. Atualmente, é usual organizá-los em uma página para a estruturação dela.
+
+### Contexts
+
+Permite estrututrar os dados da aplicação e facilitar o uso para as demais camadas. De maneira geral, ele torna "global" o acesso aos dados, 
+
+
+### Hooks
+
+Assim como *Components*, os *Hooks* permitem reunir diversas lógicas para um único código, proporcionando características idênticas aos *Components*, ou seja, código desacoplado, flexível, reutilizável, e de fácil manutenção.
+
+### Pages
+
+São as telas da aplicação. Onde reunimos os *Components* e *Hooks* a fim de organizar os módulos do sistema na página.
+
+### Services
+
+É a camada responsável por dispor serviços para a aplicação. Dentre eles, estão as funcionalidades do Firebase.
+
+### Types
+
+Descrevem as entidades da aplicação, que descrevem a lógica de negócio do sistema.
 
 
 Link para o Repositório: [Web](https://tools.ages.pucrs.br/planline/web)