The Qbetpro Portal is the dedicated frontend application for managing the multi-tenant casino game platform. It provides a comprehensive, responsive interface for Operators and Tenants to administer their shops, oversee user activity, and monitor performance via real-time dashboards.
It is built to interact seamlessly with the Qbetpro Django REST API.
| Type | Username | Password | Description |
|---|---|---|---|
| Operator website admin | qtest.viewer1 | viewer1234! | User with read capabilities only, can view every detail of the operator website. |
| Retail Shop Cashier | qtest.cashier1 | cashier1234! | Cashier user for reatil shop website that can bet on games, redeem tickets and etc. |
This portal provides all the tools necessary for tenant and platform administration:
- Multi-Tenant Management: Tools for platform operators to manage and provision new casino tenants/shops.
- Shop Administration: Dedicated interface for tenants to manage their specific shop instance, settings, and branding.
- Comprehensive Dashboard: Real-time analytics and reporting interface for key performance indicators and game activity.
- User & Role Oversight: Management of user accounts and permissions within the tenant's environment.
- E-commerce Interface: Administration of e-commerce and monetization features integrated with the shop functionality.
This project uses pnpm for efficient dependency management. We recommend using it for a seamless setup.
- Node.js (LTS version recommended)
- pnpm
-
Install Dependencies
pnpm install
-
Start the Development Server
pnpm start
The application will be served at
http://localhost:3000.
The portal is built using a modern, robust, and well-tested frontend stack:
| Category | Technology | Purpose |
|---|---|---|
| Framework | ReactJs, Vite | Core library and fast development environment setup. |
| Styling | Material UI | Comprehensive component library for consistent and accessible design. |
| State | Redux, Rtk-query | Predictable state management and declarative data fetching/caching. |
| Forms | React-hook-forms | Performant and flexible form validation and management. |
| Routing | React-router-dom | Client-side routing for seamless navigation. |
| Testing | React Testing Library, Playwright | Unit/Integration testing and end-to-end (E2E) testing. |
| DevOps | Husky, Sentry | Automated local git hooks (linting/testing) and production error/performance monitoring. |
To create a production-ready build of the application:
- Run the build command
| Command | Description |
|---|---|
pnpm build:development |
Creates a development-mode build. |
pnpm build:staging |
Creates a staging-mode build. |
pnpm build:production |
Creates the final, optimized production build. |
pnpm serve |
Locally previews the optimized production build. |
The compiled, optimized static assets will be stored in the ./build directory.
- Deployment
The contents of the
./builddirectory are ready to be served by any static web server (e.g., Nginx, Apache, or a cloud hosting service).
We welcome contributions! Please review the contribution guidelines and requirements before submitting any changes.
- Read the requirements here.
- Thank you and happy coding! ☕️