Estrutura da Aplicação Frontend em React NextJs

Tecnologias Principais

• React: Biblioteca JavaScript para construir interfaces de usuário.
• Next.js: Framework para React que permite renderização no lado do servidor (SSR) e otimização de desempenho.
• JavaScript/TypeScript: Linguagens de programação para escrever a lógica da aplicação.

Bibliotecas e Ferramentas Específicas

• Axios: Biblioteca para fazer requisições HTTP.
• Keycloak: Sistema de gerenciamento de identidade e acesso para autenticação e autorização.
• React Router (se necessário em Next.js): Biblioteca para roteamento em aplicações React.

Padrões e Arquiteturas

• Arquitetura Limpa: Princípios para estruturar aplicações de forma a separar claramente as preocupações.

Estrutura de Pastas

/src
  /core
    /domain
      - User.js
      - Doctor.js
      - Administrator.js
      - ...
    /useCases
      /common
        - LoginUseCase.js
        - ...
      /doctor
        - ViewPatientRecordsUseCase.js
        - ...
      /administrator
        - ManageDoctorsUseCase.js
        - ...
  /adapters
    /presenter
      - DoctorPresenter.js
      - AdminPresenter.js
      - ...
    /repository
      - UserRepository.js
      - DoctorRepository.js
      - AdminRepository.js
      - ...
  /frameworks
    /ui
      /components
        - LoginForm.jsx
        - ...
      /pages
        - LandingPage.jsx
        /doctor
          - DoctorDashboardPage.jsx
          - ...
        /administrator
          - AdminDashboardPage.jsx
          - ...
    /services
      - AuthService.js
      - DoctorService.js
      - AdminService.js
      - ...
  /utils
    - AuthUtils.js
    - ...

Explicação da Estrutura:

• core/domain: Contém as entidades principais da sua aplicação, como usuários, médicos e administradores.

• core/useCases: Divide a lógica de negócios em casos de uso comuns (como login) e específicos para cada tipo de usuário (médico e administrador).

• adapters/presenter: Inclui os "presenters" que adaptam os dados da camada de caso de uso para a camada de interface do usuário, mantendo a separação entre a lógica de negócios e a apresentação.

• adapters/repository: Contém os repositórios que abstraem a comunicação com fontes de dados externas, como APIs ou bancos de dados. Eles são usados pelos casos de uso para acessar e manipular dados.

• frameworks/ui: Organiza os componentes e páginas da interface do usuário, incluindo a página de destino (landing page) e as páginas específicas para médicos e administradores.

• frameworks/services: Contém serviços que encapsulam a lógica de comunicação com APIs externas, como o serviço de autenticação e os serviços específicos para médicos e administradores.

• utils: Contém funções utilitárias, como aquelas relacionadas à autenticação e à verificação do tipo de usuário.

Fluxo de Autenticação e Redirecionamento:

• LandingPage.jsx: Apresenta o formulário de login e utiliza o AuthService.js para autenticar o usuário via Keycloak.

• AuthService.js: Comunica-se com o Keycloak para autenticar o usuário e determinar seu tipo (médico ou administrador).

• AuthUtils.js: Contém funções para verificar o tipo de usuário e realizar o redirecionamento apropriado para a página de dashboard do médico (DoctorDashboardPage.jsx) ou do administrador (AdminDashboardPage.jsx).

• DoctorDashboardPage.jsx e AdminDashboardPage.jsx: São as páginas principais para médicos e administradores, respectivamente, e utilizam os casos de uso e serviços relevantes para buscar e exibir informações específicas para cada tipo de usuário.