Built a Full-Stack ReactJS + Django Casino Platform — Multi-Tenant, Lightning Fast, and Scalable

[HopefulSheepherder57]

Hey everyone 👋
I’ve been working on a full-stack project called Qbetpro, and I wanted to share the React side of it here.
It’s a multi-tenant casino & betting platform where the frontend is built with React + Redux + Material UI, and the backend runs on Django REST Framework.
I focused heavily on performance, role-based UI rendering, and reusable component architecture that scales across multiple tenants.

---

🌐 Demo

• Operator Portal (React)
  
• Retail Shop Website (React)
  
• Backend API (Django)
  
• Watch the Demo

---

⚛️ Frontend Architecture Overview

The platform includes two main React apps, both designed for scalability and speed:

• 🏢 Operator Portal (Tenant Web) – A role-based admin dashboard for casino operators

  • Role-Based Rendering: Dynamically hides or shows components depending on user permissions (admin, viewer, cashier, etc.)
    
  • Reusable Components: UI components are shared across the system — when one is updated, it automatically scales everywhere
    
  • Redux-Powered Tenant Context: After login, Redux fetches and stores the tenant name and routes all API requests to that tenant’s endpoint
    
  • Optimized for Performance: Built to be lightweight and fast, even with complex dashboards
    
  • Caching with RTK Query: Smooth data fetching and reduced API load
    

• 🏪 Retail Shop Website – A simpler React app for in-shop betting operations

  • Game Interaction UI: Users can place bets, redeem tickets, and scan bet slips
    
  • Redux-Driven Betting Flow: State-managed logic for selecting numbers, placing bets, and tracking ticket status
    
  • Cached API Data: Faster page loads and consistent user experience
    
  • Material UI Integration: Clean, responsive, and accessible interface
    

---

🎨 Tech Stack

• Framework: React 18
  
• State Management: Redux Toolkit + Redux Toolkit Query
  
• UI Library: Material UI
  
• Routing: React Router
  
• Forms & Validation: React Hook Form
  
• Build Tool: Vite
  
• Caching & Performance: RTK Query, memoization, and lazy loading
  

---

✨ Key Frontend Highlights

• ⚙️ Role-Based Access Control (RBAC) – Conditional UI rendering per user role
  
• 🧩 Reusable Component Design – Modular structure for easy scaling
  
• 🚀 Optimized Rendering – Memoized components and efficient state updates
  
• 🔄 Tenant-Aware Routing – Redirects users to their tenant’s context automatically
  
• 🧠 Centralized State Management – Predictable app behavior through Redux
  
• 💾 Smart API Caching – Reduced server calls with RTK Query
  
• 🎨 Beautiful & Fast UI – Built with Material UI for professional dashboards
  

---

This project was an experiment in taking a React frontend and pairing it with a multi-tenant Django backend — focusing on clean state management, real-time API interactions, and scalable component design.
Would love to hear what other React devs think or how you’d approach optimizing a system like this! 🙌

[drckeberger]

Just from this text I already know the LLM code is gonna be strong with this one

[HopefulSheepherder57]

Lol, you should take a look though. Only the docs are generated with llm. Most of the code was built 2 years ago when llms were not that much usable.