Project Overview 📋
Mecha Mayhem is a 3-day-long international robotics competition seated in the heart of Calgary, Alberta. Over 200 of the top middle school, high school, and collegiate teams from around the world compete for limited spots at the VRC World Championship held in Dallas, Texas.
This project's mission is to provide an engaging centralized platform for the over 3000 comeptitors, audience members, and sponsors to access all the information they need about the event.
Event length
3 days
International competition
Scale
200+ teams
3000+ in attendance every year
Platform
Web + automations
Content, schedules, match tooling
1 / 3
Our team
Key Work 🔑
- Designed and implemented full-stack architecture and automations
- Reduced LCP by > 90% by leveraging dynamic imports, slashing bundle sizes by more than 66%
- Deployed the frontend on Vercel, backend on AWS EC2 (later Lambda), AWS S3 for media storage, and Firebase Firestore for real-time NoSQL database
- Automated match clips extraction from event livestreams using Tesseract OCR
- Prototyped a mobile app for the event using React-Native
- Platformed efforts that raised $80,000 in sponsorships annually
- UI designed in Figma
- Implemented in Next.js, using Tailwind CSS and Framer-Motion for styling and animation
- Configured Next.js middleware to proxy
/apirequests to the backend endpoint - Optimized loading performance and bundle sizes with efficient asset management, SSR, and dynamic loading