Merge pull request #2 from pedrosilvaadev/feature/dashboard-frontend

Feature/dashboard frontend

Author: Benevanio

.gitignore

@@ -2,7 +2,7 @@
 .DS_Store
 .env
 .vscode/
+/output/
 npm-debug.log
 yarn-error.log
-yarn-debug.log
-package-lock.json
+yarn-debug.log

README.md

@@ -35,6 +35,67 @@ Bot de automacao para buscar vagas no LinkedIn com foco em Brasil remoto e expor
 - Desenvolvimento: `npm run dev`
 - Hot reload: `npm run run`
 
+## Painel Frontend (React + Vite + Tailwind + shadcn)
+
+Foi adicionada uma interface web para visualizar as vagas do arquivo Excel gerado em `output`.
+
+### Como iniciar
+
+1. Gere/atualize o arquivo Excel normalmente com o scraper
+2. Suba a API que le o arquivo mais recente da pasta `output`:
+
+```bash
+npm run api
+```
+
+3. Em outro terminal, suba o frontend:
+
+```bash
+npm run frontend:dev
+```
+
+4. Abra no navegador:
+
+```text
+http://localhost:5173
+```
+
+### Scripts adicionados
+
+- `npm run api`: inicia API em `http://localhost:3001`
+- `npm run frontend:dev`: inicia Vite em modo desenvolvimento
+- `npm run frontend:build`: gera build de producao do frontend
+- `npm run frontend:preview`: serve build do frontend localmente
+
+### Endpoints da API
+
+- `GET /api/health`: health check
+- `GET /api/jobs/files`: lista arquivos `.xlsx` encontrados em `output`
+- `GET /api/jobs`: retorna vagas do arquivo mais recente
+- `GET /api/jobs?file=nome.xlsx`: retorna vagas de um arquivo especifico
+
+## Docker (servicos separados)
+
+Agora o Docker foi separado em 3 servicos:
+
+- `api`: backend HTTP para leitura do XLSX
+- `frontend`: dashboard React/Vite
+- `scraper`: execucao do scraping (nao sobe por padrao)
+
+### Subir dashboard + API (sem scraping automatico)
+
+```bash
+docker compose up --build
+```
+
+### Executar scraping manualmente
+
+```bash
+docker compose --profile scraper run --rm scraper
+```
+
+Com isso, `docker compose up` nao dispara mais a coleta automaticamente.
+
 ## Fluxo de branches (obrigatorio)
 
 Este repositorio usa o seguinte fluxo:

docker-compose.yml

@@ -1,11 +1,43 @@
 services:
-  vagas-scraper:
+  api:
     build:
       context: .
       dockerfile: Dockerfile
-    container_name: vagas-full
+    container_name: vagas-api
+    command: ["node", "src/server.js"]
+    env_file:
+      - .env
+    environment:
+      - PORT=3001
+    volumes:
+      - ./output:/app/output
+    ports:
+      - "3001:3001"
+    restart: unless-stopped
+
+  frontend:
+    build:
+      context: .
+      dockerfile: frontend/Dockerfile
+    container_name: vagas-frontend
+    environment:
+      - VITE_API_PROXY_TARGET=http://api:3001
+    ports:
+      - "5173:5173"
+    depends_on:
+      - api
+    restart: unless-stopped
+
+  scraper:
+    build:
+      context: .
+      dockerfile: Dockerfile
+    container_name: vagas-scraper
+    command: ["node", "index.js"]
     env_file:
       - .env
     volumes:
       - ./output:/app/output
     restart: "no"
+    profiles:
+      - scraper

frontend/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

frontend/Dockerfile

@@ -0,0 +1,12 @@
+FROM node:24-alpine
+
+WORKDIR /app
+
+COPY frontend/package*.json ./
+RUN npm ci
+
+COPY frontend .
+
+EXPOSE 5173
+
+CMD ["npm", "run", "dev", "--", "--host", "0.0.0.0", "--port", "5173"]

frontend/README.md

@@ -0,0 +1,16 @@
+# React + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Oxc](https://oxc.rs)
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/)
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend using TypeScript with type-aware lint rules enabled. Check out the [TS template](https://github.com/vitejs/vite/tree/main/packages/create-vite/template-react-ts) for information on how to integrate TypeScript and [`typescript-eslint`](https://typescript-eslint.io) in your project.

frontend/eslint.config.js

@@ -0,0 +1,33 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      ...tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    rules: {
+      'no-unused-vars': 'off',
+      '@typescript-eslint/no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
+      'react-refresh/only-export-components': 'off',
+    },
+  },
+])

frontend/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>frontend</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>