Standalone Deployment

Overview

The standalone deployment runs APTIV Scrap Control as a pure frontend application without requiring a backend server. All data is stored locally in the browser’s localStorage, making it perfect for:

Quick demos and testing
Single-user installations
Offline-capable deployments
Development environments

Standalone mode stores all data in browser localStorage (~5-10 MB limit). For production environments with multiple users, consider Docker deployment.

Prerequisites

Check Node.js Version

Ensure you have Node.js 18 or higher installed:

node --version

If not installed, download from nodejs.org

Modern Web Browser

Any modern browser with JavaScript enabled:

Google Chrome 90+
Mozilla Firefox 88+
Microsoft Edge 90+
Safari 14+

Disk Space

Build time: ~500 MB (node_modules)
Runtime: ~10 MB (compiled assets)

Installation

Clone or Download the Project

git clone <repo-url>
cd aptiv-scrap-control

Install Dependencies

Install all required npm packages:

npm install

This installs the following key dependencies:

react 19.2.3 - UI framework
tailwindcss 4.1.17 - Styling
recharts 3.7.0 - Data visualization
lucide-react 0.574.0 - Icons
date-fns 4.1.0 - Date utilities
jspdf / jspdf-autotable - PDF export

Build the Application

Compile the React application for production:

npm run build

This creates an optimized build in the dist/ directory using Vite.

Serve the Application

Choose one of the following methods to serve the built files:

npx serve dist

Recommended: Use npx serve dist for the best compatibility. Direct file access may have CORS limitations.

Default Access Credentials

The standalone deployment includes pre-configured demo users for testing:

Username	Password	Role	Permissions
`admin`	`admin123`	Administrator	Full system access, user management, configuration
`calidad`	`calidad123`	Quality	View global reports, manage catalogs, audit logs
`supervisor1`	`super123`	Supervisor	View area reports, edit daily records, export data
`operador1`	`oper123`	Operator	Register scrap, view own records only

Security Notice: Change these default passwords before deploying to production. Credentials are stored in localStorage and can be managed through the admin panel.

Data Storage

localStorage Structure

Standalone mode uses browser localStorage with the following keys:

scrap_areas - Production areas catalog
scrap_catnp - Part number catalog
scrap_fallas - Failure modes catalog
scrap_turnos - Shift catalog with schedules
scrap_cadenas - Production chains
scrap_lineas - Production lines
scrap_categorias - Scrap categories
scrap_unidades - Units of measure
scrap_usuarios - System users
scrap_roles - User roles and permissions
scrap_pesaje - Scrap records (main data)
scrap_auditoria - Audit log
scrap_tolerancias - Tolerance thresholds
scrap_auth_token - Current session token

Storage Limits

Browser Storage Capacity

Chrome/Edge: ~10 MB per origin
Firefox: ~10 MB per origin
Safari: ~5 MB per origin

The system automatically monitors storage usage and warns when approaching limits.

Data Backup and Restore

Export Data

Log in as administrator
Navigate to Settings → Backup
Click Export All Data
Save the JSON file to a safe location

Import Data

Go to Settings → Backup
Click Import Data
Select your backup JSON file
Confirm the restoration

Reset Application

To start fresh with default data:

Go to Settings → Backup
Click Reset Application
Confirm - this will clear all localStorage
Refresh the page to load default data

Development Server

For active development with hot-reload:

npm run dev

This starts the Vite development server at http://localhost:5173 with:

Hot Module Replacement (HMR)
Fast refresh for React components
Source maps for debugging

Build Configuration

The build process uses Vite with the following optimizations:

// Key build settings from vite.config
{
  build: {
    outDir: 'dist',
    assetsDir: 'assets',
    minify: 'esbuild',
    sourcemap: false,
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          charts: ['recharts'],
          pdf: ['jspdf', 'jspdf-autotable']
        }
      }
    }
  }
}

Barcode Scanner Integration

Standalone mode fully supports USB barcode scanners:

Scanner Requirements

USB HID mode (keyboard emulation)
Configure to append Enter/CR after scan
No drivers required - works as keyboard input

Supported Formats

Code 128
Code 39
QR codes
DataMatrix
EAN/UPC

Auto-Detection

The system automatically detects barcode input when:

Characters arrive within less than 50ms intervals
Input ends with Enter key
Scanned value matches part number format

Upon detection, the system auto-fills:

Part number
Material description
Unit weight
Unit cost

Troubleshooting

Application Not Loading

# Verify dist folder exists
ls -la dist/

# Should contain:
# index.html, assets/, vite.svg

localStorage Full Error

// Check storage usage in browser console
console.log('Storage used:', 
  JSON.stringify(localStorage).length / (1024 * 1024) + ' MB'
);

// Clear old data if needed
localStorage.clear();
location.reload();

Solutions:

Export and archive old scrap records
Delete unnecessary audit logs
Consider migrating to Docker deployment for unlimited storage

Open browser Developer Tools (F12)
Check Console tab for JavaScript errors

Verify localStorage is enabled:

// Run in browser console
localStorage.setItem('test', '1');
localStorage.getItem('test'); // Should return '1'
localStorage.removeItem('test');

Disable browser extensions that block localStorage
Check if running in private/incognito mode (limited storage)

Data Not Persisting

Some browsers clear localStorage when:

Running in private/incognito mode
“Clear data on exit” is enabled
Storage quota is exceeded
Site data is manually cleared

Ensure:

Not in private browsing mode
Browser storage settings allow site data
Regular backups are exported

Performance Optimization

Recommended Settings

Browser Optimization

Disable extensions when using the app
Enable hardware acceleration in browser settings
Close unused tabs to free memory
Clear browser cache weekly

Large Datasets

When localStorage contains >1000 scrap records:

Archive old data: Export records older than 6 months
Paginate queries: Limit date ranges in reports
Upgrade to Docker: For unlimited database storage

Next Steps

Docker Deployment

Scale to multi-user with MySQL backend

Network Setup

Configure LAN access for multiple clients

User Management

Configure user accounts and permissions

Data Management

Import/export data and backups

Get Started

Core Features

User Management

Configuration

Deployment

Overview

Prerequisites

Installation

Default Access Credentials

Data Storage

localStorage Structure

Storage Limits

Browser Storage Capacity

Data Backup and Restore

Development Server

Build Configuration

Barcode Scanner Integration

Troubleshooting

Application Not Loading

localStorage Full Error

Data Not Persisting

Performance Optimization

Recommended Settings

Browser Optimization

Large Datasets

Next Steps

Docker Deployment

Network Setup

User Management

Data Management

Build docs developers (and LLMs) love

Get Started

Core Features

User Management

Configuration

Deployment

​Overview

​Prerequisites

​Installation

​Default Access Credentials

​Data Storage

​localStorage Structure

​Storage Limits

Browser Storage Capacity

​Data Backup and Restore

​Development Server

​Build Configuration

​Barcode Scanner Integration

​Troubleshooting

​Application Not Loading

​localStorage Full Error

​Blank Screen After Login

​Data Not Persisting

​Performance Optimization

​Recommended Settings

Browser Optimization

​Large Datasets

​Next Steps

Docker Deployment

Network Setup

User Management

Data Management

Build docs developers (and LLMs) love

Overview

Prerequisites

Installation

Default Access Credentials

Data Storage

localStorage Structure

Storage Limits

Data Backup and Restore

Development Server

Build Configuration

Barcode Scanner Integration

Troubleshooting

Application Not Loading

localStorage Full Error

Blank Screen After Login

Data Not Persisting

Performance Optimization

Recommended Settings

Large Datasets

Next Steps