System Requirements Document (SRD)

Project Name: epic-client

1. Introduction

The epic-client project is a professional ecommerce platform designed for selling source codes to clients. Developed by Upower Cloud, based in India, this platform aims to provide a seamless and trustworthy experience for users looking to purchase, preview, and integrate source codes into their projects. With a proven track record of building over 500 websites since 2018, Upower Cloud brings expertise and reliability to the source code marketplace.

This document outlines the system requirements for the epic-client project, including functional and non-functional specifications, design concepts, and technical architecture.

2. System Overview

The epic-client platform is a modern ecommerce solution tailored for selling source codes. It features:

• A secure login system requiring users to register and log in before browsing.
• A catalog of 11 individual source code products, each with live previews, screenshots, and detailed setup guides.
• Add-to-cart functionality and a professional checkout process integrated with WHMCS for payment handling.
• Additional pages for company information, custom development services, and API documentation.

The platform is designed to be polished, modern, and trustworthy, reflecting the professional standards of Upower Cloud.

3. Functional Requirements

User Stories:

• As a User, I must register/login before browsing the website.
• As a User, I should be able to view 11 individual source code products with live previews (opens in a new tab) and screenshots.
• As a User, I should be able to see detailed product pages with a 7-step setup guide and features for each product.
• As a User, I should be able to add products to the cart and view an order summary during checkout.
• As a User, I should be redirected to WHMCS for payment processing after checkout.
• As a User, I should be able to access an About Us page highlighting company expertise since 2018 and a portfolio of 500+ websites launched.
• As a User, I should be able to access a Custom Development page showcasing services offered.
• As a User, I should be able to access an API Documentation page for integrating source codes.

4. User Personas

1. Admin

• Role: Manages product catalog, pricing, and user accounts.
• Responsibilities:
  • Upload source code details, live preview links, and screenshots.
  • Configure WHMCS integration for payment processing.
  • Monitor user activity and manage orders.

2. Registered User

• Role: Purchases source codes and accesses product details.
• Responsibilities:
  • Browse products after logging in.
  • Add products to the cart and complete checkout.
  • Access setup guides and API documentation.

3. Guest

• Role: Limited access to the platform.
• Responsibilities:
  • Register/login to browse products.

5. Visuals Colors and Theme

Color Palette

• primary: #1A73E8 (Deep Blue)
• primary_light: #4A90E2 (Light Blue for hover states)
• secondary: #F4511E (Crimson for headlines and emphasis)
• accent: #FFD700 (Gold for CTAs and badges)
• highlight: #FF9800 (Amber for hover states and notifications)
• bg: #F5F5F5 (Light Gray for page background)
• surface: rgba(255, 255, 255, 0.9) (White for cards/panels)
• text: #212121 (Dark Gray for primary text)
• text_muted: #757575 (Muted Gray for secondary text)
• border: rgba(0, 0, 0, 0.1) (Subtle border color)

6. Signature Design Concept

Concept: Interactive Product Showcase

The homepage will feature an Interactive Product Showcase where users can explore the 11 source code products in a dynamic carousel. Each product card will include:

• Hover Effects: Cards will tilt slightly and glow when hovered.
• Live Previews: Clicking on a card opens the live preview in a new tab.
• Screenshots: Users can swipe through screenshots directly on the card.
• Setup Guide Highlights: A button reveals a modal with the 7-step setup guide.

Additional Features:

• Dynamic Pricing Display: Each card will show the product price ($250–$1000) with a subtle animation.
• Micro-Interactions: Add-to-cart buttons will pulse slightly when hovered.

Libraries:

• Framer Motion: For card animations and hover effects.
• GSAP: For carousel transitions and modal reveals.

7. Interaction Model & Motion Direction

Landing Page Interaction Model: Parallax

The landing page will use a parallax interaction model to create layered depth and visual storytelling.

• Background layers (e.g., subtle gradients and geometric shapes) will move at different speeds during scroll.
• Product cards will stay in normal flow but animate into view as users scroll.

Internal Pages Interaction Model: Static

Internal pages like the About Us, Custom Development, and API Documentation will prioritize clarity and readability with minimal motion.

8. Non-Functional Requirements

• Performance: The website must load within 3 seconds for users in India.
• Security: Implement SSL encryption and secure login mechanisms.
• Scalability: Support up to 10,000 concurrent users.
• Localization: Default currency in USD; timezone set to IST (Indian Standard Time).

9. Tech Stack

Frontend

• React for Web

Backend

• Python
• FastAPI

Database

• MySQL or MariaDB (preferred for relational data)

AI Tools

• GPT 5.4 for user-friendly responses

Local Orchestration

• Docker
• docker-compose

Server-Side Orchestration

• Kubernetes

10. Assumptions and Constraints

• Users must register/login before browsing products.
• WHMCS integration will handle payment processing.
• Live previews will open external URLs in a new tab.
• Pricing for products will range between $250 and $1000.

11. Glossary

• WHMCS: Web Host Manager Complete Solution, a tool for managing billing and licensing.
• API: Application Programming Interface, used for integrating external services.
• Cron Jobs: Scheduled tasks that automate backend operations.
• IST: Indian Standard Time, the timezone used for localization.