Week 13 — We Finally Completed the Frontend of J Arena!
It's Week 13 of our Application Development journey, and this week marks a huge milestone for Team Alpha Devs — we completed the full frontend implementation of the J Arena Football Field Booking System. After weeks of planning, designing, coding, debugging, and a lot of coffee, the system is finally taking shape and looking exactly the way we envisioned it from Day 1.
Here's a look at everything we built this week.
What We Completed This Week
This week we finalized the frontend views across all six modules of the system. Here's a breakdown of what each module looks like now:
- Booking, Field & Schedule Customers can now browse all available football fields through a clean card-based grid layout. Each card shows the field name, location, price per hour, and availability status. Clicking "Book Now" takes the user to a booking form where they can pick a date, select a time slot, and choose their preferred duration. The interface is smooth, intuitive, and eliminates the back-and-forth WhatsApp messaging that J Arena used to rely on.
- User & Authentication We built a clean registration and login page. New users can sign up with their name, email, and password. Returning users log in and get redirected to their role-specific dashboard — customers see their booking summary, while admins land directly on the management panel. The system handles session management silently in the background.
- Payment & Invoicing After a booking is confirmed by the admin, a payment record is automatically generated. The customer can view their full payment history on a dedicated page, with details like booking date, field name, duration, amount, and payment status. Invoices are displayed cleanly and are easy to reference.
- Notification & Reminder We implemented an in-app notification system with a sidebar badge showing unread counts. Customers receive automatic notifications for booking confirmations, cancellations, and payment receipts. Admins can broadcast messages to all users or send targeted notifications to specific customers from the admin panel.
- Event Promotion The Events module gives J Arena a way to promote tournaments, campaigns, and announcements directly through the platform. Customers can browse active events, view full event details, and register for events they're interested in. Admins can create and manage event listings from a dedicated management table.
- Team & Tournament This was our most complex module and we're really proud of how it turned out. Customers can create teams, manage their team roster, and register for tournaments — all from a single page. The leaderboard ranks teams by points, wins, and draws with gold, silver, and bronze medal indicators. The admin can schedule tournament matches, enter final scores, and the system automatically updates team standings in real time.
Tech Stack We Used
Our frontend is built with Thymeleaf 3 as our templating engine, styled with Bootstrap 5 and Bootstrap Icons for a clean and responsive layout. The backend powering everything is Spring MVC 5, connected to a MySQL database through Hibernate ORM. Everything is deployed locally on Apache Tomcat 9.
Challenges We Faced
It wouldn't be an honest blog post without mentioning the challenges. The biggest one this week was a database connection conflict — our MySQL service was fighting over port 3306 with a second MySQL installation on one of our machines. It took a while to figure out, but we resolved it by reconfiguring the conflicting service and restoring XAMPP's MySQL to the correct port. Once that was sorted, Hibernate successfully auto-created all our database tables on first startup.
We also had to be very careful about shared configuration files in our repository — changing environment-specific settings like port numbers could break the setup for other teammates, so we had to fix the conflict at the OS level rather than in the codebase. A good lesson learned about team development environments!
What's Next
Week 13 was all about frontend completion — making sure every screen, every button, and every flow works the way it should. Coming up next, we'll be moving into integration testing, polishing the admin panel, and preparing our final documentation and presentation.
LOGIN PAGE
CUSTOMER DASHBOARD
J Arena's new system is almost ready for the real world. Watch this space. ⚽
— Alpha Devs Naim Fikri | Faris | Shimaa | Hodan | Fouad | Arnob SECJ3104 Application Development — Section 02
Comments
Post a Comment