Problem Statement

Ocean literacy is critically underfunded in mainstream education. Students lack engaging, interactive resources. Recognized at SIH 2024, Devpost 2025 (1st place), ISTD Innovation Showcase 2025, and awarded Copyright SW20249/2025.

Solution

Full-stack MERN platform combining Unity WebGL gamified labs, D3.js + p5.js visualizations, and Three.js 3D ocean environments. Weekly active users rose 60% after gamification launched.

Code Structure

marine-minds/ client/ components/{Labs,Visualizations,Modules} animations/ server/ routes/ controllers/ models/ middleware/ unity-builds/ docker/

Key Strategies

Gamification-first Design

Game mechanics increased weekly active users 60% in testing.

Unity WebGL Async Loading

Async iframe embeds prevent blocking React hydration.

Docker Containerization

Reduced new contributor setup time 80%, eliminated env-mismatch bugs.

MongoDB Index Optimization

Compound index on user_id+module_id cut progress query time 50%.

CI/CD with GitHub Actions

Improved iteration speed 3x, rollback time under 5 minutes.

Technical Challenges

Performance Decisions

API response -35% via optimized Express routing. MongoDB query time -50% via compound indexing. Memory -25% via $lookup optimization.

Trade-offs Made

Unity WebGL over Three.js: richer interactivity but ~15MB bundle weight. MERN over Next.js: SSR would have helped SEO in hindsight.

Lessons Learned

Performance budgets matter from day 1: Unity WebGL nearly tanked Lighthouse before lazy loading. Docker docs saved 80% of onboarding time.

Future Improvements

PWA offline mode, teacher dashboard, AR via WebXR, regional language rollout (schema ready), AI quiz generation from module content.

Security Considerations

JWT auth with role scoping (student/teacher/admin), MongoDB Atlas IP allowlist, rate limiting on quiz endpoints, 100% unauthorized access test success.

Marine Minds – Ocean Literacy Platform