Book football turfs, badminton courts, swimming lanes, and more — in seconds.
ArenaX is a full-stack sports facility booking management system built with the MERN stack and Better Auth authentication. The platform allows users to explore available sports venues across Bangladesh — football turfs, badminton courts, swimming lanes, tennis courts, and more — and make real-time bookings for specific dates and time slots. Facility owners can list, manage, and update their venues directly from the platform.
Authentication: Better Auth | Icons: Phosphor Icons | UI: HeroUI
- 🔍 Browse Facilities — Explore all listed sports venues without logging in
- 🔎 Search & Filter — Filter by sport type or search by name using MongoDB
$regexand$inoperators - 📅 Book a Facility — Select a date, time slot, and number of hours to make a booking
- 📋 My Bookings — View all personal bookings with status indicators (Pending / Confirmed / Cancelled)
- ❌ Cancel Booking — Cancel any active booking with a confirmation prompt
- 🌗 Theme Toggle — Switch between dark and light mode seamlessly
- ➕ Add Facility — List a new sports venue with full details, images, and available time slots
- ✏️ Update Facility — Edit facility information at any time
- 🗑️ Delete Facility — Remove a facility with a confirmation modal
- 📊 Manage My Facilities — View all personally owned venues in one dashboard
- Email & password login with validation (6+ chars, uppercase, lowercase)
- Google OAuth login
- HTTPOnly cookie-based JWT sessions via Better Auth
- Protected private routes — no redirect to login on page reload
| Package | Purpose |
|---|---|
next |
React framework with App Router |
react / react-dom |
UI library |
better-auth |
Authentication (email + Google OAuth) |
@better-auth/mongo-adapter |
MongoDB adapter for Better Auth |
mongodb |
MongoDB driver for database operations |
motion / framer-motion |
Page transitions and animations |
next-themes |
Dark / light theme toggle |
@heroui/react |
UI component library |
@heroui/select |
Select dropdown component |
@phosphor-icons/react |
Icon library |
react-hot-toast |
Toast notifications |
embla-carousel-react |
Carousel / slider component |
embla-carousel-autoplay |
Autoplay plugin for Embla carousel |
react-paginate |
Pagination component |
use-debounce |
Debounce hook for search input |
tailwindcss |
Utility-first CSS framework |
Make sure you have the following installed:
# 1. Clone the repository
git clone https://github.com/rzoshin/arenax-client.git
cd arenax-client
# 2. Install dependencies
npm install
# 3. Create your environment file
cp .env.example .env.localFill in your .env.local:
NEXT_PUBLIC_API_URL=http://localhost:8000
BETTER_AUTH_SECRET=your_secret_here
BETTER_AUTH_URL=http://localhost:3000
GOOGLE_CLIENT_ID=your_google_client_id
GOOGLE_CLIENT_SECRET=your_google_client_secret
MONGODB_URI=your_mongodb_connection_string# 4. Start the development server
npm run devOpen http://localhost:3000 in your browser.
# 1. Clone the server repository
git clone https://github.com/rzoshin/arenax-server.git
cd arenax-server
# 2. Install dependencies
npm install
# 3. Create your environment file
cp .env.example .envFill in your .env:
PORT=8000
MONGODB_URI=your_mongodb_connection_string# 4. Start the server
npm run devThe API will be available at http://localhost:8000.
arenax-client/
├── app/
│ ├── (auth)/
│ │ ├── login/
│ │ └── register/
│ ├── facilities/
│ │ └── [id]/
│ ├── bookings/
│ ├── add-facility/
│ ├── manage-facility/
│ ├── not-found.jsx
│ ├── layout.jsx
│ └── page.jsx
├── components/
│ ├── shared/
│ │ ├── Navbar.jsx
│ │ └── Footer.jsx
│ ├── bookings/
│ │ └── BookingCard.jsx
│ └── Providers.jsx
├── lib/
│ └── auth-client.js
└── public/
└── assets/
🔗 https://arenax-client.vercel.app