Flexzone Offline Kiosk - Project Showcase

Project Overview

Flexzone Offline Kiosk is a modernized, full-stack gym management system built with a microservices architecture. It consists of three separate applications that work together: a Laravel 12 REST API backend, a React + Vite admin panel frontend, and a Java desktop kiosk application for QR code scanning. This architecture provides scalability, maintainability, and optimal performance for different use cases.

System Architecture

Backend API

Laravel 12 (PHP)

REST API Server

Frontend

React + Vite

Admin Panel

Kiosk

Java + JavaFX

QR Scanner

Technology Stack

Laravel 12 PHP 8.2+ React Vite Java JavaFX MySQL RESTful API Gradle CORS

System Components

Backend API (Laravel 12)

RESTful API providing data and business logic. Handles member management, attendance tracking, authentication, and all backend operations. Supports both local and remote database connections.

Frontend Admin Panel (React + Vite)

Modern web-based admin interface for staff to manage members, view attendance, generate reports, and perform administrative tasks. Responsive design accessible from any device.

Kiosk Application (Java + JavaFX)

Desktop application for gym entrance kiosks. Handles QR code scanning, member check-in/out, and provides a simple, focused interface optimized for scanning operations.

Key Features

Microservices Architecture

Separate applications for different purposes - web admin panel and desktop kiosk, both connecting to the same API

Member Management

Complete CRUD operations for member accounts with QR code generation and barcode support

QR Code Scanning

Java kiosk application with USB barcode scanner support for quick member check-in/out

Attendance Tracking

Real-time attendance recording with automatic time in/out detection based on member's last entry

React Admin Panel

Modern, responsive admin interface built with React and Vite for fast development and hot reloading

RESTful API

Well-structured Laravel API with proper endpoints, authentication, and CORS configuration

Remote Database Support

Backend configured to connect to remote MySQL database (Hostinger) for production deployment

Desktop Kiosk App

Standalone Java application that can be packaged as EXE for Windows deployment at gym locations

Development Tools

Hot module replacement with Vite, Gradle build system for Java, and comprehensive documentation

Architecture Benefits

Separation of Concerns: Each component has a specific purpose - API for data, React for admin UI, Java for kiosk
Scalability: Each component can be scaled independently based on usage patterns
Technology Flexibility: Best technology for each use case - React for web UI, Java for desktop performance
Maintainability: Clear boundaries between components make the system easier to maintain and update
Performance: Desktop kiosk app provides better performance for real-time scanning than web-based solutions
Deployment Flexibility: Components can be deployed separately - API on server, frontend on CDN, kiosk as standalone EXE

Deployment

Backend: Deploy Laravel API to Hostinger or any PHP hosting
Frontend: Build with npm run build and deploy to static hosting or CDN
Kiosk: Build EXE with .\gradlew jpackage and distribute to gym locations
Database: Remote MySQL database already configured for production use

Component Screenshots

React Admin Panel

Frontend Interface

Laravel API

Backend Server

Java Kiosk App

Desktop Application