IDC Shop Webapp

A modern React-based e-commerce web application for selling digital game items and products. This application provides a complete shopping experience with product browsing, cart management, payment processing, and real-time transaction updates.

🚀 Features

Core Functionality

• Product Catalog: Browse and search through digital game items with categorized tabs
• Shopping Cart: Add/remove products with quantity management (max 10 items)
• Payment Processing: Multiple payment methods with real-time transaction status
• Coupon System: Apply discount coupons to purchases
• Content Creator Integration: Special features for content creators
• Multi-language Support: Internationalization with react-intl
• Real-time Updates: Socket.io integration for live transaction status

Technical Features

• Responsive Design: Mobile-friendly interface with drag-to-navigate product carousel
• Theme Customization: Dynamic theming with CSS variables
• State Management: Redux with Redux Persist for data persistence
• TypeScript: Full type safety throughout the application
• Modern Build: Webpack 4 with optimized chunk splitting
• CEF Integration: Support for Chromium Embedded Framework (CEF) applications

🛠️ Tech Stack

Frontend

• React 16.13.1 - UI framework
• TypeScript 3.9.5 - Type safety
• Redux 4.0.5 - State management
• Redux Persist 6.0.0 - State persistence
• React Router 5.2.0 - Client-side routing
• Ant Design 4.3.5 - UI component library
• SCSS - Styling with CSS modules
• Socket.io Client 1.1.0 - Real-time communication

Build Tools

• Webpack 4.43.0 - Module bundler
• Babel 7.10.3 - JavaScript transpiler
• ESLint - Code linting
• PostCSS - CSS processing
• Sass Loader - SCSS compilation

Backend Integration

• Axios - HTTP client for API calls
• Socket.io - Real-time communication
• Firebase Hosting - Deployment platform

📁 Project Structure

src/
├── api/                    # API layer
│   ├── index.ts           # API exports
│   ├── request.ts         # HTTP client configuration
│   └── shop/              # Shop-specific API endpoints
│       ├── article.ts     # Product management
│       ├── paymethod.ts   # Payment methods
│       ├── purchase.ts    # Transaction handling
│       └── validate.ts    # Request validation
├── components/            # Reusable components
│   └── Shop/             # Shop-specific components
│       ├── Checkout/     # Checkout functionality
│       ├── Menu/         # Navigation menu
│       ├── Modals/       # Modal dialogs
│       ├── Paymethods/   # Payment method selection
│       ├── Products/     # Product display and management
│       └── Tabs/         # Category tabs
├── helpers/              # Utility functions
│   ├── const.ts          # Application constants
│   ├── history.ts        # Browser history utilities
│   ├── toast.ts          # Notification system
│   └── urls.ts           # URL routing
├── screens/              # Page components
│   └── Home/             # Main shop interface
├── store/                # Redux store
│   ├── actions/          # Action creators
│   ├── reducers/         # State reducers
│   └── types/            # TypeScript type definitions
└── assets/               # Static assets
    ├── fonts/            # Custom fonts
    ├── icons/            # SVG icons
    └── images/           # Image assets

🚀 Getting Started

Prerequisites

• Node.js (v12 or higher)
• npm or yarn package manager

Installation

1. Clone the repository

   git clone <repository-url>
   cd idc-shop-webapp

2. Install dependencies

   npm install
   # or
   yarn install

3. Environment Configuration Create environment files for different stages:

   # Development
   touch .env.development
   
   # Production
   touch .env.production

   Add the following environment variables:

   # API Configuration
   API_BASE_URL=https://your-api-domain.com
   IDCPAYMENT_API_BASE_URL=https://payment-api-domain.com
   IDCPAYMENT_X_WSSE=your-wsse-token
   
   # Socket Configuration
   URL_NODEJS=wss://your-socket-server.com
   
   # Port Configuration
   PORT=4010

Development

1. Start development server

   npm start
   # or
   yarn start

2. Open your browser Navigate to http://localhost:4010

3. Development features

   • Hot reloading enabled
   • Source maps for debugging
   • ESLint integration
   • CSS modules with SCSS support

Building for Production

1. Build the application

   npm run build
   # or
   yarn build

2. Deploy to Firebase

   firebase deploy

🔧 Available Scripts

• npm start - Start development server
• npm run build - Build for production
• npm run lint - Run ESLint with auto-fix
• npm test - Run tests (currently placeholder)
• npm run pre-commit-hook - Run TypeScript check and linting

🌐 API Integration

Backend Services

The application integrates with two main backend services:

1. Panel API (API_BASE_URL)

   • Product catalog management
   • User validation
   • Theme and configuration data

2. Payment API (IDCPAYMENT_API_BASE_URL)

   • Transaction creation and management
   • Payment processing
   • Transaction status updates

Real-time Features

• Socket.io Integration: Real-time transaction status updates
• CEF Integration: Communication with desktop applications
• Payment Status Tracking: Live updates on payment progress

🎨 Theming and Customization

The application supports dynamic theming through CSS variables:

• Background images and colors
• Custom fonts and typography
• Responsive design breakpoints
• Multi-language support

🔒 Security Features

• Request Validation: Server-side validation for all requests
• Authentication: Bearer token authentication
• CORS Configuration: Proper cross-origin resource sharing
• Input Sanitization: XSS protection through React

📱 Browser Support

• Chrome (latest)
• Firefox (latest)
• Safari (latest)
• Edge (latest)

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📄 License

This project is private and proprietary. All rights reserved.

🆘 Support

For support and questions, please contact the development team or create an issue in the repository.

---

Note: This application is designed to work within the IDC Games ecosystem and requires proper backend services to function correctly.