Skip to content

High-performance industrial landing page for the ForgeGrid production intelligence system. Built with vanilla JavaScript and Tailwind CSS. Deployed on GitHub Pages.

License

Notifications You must be signed in to change notification settings

NetBr3ak/forge-page

ForgeGrid | Autonomous Production Intelligence

Project Status License Tech Stack Response Time ROI

⚑ Technical Executive Summary

ForgeGrid is a real-time production intelligence system created for Hackathon dla MaΕ‚opolski 2025 (Project FailSafe). The platform monitors 8 industrial machines and automatically manages task scheduling using the proprietary ForgeFlowβ„’ MCT-S (Minimum Completion Time with Setup Awareness) algorithm.

🎯 Key Performance Metrics

Metric Value Context
Response Time <200ms From failure detection to new schedule generation
Loss Reduction 93% Compared to manual planning
Annual ROI $4,032,000 At 10 incidents/month
Savings per Incident $33,600 28 minutes Γ— $72k/hour
Machines Monitored 8 5Γ— CNC, 2Γ— Assembly, 1Γ— Test
Task Types 12 Various production operations
Throughput 500+ tasks/h Under optimal conditions
Memory Footprint ~50KB Per 100 active tasks

🏭 Machine Fleet

ID Machine Type Operations
M1 Haas VF-2 CNC milling, drilling, threading, boring, facing, chamfering
M2 DMG MORI CNC milling, drilling, threading, boring, facing, chamfering
M5 Mazak CNC milling, drilling, threading, boring, facing, chamfering
M6 Okuma CNC milling, drilling, threading, boring, facing, chamfering
M8 Haas VF-4 CNC milling, drilling, threading, boring, facing, chamfering
M3 Kuka Robot Assembly assembly, welding, wiring
M7 Fanuc Robot Assembly assembly, welding, wiring
M4 EOL Station Test testing, calibration, packaging

πŸ”— Links:


🧠 ForgeFlowβ„’ MCT-S Algorithm

MCT-S = Minimum Completion Time with Setup Awareness

Theoretical Foundations

  • Johnson's Rule - Optimal sequencing for 2-machine flow shop
  • List Scheduling - Priority-based greedy assignment
  • Work Stealing - Dynamic load balancing from parallel computing
  • Bin Packing - LPT heuristic for makespan minimization

4-Phase Pipeline

  1. Task Sorting: Priority β†’ Constraint Tightness β†’ Longest Processing Time (LPT)
  2. Machine Scoring: Score = (ETA Γ— priorityWeight) + setupPenalty + transportTime - preferenceBonus
  3. Optimal Allocation: Select machine with lowest score, tie-breaker: prefer no setup change
  4. Work Stealing: Idle machines scan busy queues for compatible tasks with positive benefit

Algorithm Parameters

Parameter Value Purpose
TRANSPORT_TIME 5 min Inter-station transfer overhead
SETUP_TIME 3 min Changeover penalty (different task type)
BATCH_WINDOW 5 Tasks analyzed simultaneously
REFRESH_RATE 300ms System tick interval

Performance Metrics

Metric Value
Scheduling Latency <200ms
Rebalancing Time <500ms
Work Steal Rate ~15%
Setup Optimization ~40% reduction

πŸ—οΈ Architectural Decisions

1. Zero-Dependency Vanilla JavaScript (IIFE Pattern)

  • Decision: We rejected heavy frameworks (React/Vue) in favor of pure Vanilla JS wrapped in an Immediately Invoked Function Expression (IIFE).
  • Why:
    • Performance: Eliminates bundle overhead. The entire JS payload is <5KB gzipped.
    • Encapsulation: The IIFE pattern creates a private scope, preventing global namespace pollution.
    • Maintainability: Clear separation of concerns without build step complexity.

2. Utility-First CSS (Tailwind via CDN + Custom Config)

  • Decision: Utilized Tailwind CSS with a custom tailwind-config.js script.
  • Why:
    • Rapid Prototyping: Immediate iteration on the "Industrial Cyber" aesthetic.
    • Consistency: Custom configuration enforces the strict color palette and typography.
    • Performance: GPU-optimized animations ensuring 60fps scrolling.

