Visit the KGeN website

Frontend Architecture

The KGeN Frontend Architecture is designed to efficiently support multiple interconnected projects within the KGeN ecosystem. This section focuses on explaining the structure, implementation of the micro-frontend approach, and the key architectural techniques utilized to ensure modularity, scalability, and performance optimization.

Website

Corporate Website (kgen.io):

  • Serves as the marketing and landing page to introduce KGeN’s ecosystem.

Gamer Website (play.kgen.io):

  • Homepage (play.kgen.io): Displays an overview of the gaming platform.

  • Quests Page (play.kgen.io/k-quest): Gamers can complete quests and earn rewards.

  • Clan System (play.kgen.io/clan): Enables gamers to create clans and manage memberships.

  • Profile Page (play.kgen.io/profile): Displays user-specific data, including POG cards and achievements.

Campaign Website (K-Drop) (play.kgen.io/k-drop):

  • Hosts campaigns where gamers can complete tasks to earn USDT and K-points.

Micro-Frontend Implementation

To support different website projects under a unified ecosystem, we leverage micro-frontend architecture with path-based routing:

Path-Based Routing:

Each project is served under a unique path within the same domain.

  • Example paths:

    • kgen.io for the Corporate Website

    • play.kgen.io for the Gamer Website

    • play.kgen.io/k-drop for the Campaign Website

Shared Resources:

  • Shared UI components, such as headers, footers, wallet integration, and notifications, ensure consistency across all projects.

  • Common libraries for state management, authentication, and API integration simplify maintenance.

Deployment:

The micro-frontend structure allows independent deployments of individual projects while maintaining seamless integration under the same domain.

Key Architectural Features

1. Authentication and Authorization

  • A centralized authentication module is used across all projects.

  • Includes multiple login methods: OTP, WhatsApp, Google, Discord, and Twitter.

  • The module encapsulates UI workflows, API integrations, and state management. (Details to be elaborated in a separate module.)

2. State Management

  • Implemented using Redux Toolkit for managing global state and modals.

  • Thunks are used for reusable and efficient asynchronous operations.

3. API Integration

  • REST APIs are the primary choice, with Axios as the HTTP client for backend communication.

  • GraphQL is used selectively for POG APIs, ensuring flexibility for specific requirements.

4. Performance Optimizations

  • Server-Side Rendering (SSR): Applied selectively (e.g., homepage) to improve load times and SEO.

  • Next.js Image Component: Optimizes image loading and delivery.

  • Skeleton Loading: Enhances user experience by reducing perceived wait times.

  • React Query: Caches API responses for listing pages, minimizing redundant calls.

5. Error Handling and Logging

  • Integrated Sentry for real-time error monitoring and tracking.

  • Root-level error boundaries handle application crashes gracefully.

  • React’s Suspense is used for exception management during data fetching.

6. Internationalization (i18n)

  • Utilizes Google Translate API for automated translations in selected countries.

7. Deployment Strategy

  • Jenkins is used for the CI/CD pipeline to automate deployments.

  • Path-Based Routing is configured by the DevOps team, enabling seamless hosting of multiple projects under distinct paths.

8. SEO Enhancements

  • Includes metadata optimization and SSR to improve search engine visibility. (Detailed explanation to be included in a separate module.)

App

The KGeN app is a cross-platform mobile application developed using React Native for both iOS and Android. It provides a variety of features, including K-Quests, a Clan System, Profile management, and a Web3 Wallet supporting Send, Receive, and Redeem functionalities, as well as Wallet Connect with multichain support. The app also includes a notifications system to keep users engaged.

Key technologies include:

  • React Native for cross-platform development (iOS and Android).

  • Redux Toolkit for state management.

  • React Navigation for routing.

  • TypeScript for type safety.

  • React Native Blur for modal background effects.

Tech Stack

The app leverages the following technologies:

  • React Native for cross-platform development (iOS and Android).

  • Redux Toolkit for state management.

  • React Navigation for navigation and routing.

  • TypeScript for type safety.

  • React Native Blur for modal background effects.

