Sahayak 3D

• 

  Station Departure: stationary state at New Delhi platform with Signal 102 CLEAR, ready to start the journey at 0 km/h.

• 

• 

  Cruising Corridor: Express 00001 cruising smoothly at 110 km/h on schedule along the Delhi-Panipat railway mainline.

• 

  Ethical Decision Cards: ranked options with honest trade-offs across arrival time, cost, comfort rating, and confidence.

• 

  3D Disruption Resolved: track switch aligns, signal turns green, and train accelerates onto the bypass with instant Undo.

• 

  Demo Tools drawer: live disruption simulator, Lite Mode toggle, voice assistant, and multi-angle camera controls.

• 

  Family Live Share: gives loved ones instant peace of mind with verified status, coach info, and real-time battery level.

A.) Inspiration:-

1. The Problem:- Over 20 million daily passengers on Indian Railways face sudden delays with unhelpful updates like "Late by 45 mins", leaving them anxious and without clear choices.
2. The Goal:- Build a real-time 3D assistant that turns train delays into clear, transparent decisions with honest trade-offs for all passengers.

B.) What it does:-

1. Moving 3D Corridor:- Renders a continuous 3D rail line (New Delhi ➔ Panipat ➔ Ambala) with realistic train motion, signals, and stations.
2. Ethical Decision Engine:- When delays strike, it calculates transparent options showing exact time saved (e.g. Save 22 mins), comfort ratings, and zero extra cost.
3. Interactive 3D Detour & Family Share:- Lets travelers preview and take bypass tracks in 3D, and share live status and safety check-ins with family.
4. Universal Accessibility:- Features 1-click Hindi translation, Elder Mode (48px buttons, high contrast), and hands-free voice commands.

C.) How we built it:-

1. Tech Stack:- Built with Next.js 16, TypeScript, Tailwind CSS, and Zustand.
2. 3D & Audio:- Built with Three.js / React Three Fiber with decoupled physics for maximum performance, and Web Audio API for realistic train sounds.
3. Automated Testing:- Verified across 21 automated unit tests and multi-viewport accessibility audits.

D.) Challenges we ran into:-

1. High-Refresh Smoothness:- Decoupling 3D physics from React render cycles to achieve smooth 144 FPS on laptop displays.
2. Station Departure Logic:- Calibrating realistic station stop durations at Panipat without getting stuck in infinite dwell loops.

E.) Accomplishments that we're proud of:-

1. 100 / 100 Lighthouse Scores:- Perfect 100 in Accessibility, Best Practices, and SEO.
2. Zero A11y Violations:- 0 Axe-Core violations across all 17 interactive app states.
3. Top Performance:- Locked 140–144 FPS on 144 Hz laptop displays, and smooth 60 FPS Lite Mode on mobile (realme Narzo 30 5g).
4. 100% Tested:- 21/21 passing automated tests covering braking curves and decision algorithms.

F.) What we learned:-

1. Designing for accessibility and colorblind safety from Day 1 creates a better, cleaner experience for all users.
2. Separating high-frequency physics from React state is crucial for zero-lag WebGL apps.

G.) What's next for Sahayak 3D:-

1. Live GPS Data:- Connecting directly to Indian Railways open NTES feeds for live train tracking.
2. Offline Support:- Adding PWA offline caching for low-network rural rail corridors.
3. Regional Languages:- Adding Tamil, Bengali, Telugu, and Marathi voice support.

Built With

• axe-core
• lucide-react
• next.js
• playwright
• react-three-fiber
• tailwindcss
• three.js
• typescript
• web-audio-api
• web-speech-api
• zustand