Control361 🚀

Aplicação React de rastreamento de veículos com filtros e mapa integrado ao Google Maps.

---

📋 Sumário

• Control361 🚀
  • 📋 Sumário
  • 🧐 Sobre
  • ✨ Funcionalidades
  • 🛠️ Pré-requisitos
  • ⚡ Instalação
  • 🔑 Variáveis de Ambiente
  • 🧑‍💻 Desenvolvimento Local
  • 🐳 Uso com Docker
    • Dockerfile.dev (desenv)
    • Docker Compose
  • 💻 CI/CD
  • 🚀 Deploy no Vercel
  • 🗂️ Estrutura de Pastas

---

🧐 Sobre

Este repositório contém a aplicação Control361, desenvolvida em React + TypeScript, gerenciador global de estado com Zustand, formulários com React Hook Form + Zod e exibição de marcadores no mapa via Google Maps API.

---

✨ Funcionalidades

• Filtro por status (rastreados / outros).
• Busca por placa ou frota.
• Mapas interativos com pins e infowindows.
• Estado global via Zustand.
• Validação de formulários com Zod.

---

🛠️ Pré-requisitos

• Node.js >= 18
• npm >= 8
• Docker (para ambiente conteinerizado)
• Docker Compose (opcional para dev local)
• Conta no Vercel (para deploy)

---

⚡ Instalação

1. Clone o repositório:

   git clone https://github.com/GefersonLopes/control361
   cd control361

2. Instale as dependências:

   npm ci

3. Crie um arquivo .env na raiz, copiando de .env.example:

   cp .env.example .env

4. Ajuste as variáveis de ambiente conforme necessário.

---

🔑 Variáveis de Ambiente

As seguintes variáveis devem estar definidas no seu .env:

VITE_GOOGLE_MAPS_API_KEY=...   # Chave da Google Maps JavaScript API
VITE_API_CLIENT_KEY=...        # Token de autenticação do client
VITE_BASE_URL_API_CLIENT=...   # URL base da API backend
VITE_GOOGLE_MAPS_COORDINATES_URL="https://www.google.com/maps/search/?api=1&query="

Mantenha o .env fora do controle de versão!

---

🧑‍💻 Desenvolvimento Local

Execute em modo de desenvolvimento com Vite e hot-reload:

npm run dev        # serve http://localhost:5173/

Ou via Docker Compose:

docker compose up --build
#Após build, acesse http://localhost:5173

---

🐳 Uso com Docker

Dockerfile.dev (desenv)

• EXPOSE 5173
• Comando: CMD ["npm", "run", "dev"]

Docker Compose

services:
  frontend:
    build:
      context: .
      dockerfile: Dockerfile.dev
    volumes:
      - ./:/app
      - /app/node_modules
    ports:
      - "5173:5173"
    environment:
      - VITE_GOOGLE_MAPS_API_KEY=${VITE_GOOGLE_MAPS_API_KEY}
      - VITE_API_CLIENT_KEY=${VITE_API_CLIENT_KEY}
      - VITE_BASE_URL_API_CLIENT=${VITE_BASE_URL_API_CLIENT}
      - VITE_GOOGLE_MAPS_COORDINATES_URL=${VITE_GOOGLE_MAPS_COORDINATES_URL}

Para rodar:

docker compose up --build

---

💻 CI/CD

Fluxo configurado via GitHub Actions:

1. CI

   • Checkout do código
   • Setup Node.js
   • Cache npm
   • npm ci, npm run lint, npm test, npm run build
   • Upload de artefato build/

2. Docker Build & Push (on push em main)

   • Download do build
   • docker build -f Dockerfile → imagem tageada por commit SHA + latest
   • Push no Docker Hub (opcional)

3. Deploy no Vercel

   • Ação amondnet/vercel-action@v20 usando vercel.json e secrets:
     • VERCEL_TOKEN, VERCEL_ORG_ID, VERCEL_PROJECT_ID

Arquivo: .github/workflows/ci-cd.yml

---

🚀 Deploy no Vercel

O deploy utiliza Docker no Vercel, via vercel.json:

{
  "version": 2,
  "builds": [{ "src": "Dockerfile", "use": "@vercel/docker" }],
  "routes": [{ "src": "/(.*)", "dest": "/" }]
}

Defina as mesmas variáveis de ambiente no painel Vercel (Production & Preview).

---

🗂️ Estrutura de Pastas

control361/
├── .env.example
├── Dockerfile
├── Dockerfile.dev
├── docker-compose.yml
├── package.json
├── public/
└── src/
    ├── components/
    ├── hooks/
    ├── pages/
    ├── store/
    └── utils/