Tatami App

A modern, feature-rich web application built with React, TypeScript, Redux Toolkit, and Vite. The app is designed for interactive, real-time gaming experiences, with support for internationalization, PWA, and mobile-friendly UI.

Features

• Real-time Game Engine: Live multiplayer betting game with real-time updates using Socket.IO.
• Authentication & User Management: Secure login, registration, password reset, and account management.
• Wallet & Transactions: Deposit, withdraw, transfer money, and view transaction history.
• Affiliate Program: Referral system with bonus tracking and transfer.
• Internationalization (i18n): Supports English and French languages.
• PWA Support: Installable as a Progressive Web App with offline support and push notifications (Firebase Cloud Messaging).
• Responsive UI: Mobile-first design using Bootstrap and custom SCSS.
• Onboarding & Guided Tours: Interactive onboarding and feature tours for new users.
• Provably Fair: Transparent and fair game logic.
• Comprehensive FAQ & Support: In-app FAQ and support links.

Tech Stack

• Frontend: React 18, TypeScript, Vite
• State Management: Redux Toolkit
• Styling: SCSS, Bootstrap 5
• Internationalization: i18next, react-i18next
• PWA: vite-plugin-pwa
• Real-time: socket.io-client
• Charts: chart.js, react-chartjs-2
• Other: Firebase (messaging), React Router, React Bootstrap, React Icons

Project Structure

├── public/                # Static assets, icons, service worker, etc.
├── src/
│   ├── assets/            # Images, logos, gifs, etc.
│   ├── components/        # Reusable UI components (Game, Wallet, Modals, etc.)
│   ├── i18n/              # Internationalization config and translations
│   ├── routes/            # App routing and page layout
│   ├── sections/          # (Optional) App sections
│   ├── store/             # Redux slices and store setup
│   ├── styles/            # Global SCSS, variables, breakpoints
│   ├── utils/             # Utility functions
│   ├── App.tsx            # Main app component
│   ├── main.tsx           # App entry point
│   ├── network.ts         # API/network logic
│   └── index.scss         # Global styles
├── manifest.json          # PWA manifest
├── vite.config.ts         # Vite configuration
├── tsconfig.json          # TypeScript configuration
└── package.json           # Project metadata and scripts

Getting Started

Prerequisites

• Node.js (v16+ recommended)
• npm or yarn

Installation

npm install
# or
yarn install

Development

npm run dev
# or
yarn dev

Build for Production

npm run build
# or
yarn build

Preview Production Build

npm run preview
# or
yarn preview

Environment Variables

• VITE_BE_BASE_URL: Backend API base URL (set in your environment for API calls)

Main Features & UI Overview

• Header: Branding, language switcher, wallet access, login/register, navigation.
• Game Area:
  • GraphCard: Real-time game chart and stats.
  • SimpleCard: Bet form and controls.
  • MyTabs: Tabs for history, players, and stats.
  • ScoreBoardFooter: Online/playing stats.
• Wallet Modal: Deposit, withdraw, transfer, and transaction history tabs.
• Account Modal: User stats, change password, and settings.
• Affiliate Program: Referral link, bonus summary, and transfer.
• FAQ & Info: In-app FAQ, onboarding, and how-to-play guides.
• Notifications: Push notifications via Firebase.
• PWA Modal: Prompt to install the app on supported devices.

Internationalization

• English and French supported.
• Language is auto-detected or can be switched in the header.
• Translation files in src/i18n/locales/en/ and src/i18n/locales/fr/.

Styling

• Uses Bootstrap 5 and custom SCSS modules.
• Global styles in src/index.scss.
• Theme and layout variables in src/styles/_variables.scss and src/styles/_screens.scss.

PWA & Service Worker

• PWA manifest and icons in public/ and manifest.json.
• Service worker for push notifications: public/firebase-messaging-sw.js.
• Installable on mobile and desktop.

Scripts

• dev: Start development server
• build: Build for production
• preview: Preview production build
• lint: Lint source files
• prepare: Husky git hooks

License

This project is proprietary and not open source. For inquiries, contact the project owner.