Personal Project2024

Joki By Dew

A comprehensive admin panel for managing gaming boost services with order tracking, package management, and real-time analytics dashboard.

PHPMySQLBootstrapJavaScriptDataTablesChart.js
Joki By Dew - Image 1

Overview

Joki By Dew is a full-featured admin dashboard application designed to manage gaming boosting services (commonly known as 'joki' services in Indonesia). The system enables administrators to manage client orders for game rank boosting and camo weapon unlocking services, track order statuses, manage service packages with pricing, and visualize business performance through interactive charts and statistics.

My Role

Full Stack Developer

Team Size

Solo

Tech Stack

Frontend
HTML5CSS3JavaScriptBootstrap 5jQueryDataTablesChart.jsAnimate.cssParticles.jsSweetAlert2Toastify
Backend
PHPRESTful API Architecture
Database
MySQL (MariaDB via XAMPP)
Tools
VS CodeXAMPPGitFont Awesome

Problem

Managing gaming boost services manually leads to disorganized order tracking, difficulty monitoring active workers (penjoki), lack of real-time visibility into business performance, and inefficient package pricing management. Without a centralized system, it becomes challenging to track order statuses (pending, in-progress, completed) and maintain accurate records.

Solution

Built a comprehensive admin dashboard that centralizes all operations into one platform. The system features secure authentication, real-time order management with CRUD operations, dynamic package management for different service types (Rank MP/BR and Camo Gold/Diamond), visual analytics with trend charts, and period-based statistics tracking. The responsive design ensures accessibility across all devices.

Key Features

  • 1Secure admin login with session management
  • 2Real-time dashboard with order statistics and 7-day trend visualization
  • 3Dual order management for Rank (MP/BR) and Camo (Gold/Diamond/Paket) services
  • 4Dynamic package pricing management with CRUD operations
  • 5DataTables integration for filtering, sorting, and pagination
  • 6Interactive particles.js background and smooth CSS animations
  • 7Toast notifications and SweetAlert confirmations
  • 8Mobile-responsive design with collapsible sidebar
  • 9Order status tracking (Pending, In Progress, Completed)
  • 10Period-based analytics (daily, weekly, monthly)

Challenges & Learnings

Challenges: Implementing a unified order management system that handles two distinct database tables (rank and camo) with different data structures while maintaining a consistent user experience. Also addressed dynamic form field switching based on service type selection and ensuring real-time data synchronization across dashboard statistics.

Learnings: Strengthened skills in building RESTful APIs with PHP, working with MySQL for complex queries involving multiple tables, implementing DataTables for efficient client-side data handling, and creating engaging UI/UX with modern CSS animations and JavaScript libraries like Particles.js and Chart.js.

Result

Successfully deployed a production-ready admin panel that streamlines gaming boost service operations. The dashboard provides instant visibility into order metrics, reduces manual tracking effort, and enables efficient package pricing management with an intuitive, visually appealing interface.