System Requirements Document (SRD)

Project Name: royal-backend

1. Introduction

The royal-backend project is a premium SaaS platform designed to provide AI-powered marketing and analytics tools. This document outlines the system requirements for building the backend system and frontend UI of the platform. The backend will focus on modular, scalable architecture, while the frontend will deliver a luxury, futuristic, and minimalistic design aesthetic.

The backend will be implemented using FastAPI, MySQL, and Redis, ensuring high performance and scalability. The frontend will use React, Tailwind CSS, and Framer Motion to create a highly interactive and visually appealing user experience.

This document is tailored for Md. Manjur Morshed from Bangladesh (BD), ensuring locale-specific considerations where applicable, such as currency (BDT) and timezone (BST).

2. System Overview

The royal-backend platform will serve as a comprehensive SaaS solution for marketing and analytics. It will provide users with tools to manage marketing campaigns, analyze data, and generate AI-powered insights. The system will be designed to:

• Deliver a luxury and futuristic experience through a clean, minimalistic UI with soft sage green tones.
• Ensure responsiveness across devices, including desktops, tablets, and mobile phones.
• Provide smooth animations and interactive elements using Framer Motion.
• Feature a modular backend architecture for scalability and maintainability.
• Support AI-powered outputs for tools like Ad Generator, Ad Spy, Analytics, Google Ads Assets Generator, and Landing Page Analyzer.
• Enable selective re-run capability for regenerating specific sections of the System Requirements Document (SRD) based on user-triggered inputs.

The backend will integrate seamlessly with the frontend, ensuring a smooth flow of data and functionality.

3. Functional Requirements

As User:

• I should be able to log in or sign up using a modern glassmorphism UI.
• I should see an overview of key metrics (Revenue, ROAS, Leads, Conversion Rate) on the main dashboard.
• I should navigate through a sidebar menu with 12 options, including Dashboard, Ad Spy, Ad Generator, Funnel Builder, and more.
• I should generate ad creatives (headlines, descriptions, CTAs) using an input form on the Ad Generator page.
• I should view competitor ads with AI insights on the Ad Spy page.
• I should analyze my campaigns with charts and filters on the Analytics Dashboard.
• I should input a URL and receive a score and suggestions on the Landing Page Analyzer.
• I should visually build a funnel using a flow diagram on the Funnel Builder page.
• I should see issues and recommendations for my campaigns on the Ads Audit page.
• I should generate all Google Ads assets (headlines, descriptions, images, and layouts) using the Google Ads Assets Generator.
• I should selectively re-run the generation of the System Requirements Document (SRD) to update specific sections based on new inputs.

4. User Personas

1. Admin

• Role: Manages users, monitors platform usage, and oversees revenue tracking.
• Needs: Access to all user data, API usage monitoring, and platform settings.

2. User

• Role: Subscribed customer using the platform for marketing and analytics.
• Needs: Access to all tools, personalized dashboards, and AI-powered insights.

5. Visuals Colors and Theme

Color Palette:

• Primary Brand Color: Soft Sage Green → #B9C7B0
• Secondary Color: Rich Charcoal → #2F2F2F
• Background Color: Whisper White → #F8F9F6
• Card/Container Color: Frosted Light Gray → #EAEDEB
• Accent Color: Luxe Gold → #F5C978
• Hover States:
  • For buttons/links: Slightly deeper Sage → #A8B8A2
  • For icons: Luxe Gold hover → #E6B96A
• Border/Divider Color: Calm Gray → #D5D9D6

Design Style:

• Luxury + Futuristic + Minimal
• Glassmorphism effects for cards and modals.
• Soft sage green tones for a calming, premium aesthetic.
• Dark mode as the default theme with high contrast for accessibility.

6. Signature Design Concept

Interactive Sage Dashboard with Glassmorphism

The home page/dashboard will feature a soft sage gradient background with subtle animations, creating a calming and premium experience.

Key Features:

1. Glassmorphism Cards:

   • Semi-transparent cards with blurred backgrounds for metrics like Revenue, ROAS, and Leads.
   • Cards will have a soft sage green border glow that intensifies on hover.

2. Sidebar with Luxe Gold Highlights:

   • The sidebar menu will feature gold hover effects and an active link indicator.

3. Micro Animations:

   • Buttons will have a soft ripple effect on click.
   • Metrics cards will slightly zoom in on hover using Framer Motion.

4. Google Ads Assets Generator:

   • A dedicated page where users can input campaign details and receive headlines, descriptions, images, and layouts.
   • Includes a preview mode to visualize the generated assets.

5. Landing Page Analyzer:

   • A score meter with a glowing radial animation that fills up based on the conversion score.

This design will make the platform visually unforgettable and engaging for users.

7. Non-Functional Requirements

• Performance: Pages must load within 2 seconds.
• Responsiveness: Fully responsive across all devices.
• Accessibility: WCAG 2.1 AA compliance for accessibility.
• Scalability: Modular component structure for easy updates.
• Security: Secure handling of user data and API interactions.

8. Tech Stack

Frontend:

• React: Component-based UI development.
• Tailwind CSS: Utility-first styling.
• Framer Motion: Animations and transitions.

Backend:

• Python (FastAPI): Backend APIs.
• MySQL: Database for user and project data.
• Redis: Caching for performance optimization.
• Celery: Background task processing.

AI Integration:

• GPT 5.4: For generating ad creatives and insights.
• Claude 4.6 Opas: For academic or coding work.
• Google Nano Banana: For image generation.

Orchestration:

• Docker: Containerization.
• Kubernetes: Server-side orchestration.

9. Assumptions and Constraints

• The backend APIs will be ready for integration during frontend development.
• The platform will primarily target desktop users but must be mobile-responsive.
• The design will prioritize dark mode, with no immediate plans for a light mode.
• The Google Ads Assets Generator will require integration with AI models for generating creative content.
• Selective re-run capability for SRD updates will depend on user-triggered inputs.

10. Glossary

• Glassmorphism: A design trend featuring semi-transparent elements with blurred backgrounds.
• Sage Green: A soft, muted green tone used for a calming and premium aesthetic.
• Google Ads Assets Generator: A tool for creating ad headlines, descriptions, images, and layouts.
• ROAS: Return on Ad Spend.
• Selective Re-run Capability: A feature allowing users to regenerate specific sections of the SRD based on updated inputs.

This document provides a comprehensive roadmap for building the royal-backend platform. Let me know if you'd like further refinements or additional details!