Aplicação	Serviço	Badge e Acesso
Backend API	Render
Frontend App	Vercel

Se for exibido erro ao obter os dados, aguarde alguns segundos antes de atualizar. Isso acontece porque o backend sleep pausa temporariamente o processamento do servidor depois de 15 minutos de inatividade.

• Sobre o Projeto
• 🎯 Objetivo
• ✨ Funcionalidades
• 🌐 Tech Stack
• 🔄 Fluxo de Trabalho do Projeto
• 🗄️ Schema do Banco de Dados
• 🔀 Endpoints da API
• 🚀 Começando
  • Pré-requisitos
  • Instalação e Execução Automática
  • Instalação e Execução Manual
• 🛠️ Scripts do projeto
• 📂 Estrutura de Pastas
• 🖼 Demonstração

Este repositório contém uma solução full-stack completa para processar, armazenar, servir e visualizar dados de configuração de redes GPON. A aplicação é estruturada como um monorepo, dividido em três componentes principais: um parser de arquivos, uma API backend e uma interface frontend. O repositório possui duas branches principais, cada uma refletindo uma etapa e abordagem técnica diferente:

• main: Voltada para um ambiente mais direto e performático (oferece maior controle sobre as queries SQL).

  • Backend: usa a biblioteca pg (node-postgres) para comunicação com o banco.
    Essa abordagem oferece maior controle sobre as queries SQL, ideal para otimizações manuais ou cenários onde o desempenho é essencial.

• developer: Pensada para evolução e escalabilidade do projeto.

  • Backend: utiliza o Prisma ORM, trazendo: Abstração das queries SQL e Sistema de migrações simples e seguro.
  • Frontend: usa o TanStack Router, que mantém o estado dos filtros da tabela diretamente na URL — permitindo compartilhar links com filtros aplicados e uma navegação mais previsível.

O objetivo principal é unificar e apresentar de forma clara e interativa os dados de equipamentos de rede GPON de diferentes fabricantes (Huawei e ZTE), que originalmente se encontram em arquivos de texto (.txt) com formatos distintos. A solução transforma esses dados brutos em informações estruturadas e acessíveis através de uma aplicação web.

• Parser de Dados: Scripts dedicados para ler arquivos de texto dos fabricantes Huawei e ZTE, extrair as informações relevantes e convertê-las para um formato CSV unificado.
• Backend API:
  • Serve os dados GPON através de uma API RESTful robusta.
  • Oferece endpoints para listagem, busca com filtro dinâmico e exclusão de registros.
  • Documentação automática da API com Swagger UI.
  • Popula (seeding) o banco de dados automaticamente a partir do arquivo CSV gerado pelo parser.
• Frontend UI:
  • Apresenta os dados em uma tabela clara e organizada.
  • Permite a filtragem dinâmica dos dados em tempo real.
  • Implementa paginação para lidar com grandes volumes de registros.
  • Design responsivo e moderno utilizando Tailwind CSS.

Área	Tecnologia
Backend
Frontend
Parser

O diagrama abaixo ilustra o fluxo completo de dados, desde os arquivos de entrada até a visualização no navegador.

graph TD
    %% --- Entrada de arquivos ---
    subgraph Input_Arquivos_de_Dados_Brutos["Input: Arquivos de Dados Brutos"]
        direction LR
        F1["OntInfo - Huawei.txt"]
        F2["OntInfo - ZTE - SNs.txt"]
        F3["OntInfo - ZTE - SNs - State.txt"]
    end

    %% --- Parser ---
    subgraph Passo1_Parser["Passo 1: Parser"]
        direction TB
        P["parser scripts<br>(Node.js)"]
    end

    %% --- Saída intermediária ---
    subgraph Output_Intermediario["Output Intermediário"]
        direction TB
        CSV["backend/infra/OntInfo.csv<br>Formato Unificado"]
    end

    %% --- Backend ---
    subgraph Passo2_Backend["Passo 2: Backend - Fastify API"]
        direction TB
        DOCKER["1. npm run services:up<br>Inicia container PostgreSQL"]
        DEV["2. npm run dev<br>Inicia o servidor Fastify"]
        SEED["3. Seeding Automático<br>Popula o DB a partir do CSV"]
        API["4. API Pronta<br>localhost:3333"]
        DOCKER --> DEV --> SEED --> API
    end

    %% --- Frontend ---
    subgraph Passo3_Frontend["Passo 3: Frontend - React App"]
        direction TB
        FE_DEV["npm run dev<br>Servidor Vite em localhost:5173"]
        FETCH["Componentes React (useFetch)<br>Consomem a API do Backend"]
        UI["Interface do Usuário<br>Tabela com filtros"]
        FE_DEV --> FETCH --> UI
    end

    %% --- Fluxo principal ---
    F1 --> P
    F2 --> P
    F3 --> P
    P --> CSV
    CSV --> SEED
    API --> FETCH

