Skip to content

GitLab

  • Menu
Projects Groups Snippets
    • Loading...
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in
  • W Wiki
  • Project information
    • Project information
    • Activity
    • Labels
    • Planning hierarchy
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 1
    • Issues 1
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 0
    • Merge requests 0
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Monitor
    • Monitor
    • Incidents
  • Packages & Registries
    • Packages & Registries
    • Package Registry
    • Infrastructure Registry
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • Sistema de Gerenciamento de projetos - TCE
  • Wiki
  • Wiki
  • frontend

Last edited by Thomas Mundstock Sep 18, 2024
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
|   | 
│   ├── modules/                  # Pasta em que se localiza os módulos criados
|   |
│   ├── 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:

Clone repository
  • Termo de Abertura
  • backend
  • configuração
  • design_mockups
  • frontend
  • Home
  • processo