ScalesApp - Multi-Component Application

A distributed application consisting of three main components:

Architecture

1. Frontend (React)

• Location: /frontend
• Description: React web application that displays real-time data from the serial port
• Communicates with: Django backend via REST API
• Port: 3000 (default)

2. Backend (Django)

• Location: /backend
• Description: Django REST API server for storing and retrieving serial data
• Database: SQLite (configurable)
• Port: 8000 (default)

3. Serial Bridge (Python)

• Location: /serial_bridge
• Description: Python application that reads data from COM ports
• Features: System tray integration, runs as EXE (via PyInstaller)
• Communicates with: Django backend via REST API
• Data Flow: COM Port → Serial Bridge → Django Backend → React Frontend

Installation & Setup

Prerequisites

• Node.js 16+ (for React)
• Python 3.8+ (for Django and Serial Bridge)
• pip or conda for Python packages

Quick Start

1. Backend Setup

   cd backend
   python -m venv venv
   venv\Scripts\activate
   pip install -r requirements.txt
   python manage.py migrate
   python manage.py runserver
   

2. Frontend Setup

   cd frontend
   npm install
   npm start
   

3. Serial Bridge Setup

   cd serial_bridge
   python -m venv venv
   venv\Scripts\activate
   pip install -r requirements.txt
   python app.py
   

Data Flow

COM Port
   ↓
Serial Bridge (Python)
   ↓
Django Backend REST API
   ↓
React Frontend

Configuration

Each component has its own configuration file:

• Frontend: .env
• Backend: settings.py and .env
• Serial Bridge: config.py and .env

Development Tips

• Keep all three services running during development
• Use CORS headers properly in Django for frontend requests
• Serial Bridge should continuously read COM data and POST to backend
• Frontend should poll/subscribe to backend for updates