Skip to content

GitLab

Last edited by Thomas Mundstock
Page history
This is an old version of this page. You can view the most recent version or browse the history.

frontend

Home Escopo Processo Design/Mockups Configuração Arquitetura Gerência Código BD Qualidade Frontend Backend Analytics

Estrutura da Aplicação Frontend em React NextJs

Tecnologias Principais

  • Angular: Framework que permite construir interfaces web com componentes reutilizáveis usando TypeScript.

Bibliotecas e Ferramentas Específicas

Padrões e Arquiteturas

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

Estrutura de Pastas

src/
│
├── app/                          # Diretório principal do aplicativo
│   ├── components/                     
│   │   └── component-x/         # Pasta para aramazenar arquivos de um componente específico
│   │       ├── component-x.component.css
│   │       ├── compoentn-x.component.html
│   │       ├── compoentn-x.component.spec.ts
│   │       └── compoentn-x.component.ts
│   ├── features/                 # Módulos específicos de funcionalidades
│   │   ├── feature-a/            # Módulo da funcionalidade A
│   │   │   ├── components/       # Componentes específicos da funcionalidade A
│   │   │   ├── pages/            # Páginas específicas da funcionalidade A
│   │   │   └── services/         # Serviços específicos da funcionalidade A
│   │   ├── feature-b/            # Módulo da funcionalidade B
│   │   │   ├── components/       # Componentes específicos da funcionalidade B
│   │   │   ├── pages/            # Páginas específicas da funcionalidade B
│   │   │   └── services/         # Serviços específicos da funcionalidade B
│   │   └── ...                   # Outros módulos de funcionalidades
│   │
│   ├── layouts/                  # Layouts de aplicação (e.g., MainLayout, AuthLayout)
│   │   ├── main-layout/          # Layout principal
│   │   └── auth-layout/          # Layout de autenticação
│   │
│   ├── assets/                   # Arquivos estáticos (imagens, fontes, etc.)
│   │   ├── images/               # Imagens do projeto
│   │   ├── fonts/                # Fontes do projeto
│   │   └── styles/               # Estilos globais (e.g., SCSS, CSS)
│   │
│   └── environments/             # Arquivos de configuração de ambiente (e.g., dev, prod)
│       ├── environment.ts        # Configurações de desenvolvimento
│       └── environment.prod.ts   # Configurações de produção
│
├── styles/                       # Estilos globais (CSS, SCSS)
│
├── index.html                    # Página HTML principal
│
├── main.ts                       # Ponto de entrada do aplicativo Angular
│
└── polyfills.ts                  # Arquivo de polyfills para compatibilidade de navegadores

Explicação da Estrutura: