System Requirements Document (SRD) for Hollow-Platform

1. Introduction

The Hollow-Platform is a modern, scalable, gamified earning platform named PAIDUP, designed to combine multiple income-generating systems into a single, cohesive experience. The platform integrates a 7-level referral MLM system, subscription-based earning boosts, cashback rewards, and a gamified rank system, all presented with a sleek, premium fintech-inspired user interface. This document outlines the system requirements for the User Panel, which will serve as the primary interface for users to interact with the platform.

The platform will be tailored for users in Bangladesh (BD), ensuring locale-specific defaults such as currency (BDT), timezone (BST), and user preferences.

2. System Overview

The Hollow-Platform User Panel is a mobile-first, single-page application (SPA) designed to provide users with seamless access to their earnings, referrals, and rewards. The panel will feature:

• A glassmorphism-inspired UI with frosted glass effects, soft gradients, and smooth animations.
• Core functionalities such as user registration, wallet management, referral tracking, subscription upgrades, and rank progression.
• A gamified experience with animated counters, rank badges, and daily engagement rewards.
• Real-time updates for earnings, cashback, and referral activity.

The system will prioritize performance, responsiveness, and user engagement, ensuring a premium experience for all users.

3. Functional Requirements

The following functional requirements are defined as user stories:

User Stories:

• As a User, I should be able to register and log in using my email or phone number.
• As a User, I should receive 50 onboarding coins distributed across progression levels.
• As a User, I should have a unique referral link to invite others and earn commissions.
• As a User, I should be able to view my referral tree and track my downline activity.
• As a User, I should be able to purchase subscription plans to boost my earnings.
• As a User, I should be able to view and manage my wallets (Coin Wallet, Referral Wallet, Cashback Wallet, Total Balance Wallet).
• As a User, I should receive cashback for specific actions and view my transaction history.
• As a User, I should see my rank progress and unlock rewards as I grow my network.
• As a User, I should receive real-time notifications for earnings, referrals, and rank upgrades.
• As a User, I should be able to withdraw my earnings once I meet the minimum threshold.
• As a User, I should receive daily login bonuses and streak rewards.
• As a User, I should be able to view analytics for my income growth, referral performance, and team expansion.

4. User Personas

1. Basic User

• Description: A new user exploring the platform for earning opportunities.
• Goals: Earn coins, invite friends, and unlock rewards.
• Features: Registration, referral link generation, wallet management, and rank tracking.

2. Subscriber

• Description: A user who has purchased a subscription plan for enhanced benefits.
• Goals: Maximize earnings through boosted referral percentages and cashback rates.
• Features: Subscription management, bonus rewards, and upgraded dashboard.

3. Network Builder

• Description: A user focused on growing their referral network.
• Goals: Expand their team, climb the rank ladder, and earn higher commissions.
• Features: Referral tree visualization, rank progress tracking, and team analytics.

5. Visuals Colors and Theme

The Hollow-Platform will use a unique color palette inspired by its fintech and gamified earning theme. The design will incorporate glassmorphism with frosted glass effects and soft gradients.

Color Palette:

• primary: #4A90E2 (Bright Blue)
• primary_light: #A6C8F7 (Light Sky Blue)
• secondary: #FF6F61 (Coral Red)
• accent: #FFD700 (Gold)
• highlight: #FFB74D (Amber)
• bg: #F5F7FA (Light Gray)
• surface: rgba(255, 255, 255, 0.8) (Frosted Glass White)
• text: #333333 (Dark Gray)
• text_muted: #888888 (Muted Gray)
• border: rgba(0, 0, 0, 0.1) (Subtle Black)

6. Signature Design Concept

Interactive Glass Dashboard

The homepage of the user panel will feature an interactive glass dashboard with the following elements:

• Frosted Glass Cards: Each card represents a key feature (e.g., Wallets, Referral Tree, Subscription Plans) and includes smooth hover animations.
• Dynamic Background: A soft gradient background that shifts subtly between blue, purple, and white hues.
• Floating Shapes: Animated geometric shapes (e.g., circles, triangles) that move gently in the background, creating a sense of depth.
• Animated Counters: Earnings and cashback values will increment dynamically, providing a gamified feel.
• Interactive Rank Progress Bar: Users can hover over the progress bar to see detailed rank requirements and rewards.
• Micro-Interactions: Buttons and icons will have spring physics animations using framer-motion.

Libraries to use:

• @react-three/fiber + @react-three/drei for 3D floating shapes.
• gsap for smooth animations and scroll-triggered effects.
• framer-motion for button and card interactions.

7. Interaction Model & Motion Direction

Interaction Model:

• Parallax: The landing page will feature layered depth via scroll, with decorative elements moving at different speeds.
• Animated: Smooth hover transitions, scroll-triggered reveals, and spring physics for interactive elements.

Motion Direction:

• Section-Specific Mechanics:
  • Wallet Section: Cards flip and stack like a deck of playing cards.
  • Referral Tree: Expandable/collapsible nodes with smooth animations.
  • Rank Progress: Progress bar morphs dynamically as users scroll.

8. Non-Functional Requirements

• Performance: The user panel must load within 2 seconds on a 3G connection.
• Responsiveness: Fully optimized for mobile devices with a resolution of 360x640 pixels and above.
• Security: Secure session handling with Firebase Authentication.
• Scalability: Support up to 1 million active users.

9. Tech Stack

Frontend:

• React (Web)
• TailwindCSS (for styling)
• Framer Motion (for animations)
• @react-three/fiber + @react-three/drei (for 3D elements)

Backend:

• Firebase Realtime Database
• Firebase Authentication

Database:

• Firebase (NoSQL)

10. Assumptions and Constraints

• The platform will initially target users in Bangladesh (BD).
• All monetary values will be displayed in BDT.
• Firebase will be used for backend services to ensure scalability and real-time updates.
• The system will follow a mobile-first design approach.

11. Glossary

• MLM: Multi-Level Marketing.
• Glassmorphism: A UI design trend featuring frosted glass effects.
• BDT: Bangladeshi Taka (currency).
• SPA: Single Page Application.