PontuaFlow Web

Aplicação web para controle e pontuação de desenvolvedores em projetos (UI + servidor de renderização com EJS).

Sobre   •   Instalação   •   Integração   •   Autor  

---

Sobre o projeto

O PontuaFlow Web é a interface web do sistema PontuaFlow. Serve como UI e camada de renderização (EJS) para gerenciar projetos, semanas, desenvolvedores, tarefas e métricas de pontuação (gamification).

O backend de persistência e API pode ser a PontuaFlow API (.NET) ou outra API compatível; o frontend consome essa API através da variável API_URL presente no arquivo de ambiente.

Principais funcionalidades

• Listagem e criação de Projetos
• Cadastro de Desenvolvedores (Devs)
• Registro de Tarefas por Semana
• Visualização de Métricas e Ranking por projeto
• Modal para criação rápida e navegação centralizada via layout

Tecnologias utilizadas

Voltar para o início ↺

Estrutura do projeto

PontuaFlowWeb/
├── public/               # Arquivos estáticos públicos servidos pela aplicação
│   ├── fonts/
│   └── images/
├── src/
│   ├── app.controller.ts # Controlador principal responsável pela renderização das páginas
│   ├── app.module.ts     # Módulo raiz com a configuração da aplicação
│   ├── api-proxy.controller.ts # Proxy HTTP para encaminhar ações para a API principal
│   └── main.ts           # Ponto de entrada da aplicação web
├── views/
│   ├── layouts/          # Layout base compartilhado entre as páginas
│   │   └── layout.ejs    # Estrutura principal com header, conteúdo e scripts globais
│   ├── pages/            # Páginas da interface web
│   │   ├── devs.ejs
│   │   ├── home.ejs
│   │   ├── metrics.ejs
│   │   ├── projects.ejs
│   │   ├── settings.ejs
│   │   └── tasks.ejs
│   └── partials/         # Partes reutilizáveis do layout
│       ├── footer.ejs
│       ├── header.ejs
│       └── navbar.ejs
├── README.md
├── package.json
├── nest-cli.json
└── tsconfig.json

Voltar para o início ↺

Instalação

Iniciando o projeto

Important

Certifique-se de ter os seguintes requisitos antes de iniciar:

1. Instale dependências

npm install

2. Crie um arquivo .env baseado em .env.example e configure API_URL apontando para a sua API (ex: http://localhost:5003).

3. Execute em modo de desenvolvimento

npx ts-node src/main.ts
# ou 
npm start

Note

O comando npm start foi modificado para usar o mesmo fluxo de npx ts-node src/main.ts, abrindo o projeto em modo local por padrão, em http://localhost:3000.

Voltar para o início ↺

Guia de Integração

O frontend comunica-se com a API através da variável API_URL (exposta no servidor via variáveis de ambiente para uso em scripts). Fluxo típico:

1. Subir a PontuaFlow API (ex: .NET 8) ou sua implementação preferida.
2. Ajustar API_URL em .env para apontar para a API (ex: API_URL=http://localhost:5003).
3. Formular chamadas fetch/axios do frontend para API_URL nos pontos necessários (criar projetos, devs, tarefas, etc.).

Exemplo com fetch:

fetch(`${API_URL}/devs`, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify({ name: 'Maria', projectId })
});

Important

• Habilite CORS na API para permitir requisições do http://localhost:3000 (se API estiver em domínio/porta diferentes).
• O layout centraliza header, navbar, título e breadcrumb — as páginas só devem prover o corpo do conteúdo.
• Se a listagem inicial não aparecer, valide o endpoint GET /projects da API em http://localhost:5003/projects.

Voltar para o início ↺

Autor

Júlio Cézar | Juletopi	LinkedIn — Júlio Cézar P. Camargo Email — juliocezarpvh@hotmail.com Facebook — facebook.com/juhletopi Instagram — @juletopi
Portfolio — juletopi.github.io/JCPC_Portfolio

Voltar para o início ↺

---

Feito com ❤️ e ☕ por Juletopi.