Global Modal Management

The app uses a GlobalModal component to manage and render modals dynamically and globally. Key elements of the implementation:

  • Redux Integration: Modal state and properties are stored in the modalManagerSlice. Actions like openModal and closeModal handle state updates dynamically.

Responsiveness and Cross-Platform Handling

Responsiveness is managed through helper functions for consistent scaling:

Code Example: import { Dimensions } from 'react-native';

export const getResponsiveValue = (value) => {

const { width } = Dimensions.get('window');

const ratio = width / 375; // Base width for scaling

return value * ratio;

};

export const isIos = Platform.OS === 'ios';

This ensures a consistent layout across devices, reducing the need for platform-specific styling.

Translations and Internationalization in APP

KGeN system supports seamless translations for international users, currently offering English, Arabic, and Portuguese (upcoming). It dynamically adapts content based on user location and preferences, ensuring a localized experience across the platform.

Static translations

Static translations are used for fixed, non-dynamic content. Each language has a dedicated file, and the translations are bundled together for easy access:

  • en.ts: English

  • pt.ts: Portuguese

  • ar.ts: Arabic

  • translations.ts: Root file linking all languages

Example Structure:

plaintext

Copy code

📦 src/constants/translations

┣ 📜 en.ts

┣ 📜 pt.ts

┣ 📜 ar.ts

┗ 📜 translations.ts

Dynamic translations

Dynamic translations are used for content that is generated on the backend, particularly when the content is dynamic or user-specific (e.g., profile data, user settings, etc.). The backend translates content on-the-fly based on the language requested in the API request. This method ensures that translations are provided dynamically based on the user's preferences and location.

API Endpoint Structure

To support dynamic translations, the backend exposes API endpoints that allow clients to specify which language they want the content in. Language selection is typically passed as a query parameter (e.g., lang=ar for Arabic) or set in the request body for specific endpoints.

  • GET /users/me/profile?lang=ar: Fetches the user profile in Arabic.

  • PUT /user/me/preferred-language: Updates the user's preferred language.

Translation Interceptor Middleware

To handle dynamic translation requests, an interceptor middleware is used. This middleware processes incoming requests, reads the language parameter from the request, and determines whether a translation is needed. If a translation is found in the cache, it is returned directly; if not, the middleware requests the translation from an external service (e.g., Google Translate).

Steps Involved:

  1. Language Detection The middleware reads the lang query parameter from the incoming request. If the parameter is not present, the system defaults to English or another fallback language.

  2. Cache Lookup The middleware checks if the translation for the requested content and language exists in the cache (Redis). If the translation is cached, it is returned immediately, reducing the need for additional API calls.

  3. Translation Request If the translation is not found in the cache, the middleware calls the Translation Service (such as Google Translate) with the content that requires translation.

  4. Caching Translations Once the translation is received, it is stored in both Redis (for fast access on subsequent requests) and DynamoDB (for long-term persistence). The translation is saved with a unique key to ensure efficient storage and retrieval.

Key Format for Caching:

The system uses a key format CRC32(string)-language_id, where:

  • CRC32(string) is a hash of the original content string.

  • language_id represents the language code (e.g., ar for Arabic).

This unique key ensures that translations are efficiently cached and retrieved.

Translation Flow Example:

  1. User Request: A client sends a request to the backend: GET /users/me/profile?lang=ar

  2. Middleware Process: The interceptor reads the lang=ar parameter and checks if the Arabic translation of the profile data is available in Redis.

  3. Cache Miss: If the translation is not found in Redis, the middleware sends a request to the Translation Service to translate the content.

  4. Translation Service Interaction: The translation service (e.g., Google Translate) returns the translated content, which is then stored in Redis and DynamoDB.

  5. Response: The backend sends the translated content back to the client. The content is now cached for future requests.

PreviousDataNextDevops & Security

Last updated