Skip to content

Latest commit

 

History

History
80 lines (65 loc) · 3.06 KB

README.md

File metadata and controls

80 lines (65 loc) · 3.06 KB

Fuel Monitoring System

This project implements a Full Stack application for the Ministério de Transportes to monitor fuel collection data, including key performance indicators (KPIs) and data filtering capabilities.

Tech Stack

Component Technology Description
Backend Python (FastAPI) RESTful API for data ingestion, querying, and KPI calculation.
Database PostgreSQL 15 Persistent storage for fuel collection records.
Frontend React + TypeScript Interactive dashboard with filters, data table, and charts (Recharts).
Orchestration Docker & Docker Compose Containerization for isolated and reproducible environments.
Security/Compliance CPF Masking (LGPD) Sensitive data (CPF) is masked before being sent to the frontend.

Features

  • Data Ingestion: Endpoint to receive fuel collection records.
  • Data Query: Filterable table view of all collected data.
  • KPI Visualization:
    • Pie Chart: Total volume collected by vehicle type.
    • Line Chart: Price evolution over time.
  • Advanced UX: Debounced filters, request cancellation (AbortController), and delayed loading indicators.

Setup and Installation

Prerequisites

  • Docker and Docker Compose installed.

Steps

  1. Clone the repository:

    git clone https://github.com/gabrifgaraujo/fuel-monitoring-system.git
cd fuel-monitoring-system

  2. Start the services:

    docker compose up --build -d

    This command will build the backend and frontend images, start the db container, and wait for the database to be healthy before starting the backend.

  3. Seed the database (Optional): To populate the database with fake data for testing:

    docker compose exec backend python /script/seed.py

  4. Access the application: The frontend dashboard will be available at http://localhost:3000. The backend API documentation (Swagger UI) will be available at http://localhost:8000/docs.

Project Structure

.
├── backend/
│   ├── app/
│   │   ├── database.py       # SQLAlchemy setup
│   │   ├── models.py         # SQLAlchemy ORM model
│   │   ├── schemas.py        # Pydantic validation schemas
│   │   └── main.py           # FastAPI application, routes, and logic
│   ├── Dockerfile
│   └── requirements.txt
├── frontend/
│   ├── src/
│   │   ├── components/       # React components (Charts, Table, etc.)
│   │   ├── services/         # API service calls (axios)
│   │   ├── types/            # TypeScript interfaces
│   │   ├── utils/            # Custom hooks (useDebounce)
│   │   └── App.tsx           # Main dashboard component
│   ├── Dockerfile
│   ├── package.json
│   └── vite.config.ts
├── script/
│   └── seed.py               # Data seeding script
├── docker-compose.yml        # Service orchestration
└── README.md