Introduction
Ace Battle Run is a real-world web application built for Ace Battle Entertainment, a UK-based company that organizes competitive running events nationwide. As team leader, I oversaw the project from planning through launch, crafting the frontends in Next.js with Tailwind, developing core backend services in PHP Laravel, and integrating live timing data from the RaceResult system. My hands-on contributions spanned frontend interface design and backend API development—ensuring the platform is both powerful for organizers and intuitive for athletes and fans.
Tools
- Next.js – React framework for server-side rendering, fast routing, and SEO.
- Tailwind CSS – utility-first styling for responsive, maintainable layouts.
- PHP Laravel – robust MVC backend, RESTful API endpoints, authentication, and queue jobs.
- RaceResult Timing API – real-time import of chip times directly from finish-line hardware.
Features
Event Creation & Management
- Organizers’ Portal: Create and update races with date, venue, distance, entry limits, and pricing.
- Automated Notifications: Laravel scheduled jobs send reminders to participants 24 hours before race day.
- Dynamic Public Pages: Any change in race details instantly propagates to the public-facing event pages.
Role-Based Dashboards
- Athlete Dashboard:
- Upcoming races list with countdown timers.
- Personal bests and past results.
- Invitations from coaches, club managers and team leaders
- Coach Dashboard:
- Team management: invite athletes, assign roles (starter/reserve), and bulk-register the squad.
- Invitation management
- Club Manager:
- Club Management: invite atheltes and coaches, register teams for event
- Team Leader:
- Manage Regional Community
Live Results & Rankings
- Chip Timing Integration: RaceResult hardware pushes raw times to our webhook, which sanitizes and stores them.
- Real-Time WebSockets: Frontend components subscribe to a WebSocket channel for instant leaderboard updates.
- Points & Categories: An algorithm calculates overall and age-group standings the moment each runner crosses the line.
Membership & Payments
Stripe Integration:
- Annual membership fees and one-off race entry fees processed via Stripe Checkout.
- Webhooks update payment status in our database, triggering automated receipt emails.
Conclusion
Through Ace Battle Run, I sharpened my full-stack leadership—combining Next.js/Tailwind finesse with Laravel’s backend power and real-time data flows from professional timing hardware. The result is a scalable, user-friendly platform that streamlines event management and delivers instant results to athletes, coaches, and spectators alike.