Os dados são persistidos em uma única tabela no PostgreSQL, gerenciada pelo Prisma. A estrutura é a seguinte:

Tabela: ont_info

A API do backend oferece os seguintes endpoints (a documentação completa e interativa via Swagger está disponível em http://localhost:3333/docs quando o servidor está no ar):

Siga estas instruções para configurar e executar o projeto em seu ambiente local.

• Node.js: Versão 20.x ou superior.
• Docker e Docker Compose: Necessários para executar o banco de dados PostgreSQL.

   git clone https://github.com/wellington-tinho/gpon-data-parser.git
   cd gpon-data-parser
   npm install
   npm run start:all

Espere iniciar o frontend e o backend

Para uma experiência completa, você precisará de 2 terminais abertos, (só execulte o terminal 2 após todos os passos do terminal 1, estiverem concluidos)

1. Terminal 1: Execultar o script de parse e instalação

   npm run parser
   npm run install:backend
   npm run install:front
   npm run services:up
   npm run dev:backend

   Será criado o arquivo.csv, instalado as dependências do projeto, iniciado o container do postgre e o servidor backend na rota: http://localhost:3333.

2. Terminal 2: Iniciar o Servidor Frontend

   npm run dev:frontend

   A aplicação React estará disponível em http://localhost:5173.

O frontend espera que a API do backend esteja rodando em http://localhost:3333/. Isso é configurado no arquivo frontend/.env.development. Se você precisar alterar a porta do backend, lembre-se de ajustar este arquivo.

• npm run install:backend: Instala apenas as dependências do backend localizadas em backend/.
• npm run install:frontend: Instala apenas as dependências do frontend localizadas em frontend/.
• npm run dev:backend: Executa apenas o servidor backend (Fastify + Prisma).
• npm run dev:frontend: Executa apenas o servidor frontend (Vite + React).
• npm run parser: Executa o parser de dados, responsável por gerar o arquivo OntInfo.csv usado pelo backend.
• npm run services:up: Sobe os containers Docker (PostgreSQL) definidos em backend/infra/compose.yaml.
• npm run services:down: Encerra e remove os containers Docker e seus volumes associados.
• npm run services:psql: Acessa o banco PostgreSQL dentro do container via terminal interativo (psql).
• npm run install:all: Instala as dependências e inicia simultaneamente o backend e o frontend usando concurrently.
• npm run start:all: Executa todo o fluxo automaticamente:
  • Roda o parser
  • Sobe o banco com Docker
  • Instala e inicia backend e frontend
  • Ao final, todos os serviços estarão rodando.

gpon-data-parser
├── backend/                # Contém a API e a lógica de negócio
│   ├── infra/              # Configuração de infraestrutura (Docker, DB client)
│   ├── prisma/             # Schema e migrações do banco de dados
│   ├── src/                # Código-fonte da API
│   │   ├── routes/         # Definição dos endpoints da API
│   │   ├── schemas/        # Schemas de validação (Zod)
│   │   ├── service/        # Lógica de negócio
│   │   ├── startup/        # Scripts de inicialização (seeding)
│   │   └── server.ts       # Ponto de entrada do servidor Fastify
│   └── package.json
├── frontend/               # Contém a aplicação React
│   ├── src/
│   │   ├── components/     # Componentes React reutilizáveis
│   │   ├── hooks/          # Hooks customizados (ex: useFetch)
│   │   ├── routes/         # Configuração de rotas (TanStack Router)
│   │   ├── services/       # Configuração do cliente API (Axios)
│   │   └── App.tsx         # Componente principal da aplicação
│   └── package.json
├── parser/                 # Scripts para parsear os arquivos de dados
│   ├── utils/
│   └── index.ts            # Ponto de entrada do parser
└── README.md               # Este arquivo