ArenaKu

A sports venue booking platform built with Next.js and Prisma, featuring real-time schedule management and secure payments with Midtrans.

View Code

Year2025

RoleFull Stack Developer

✨ Description

ArenaKu allows users to browse available sports venues, view real-time schedules, and book fields online. It's designed with scalability in mind - initially for one owner (me), but the database structure already supports multi-owner functionality in the future. This project was developed as a personal learning project to explore full-stack web development concepts, focusing on real-world booking systems, database modeling, and payment integration. The main goal of this project is to learn and apply modern web development practices using Next.js and TypeScript while simulating a realistic SaaS-like platform architecture.

⚙️ Key Features

•Browse and book available sports fields
•Dynamic time slot management with real-time updates
•Secure payments via Midtrans
•Admin dashboard for managing venues and schedules
•Role-based authentication for owners and customers
•Multi-owner support - Multiple owners can manage their own fields independently.
•Email verification - Integrated Nodemailer to verify user accounts and reduce spam bookings.
•Google Sign-In - Enabled seamless login without manual registration for a smoother user experience.
•Local storage booking persistence - Preserves ongoing bookings even after page reloads or interruptions, improving user experience.

🔧 What I Built

•Designed a scalable multi-owner architecture using relational models
•Created PostgreSQL + Prisma schema for venues, time slots, and bookings
•Implemented conflict-free dynamic time slot allocation
•Integrated Midtrans payments with server-side security validations
•Configured Nodemailer for automated email verification
•Developed local storage persistence for in-progress bookings
•Implemented OAuth 2.0 login via Google Sign-In for faster user access

🧩 Project Goals

This project was created primarily for learning purposes, focusing on:

•Understanding Next.js structure and server-side rendering (SSR)
•Writing clean and type-safe code using TypeScript
•Practicing clean and modular code architecture
•Learning how to integrate a payment gateway (e.g., Midtrans) into a real-world application