3. Semantic HTML5 & Accessibility (WCAG 2.1)

  • Decision: Strict adherence to semantic markup and ARIA standards.
  • Why:
    • Inclusivity: "Skip to content" links, proper aria-label, and heading hierarchy.
    • SEO: Semantic tags provide clear content structure for search engines.
    • Internationalization: Separate entry points with correct hreflang tags.

4. Performance Optimization Strategy

  • Resource Loading:
    • Preload: Critical assets preloaded to minimize LCP.
    • Lazy Loading: Off-screen elements use IntersectionObserver.
    • Network Awareness: Video autoplay respects user data saver preferences.
  • Rendering:
    • CSS Variables: Dynamic theming with minimal repaint cost.
    • Compositor-Only Animations: Restricted to transform and opacity.

πŸ› οΈ Project Structure

.
β”œβ”€β”€ assets/
β”‚   β”œβ”€β”€ css/
β”‚   β”‚   └── styles.css        # Global styles, animations, and overrides
β”‚   β”œβ”€β”€ js/
β”‚   β”‚   β”œβ”€β”€ app.js            # Core logic (Modals, Video handling, Scroll spy)
β”‚   β”‚   └── tailwind-config.js # Design system configuration (Colors, Fonts)
β”‚   β”œβ”€β”€ images/               # Optimized raster assets & QR codes
β”‚   └── videos/               # Compressed video assets
β”œβ”€β”€ index.html                # English entry point (EN) - Default
β”œβ”€β”€ pl.html                   # Polish entry point (PL)
β”œβ”€β”€ 404.html                  # Custom error page
β”œβ”€β”€ robots.txt                # Crawler directives
β”œβ”€β”€ sitemap.xml               # SEO sitemap
└── README.md                 # Technical documentation

πŸš€ Deployment & CI/CD

Hosted on GitHub Pages with global CDN for low-latency delivery.

  • Cache Policy: Aggressive caching headers.
  • HTTPS: Enforced for security and HTTP/2 support.

πŸ“ˆ Business Case (ELPLC Validation Data)

The landing page communicates ForgeGrid's validated value proposition:

Production Context

  • Partner: ELPLC (industrial validation partner)
  • Throughput: 600 units/hour
  • Unit Value: $120
  • Hourly Revenue: $72,000

Cost Comparison

Method Response Time Cost per Incident
Manual Planning 30 min $36,000
ForgeGrid 2 min $2,400
Savings 28 min $33,600

ROI Calculation

Savings per incident:     $33,600
Incidents per month:      10
Monthly savings:          $336,000
Annual savings:           $4,032,000

πŸ› οΈ Application Tech Stack

Layer Technology Version Purpose
Frontend React 19 UI Framework
Language TypeScript 5.x Type Safety
State Zustand 5.x Lightweight State Management
Styling Tailwind CSS 4.x Utility-First CSS
Animations Framer Motion 11.x Smooth Transitions
Charts Recharts 2.x Data Visualization
Export ExcelJS 4.x Professional Reports
Build Vite 6.x Fast Build Tool

πŸ† Hackathon dla MaΕ‚opolski 2025

Projekt FailSafe - Real-Time Production Intelligence System

Team Members

Person Role
Szymon JΔ™dryczko Machine Learning Engineer
Agata Syc Chief Operating Officer
Dominik KamiΕ„ski Software Developer
Franciszek GΕ‚Δ…b Security Engineer
RafaΕ‚ Tomaszewski QA Engineer
Mateusz Pawlik Technical Support

Β© 2025 ForgeGrid Systems. Engineered for resilience.

About

High-performance industrial landing page for the ForgeGrid production intelligence system. Built with vanilla JavaScript and Tailwind CSS. Deployed on GitHub Pages.

Topics

Resources

License

Code of conduct

Contributing

Security policy

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •