Project
ArenaX
A full-stack sports-facility booking platform with Google auth, facility management, and includes booking management features. Built with Next.js and MongoDB. Protected routes ensure only authenticated users can book facilities, while admins have access to a dashboard for managing bookings and facilities.
Next.js
React
Tailwind CSSHero UIBetter Auth
Google Auth
MongoDB
About the Project
ArenaX is a production-ready sports venue booking platform built to eliminate the friction of phone-based reservations in Bangladesh. Sports enthusiasts can browse football turfs, badminton courts, and swimming lanes, check real-time availability, and confirm bookings instantly through a clean, responsive interface. Facility owners get a dedicated dashboard to list venues, manage schedules, and track bookings without needing any technical expertise. The platform features Google OAuth via Better Auth, JWT-secured protected routes, a fully custom dark/light theme system built with CSS variable tokens, animated hero sections with Framer Motion, and a mobile-first layout that works seamlessly across all devices.
⚡ What Was Hard
- 01Building a theme system using CSS custom properties that worked consistently across all HeroUI and custom components in both dark and light modes.
- 02Implementing server-side search and filtering with MongoDB $regex while keeping query performance acceptable at scale.
- 03Designing a booking conflict detection system to prevent double-bookings for the same time slot.
- 04Handling Better Auth session management across protected client and server routes in Next.js App Router.
- 05Creating a fully animated hero section with a custom football pitch SVG that remained responsive on all screen sizes.
🚀 What is Next
- 01Add real-time slot availability updates using WebSockets or Server-Sent Events.
- 02Introduce a payment gateway integration for online booking deposits.
- 03Build a rating and review system for facilities after a completed booking.
- 04Add calendar-based booking views for facility owners to manage schedules visually.
- 05Implement push notifications for booking confirmations and reminders.