*This is a submission for the [GitHub Finish-Up-A-Thon Challenge]
What I Built
ErgoSafe Reborn is a modern, high-performance Occupational Health and Safety (OHS) Compliance and Interactive Training platform. Built with Vite, React, and TypeScript, the application features an interactive, real-time 3D canvas environment alongside a comprehensive administrative dashboard.
For me, this project represents the intersection of my domain expertise as an OHS Compliance Training Specialist and my work as an AI Architect. The goal was to build a tool that moves beyond passive PDF safety files, providing interactive, multi-lingual behavioral training and real-world legal accountability frameworks for enterprise businesses.
Demo
Live Web Deployment: https://ergosafe-reborn.vercel.app
Active GitHub Repository: https://www.google.com/search?q=https://github.com/tharmen666/ErgoSafe_Project
Local Workspace Verification: Running seamlessly on http://localhost:5173 with full dependency alignment.
The Comeback Story
The Comeback Story
Before reviving this workspace, the repository was a broken, incomplete frontend layer gathering code debt. It was plagued by system path script blocks, severely unstable mobile viewports, unmapped legacy configuration mjs cache dumps, and a completely empty localization module.
To bring it across the production finish line, I executed a series of critical code cleanup sprints:
Dynamic Viewport Standardisation: Replaced hardcoded viewport structures in the mobile menu system with dynamic viewport units (h-[100dvh]) to entirely eliminate layout shifting and resolution jumping caused by mobile browser address bars.
Scroll Lock Mechanics: Integrated robust React useEffect hooks across layout drawers (Sidebar.tsx and TrainingModule.tsx) to implement background scroll locks (document.body.style.overflow = 'hidden'), keeping interactions smooth during complex canvas states.
Repository Sanitation: Conducted a recursive cleanup sweep, purging unmapped script fragments (refactor-script.js), removing dynamic cache files (vite.config.ts.timestamp-*), and optimizing assets to lock in a flawless 60 FPS render path.
Enterprise Legal Engine Integration: Developed a brand-new compliance module (financePitches.ts) mapping the strict 2026 "Reasonably Practicable" home-office statutory provisions (OHS Act Section 8) and the "Right to Disconnect" CCMA liability shields tailored directly for premium financial and retail franchise networks (Standard Bank, FNB, Discovery, Sanlam, Steers, Wimpy). Operation 100% Ready: The Transformation Walkthrough
- Code Cleanup & Drawer Optimization src/components/layout/Sidebar.tsx: Added a React useEffect scroll lock to toggle document.body.style.overflow = 'hidden' when the drawer is open. Standardized height using h-[100dvh] to prevent dynamic viewport shifting on mobile address bar resizing. src/features/training/TrainingModule.tsx: Integrated React useEffect on-mount and on-unmount scroll lock to freeze background scroll, securing smooth mobile interactive dynamics during 3D avatar exercises.
- Finance Pitch & Statutory Anchor Integration src/logic/financePitches.ts (New Module): Developed standard-compliant legal summaries for OHS Act Section 8 (Reasonably Practicable home-office extension) and the 2026 Right to Disconnect framework (against constructive dismissal CCMA tethering claims). Drafted comprehensive cold email pitches and target breakdowns for Standard Bank, FNB, Discovery, and Sanlam. src/features/dashboard/ExecutiveBriefing.tsx: Integrated the Financial Pitch Sentinel section displaying legal standards and the targeted bank pitch profiles with interactive expandable email drafts. src/features/admin/AdminPortal.tsx: Added a dedicated administrative control block allowing supervisors and HR admins to review, monitor, and export the financial pitches directly to Gmail drafts.
- Repository Reconciliation & Purge Purged unmapped legacy config files vite.config.ts.timestamp-1770284278728-c7ed4b32044da.mjs and vite.config.ts.timestamp-1770972931544-b9c4578194e09.mjs. Purged redundant utility script refactor-script.js. Purged temporary video workspace folder ffmpeg_temp/. ## My Experience with GitHub Copilot GitHub Copilot acted as my elite infrastructure advisor and secondary pair programmer throughout this recovery sprint. It was an invaluable forcing function to bridge the gap between abstract design goals and clean, production-ready code. Fixing System Infrastructure: When local compilation threw deep environmental script path block errors (npm : The term 'npm' is not recognized and PowerShell execution policy roadblocks), Copilot systematically diagnosed the underlying machine requirements, guiding the installation tracking for Node.js LTS environments cleanly. Writing State Hooks: Copilot handled the inline syntax formatting for the component mounting/unmounting lifecycle states, generating clean, bug-free React hooks to enforce the useEffect body scroll restrictions without manual trial and error. Refactoring File Imports: Copilot mapped the complex module dependencies, ensuring the freshly created multi-lingual translation bundles (English, isiZulu, isiXhosa, Sesotho) linked to our interactive modules smoothly without triggering path alignment drop-offs. By combining GitHub Copilot's contextual autocomplete capabilities in VS Code with autonomous multi-agent task orchestration (Google Antigravity / Agent 007), I was able to transform a broken repository into an enterprise-ready commercial asset in a fraction of the standard development time. This challenge proved that with the right AI scaffolding, no side project is ever truly dead! <!-- Team Submissions: Please pick one member to publish the submission and credit teammates by listing their DEV usernames directly in the body of the post. -->
Top comments (0)