CoreFit is a mobile-friendly playground booking and commerce frontend I built for football pitch reservations. Users browse playgrounds, check availability, book time slots, and manage payment-related steps — while the product also bridges to on-site hardware for physical access.

The frontend uses React and Tailwind CSS for a responsive booking interface that works well on phones at the field. React Query keeps availability and booking status fresh, reducing stale slot problems that frustrate sports users. Axios talks to backend services, and React Hook Form streamlines reservation forms. Chart.js supports analytics views where admins or operators need a quick read on usage.

A distinctive part of CoreFit is hardware integration. Bookings can generate a one-time password used with an ESP module and Arduino Uno setup that controls gate access at the playground. That meant the UI had to communicate booking success and access codes clearly — not just confirm a calendar slot. Real-time-ish status updates via React Query help the digital and physical sides stay in sync from the user’s perspective.

I treated CoreFit as an operations product as much as a consumer app. Empty states, booking conflicts, and confirmation screens needed careful copy and layout. The GitHub-hosted frontend reflects a complete booking flow oriented around speed, clarity, and reliability for sports facilities.

CoreFit is a strong example of frontend work that sits next to IoT and real-world constraints — not only pixel-perfect screens, but interfaces that unlock a gate after a successful booking.

Sports booking products have unforgiving users. If a slot appears free and then fails, trust collapses. React Query caching and invalidation strategies were tuned so availability feels current without hammering the API. Booking confirmation screens emphasize the access code pathway so the hardware step is understandable.

CoreFit sits at an interesting intersection of consumer UX and facility operations. Building that frontend sharpened how I communicate system status — digital booking, payment context, and physical entry — in one coherent interface.