powertrain-defect-dashboard

An automated powertrain QA defect dashboard that replaces manual Excel reports with a full-stack web application.

Overview

• Backend: Python Flask REST API
• Frontend: React + Vite + Tailwind CSS
• Database: SQLite for local development
• ORM: SQLAlchemy
• Excel automation: OpenPyXL-based report generation
• Docs indexing: keyword tagging and upsert for engineering docs

Structure

• backend/ - Flask API, database models, routes, tests, pipeline tools
• frontend/ - React Vite dashboard UI
• data/ - Sample defect CSV records and generated reports
• docs/ - Engineering documentation files

Local development

1. Create a Python environment and install backend dependencies:

   • python -m venv .venv
   • pip install -r backend/requirements.txt

2. Start the backend API:

   • python backend/app.py

3. Install frontend dependencies and run the UI:

   • cd frontend
   • npm install
   • npm run dev

4. Open the dashboard at http://localhost:5173.

   • The frontend proxies API requests to http://localhost:5000.

Docker

Build and start both services with Docker Compose:

docker-compose up --build

• Backend: http://localhost:5000
• Frontend: http://localhost

Generated Excel reports will be stored in data/reports.

CI / GitHub Actions

The workflow at .github/workflows/deploy.yml runs on push to main and performs:

• backend unit tests with pytest
• backend Docker build
• frontend Docker build

Cloud deployment

Backend (Render.com)

1. Create a new Render Web Service.
2. Connect your GitHub repository.
3. Set the build command to:
   • pip install -r backend/requirements.txt && python backend/app.py
4. Set the start command to:
   • gunicorn -w 4 -b 0.0.0.0:5000 backend.app:app
5. Add environment variables in Render:
   • DATABASE_URL = sqlite:///data/powertrain_defects.db
   • FLASK_ENV = development
   • VITE_API_URL = https://<your-backend-url>

Frontend (Vercel)

1. Create a new Vercel project.
2. Connect your GitHub repository.
3. Set the root directory to frontend.
4. Configure build settings:
   • Build command: npm install && npm run build
   • Output directory: dist
5. Set the environment variable:
   • VITE_API_URL = https://<your-backend-url>

Uploading CSV and triggering the pipeline

1. Place your CSV file into the data/ folder.
2. Use the frontend UI to trigger the ETL pipeline via the pipeline runner button.
3. Generated reports will be saved to data/reports.

Notes

• The frontend uses relative /api paths in production so the nginx proxy can forward requests to the backend.
• The backend exposes health checks at /health and report generation at /api/reports/generate.