Estrutura de Diretórios do Projeto

O projeto segue uma estrutura de diretórios organizada e modular. A estrutura de diretórios é a seguinte:

Panorâma Geral

  • src: Pasta que contém todo o código React;
  • eslint.cjs: Arquivo que contém as configurações do ESLint do projeto;
  • gitignore: Arquivo que contém as extensões que devem ser ignoradas pelo Git.
  • index.html: Arquivo que contém título, metadados, indexadores e importações de fontes e do código React;
  • LICENSE: Licença de uso da aplicação;
  • package.json e pnpm-lock.yaml: Arquivos que contém informações gerais do projeto, bem como declaração dos pacotes a serem instalados e utilizados pela aplicação;
  • README.md: Leia-me do projeto;
  • tsconfig.json, tsconfig.node.json e vite.config.ts: Arquivos que contêm configurações do TypeScript e do Vite.

public

Pasta que contém todos os ativos estáticos da aplicação.

  • img: pasta que contém as imagens utilizadas no projeto.
    • logo.png: Arquivo cuja finalidade é servir de logo para o site, bem como servir de favicon para a aba do navegador.

src

Pasta que envolve a lógica da aplicação seguindo o padrão de código React.

api

Pasta que contém os métodos e arquivos com funções voltadas para realizar as requisições que consomem a API do WhyApp.

  • delete: arquivos que fazem requisições DELETE

    removeFriends.ts

  • get: arquivos que fazem requisições GET para a API.

    getGroupMessage.ts

    getMyProfileInfo.ts

    getUser.ts

    getUserGroups.ts

  • delete: arquivos que fazem requisições DELETE para a API.

    removeFriend.ts

  • post: arquivos que fazem requisições POST para a API.

    addFriend.ts

    createGroup.ts

    newFriendGroup.ts

    removeMembersGroup.ts

    sendNewGroupMessage.ts

    updateMyPassword.ts:

    updateMyProfileInfo.ts

    • api.ts: arquivo que importa todos os arquivos dentro das pastas irmãs e os exporta.

components

  • Pasta que contém os componentes do projeto e seus subcomponentes.

    SettingsMenu.tsx

    ChatsMenu.tsx

    SettingsMenu.tsxProfileMenu.tsx

    Customize.tsx

contexts:

  • Pasta que contém os contexts e providers utilizados na aplicação.

lib

  • Pasta que contém variáveis para as bibliotecas e HTTP client do projeto.
    • api.ts: Módulo que contém variável de com URL base e interceptors do Axios.
    • queryClient.ts: Módulo que contém variável do Query Client e seus parâmetros.

model

  • Pasta que contém os as Interfaces (ou Modelos) com os atributos (tipos) de cada Entidade da aplicação.

pages

  • Pasta que contém as páginas (rotas) da aplicação.
    • App:
    • ForgotPassword:
    • Login:
    • Register:
    • ResetPassword:
    • ResetPasswordCode:

routers

  • Pasta que contém as funções responsáveis pela gestão de rotas da biblioteca React-Router-Dom.

utils

  • Pasta que contém funções:
    • helpers: para cálculos de indexação de busca, conversão de data e conversão de arquivos para base64;
    • hooks: funções/hooks customizados do React, utilizados principalmente para finalidade de redução de código dentro dos componentes.

index.css

  • Arquivo de configurações globais CSS, como variáveis globais de fontes e cores, reset CSS, estilização das tags body e html, e estilos da barra de scroll.

main.tsx

  • Arquivo configuração e renderização da raíz do React.

vite-env.d.ts

  • Arquivo padrão que faz referenciação para a tipagem do vite/client

Observações

  • A estrutura de pastas pode variar dependendo das necessidades do projeto e do time de desenvolvimento.
  • Algumas pastas ou arquivos podem faltar na estrutura de pastas apresentada acima.
  • A documentação pode ser atualizada à medida que o projeto evolui e muda.
Table of Contents