System Requirements Document for king

1. Introduction

KingSmart Sender is a modern SaaS platform designed for managing email campaigns with a premium UI/UX. The application allows users to connect multiple Gmail accounts, upload recipient lists, create and manage email campaigns, and track performance from a central dashboard. It is built using a tech stack that includes React, TypeScript, Tailwind CSS, and Supabase, with a focus on a modern, clean, and mobile-responsive design.

2. System Overview

KingSmart Sender provides a comprehensive solution for email campaign management, integrating with Gmail via Google OAuth. Users can manage multiple Gmail accounts, create campaigns, and monitor their performance through a responsive dashboard. The application supports a range of features, including CSV import, contact management, and detailed reporting. The design emphasizes a modern SaaS dashboard with glassmorphism accents, supporting both dark and light modes.

2a. Product Interpretation and Delivery Boundary

KingSmart Sender is delivered as a SaaS web application, accessible via a web browser. The application requires user authentication through email/password or Google sign-in. It integrates with Gmail for email sending and uses Supabase for backend services. The application is designed to be fully responsive, supporting both desktop and mobile devices. Future enhancements may include additional integrations and expanded analytics capabilities.

2b. Source Content Inventory

Not applicable as no content source directive was provided.

2c. Page Content and Component Coverage

Authentication Pages

• Login Page

  • Fields: Email, Password
  • Actions: Login, Forgot Password, Google Sign-In
  • States: Loading, Error, Success

• Registration Page

  • Fields: Email, Password, Confirm Password
  • Actions: Register
  • States: Loading, Error, Success

• Forgot Password Page

  • Fields: Email
  • Actions: Submit
  • States: Loading, Error, Success

• Email Verification Flow

  • Actions: Verify Email
  • States: Verification Pending, Success, Error

Dashboard

• Overview Cards

  • Connected Gmail Accounts, Active Campaigns, Emails Sent Today, Pending Emails, Delivery Success Rate

• Charts

  • Daily Emails Sent, Campaign Performance, Account Usage

• Recent Activity

  • Campaign Started, Campaign Paused, Gmail Account Connected, Email Delivery Events

Gmail Account Management

• Gmail Accounts Section
  • Actions: Connect, Add, Remove, Reconnect, Pause, Resume
  • Display: Gmail Address, Connection Status, Daily Usage, Last Activity, Account Health

Campaign Creation

• Campaign Builder
  • Fields: Campaign Name, Subject Line, Email Body, Sender Name, Reply-To Email, Template Selection
  • Features: Rich Text Editor, Live Preview, Save Draft, Duplicate, Schedule, Send Immediately

Email Template Editor

• Template Editor
  • Features: Save, Duplicate, Delete, Template Categories, Preview Mode
  • Merge Tags: {{first_name}}, {{last_name}}, {{email}}, {{company}}, {{website}}, {{custom_field}}

CSV Import System

• CSV Upload Functionality
  • Features: Drag and Drop, CSV Validation, Error Reporting, Duplicate Detection, Contact Count Preview, Import History

Contact Management

• Contacts Section
  • Features: Search, Filter, Tag, Import, Export, Delete, Segment

Sending Queue System

• Queue Management
  • Actions: Start, Pause, Resume, Stop, Retry Failed Sends
  • Display: Total Queued, Processing, Completed, Failed

Account Rotation Engine

• Sending Rotation System
  • Features: Configurable Sending Limits, Automatic Rotation, Usage Tracking, Skip Disconnected Accounts, Resume from Last Processed

Progress Tracking

• Live Campaign Monitor
  • Display: Campaign Status, Total Recipients, Emails Sent, Emails Remaining, Success Rate, Failure Rate, Estimated Completion Time, Progress Bar, Live Activity Feed

Reporting

• Campaign Reports
  • Metrics: Emails Sent, Delivery Success, Bounce Events, Open Tracking, Link Click Tracking, Account Performance
  • Actions: Export to CSV

Notifications

• Notification System
  • Triggers: Campaign Started, Campaign Completed, Campaign Paused, Account Disconnected, Import Completed, Errors Occur

Settings Page

• User Settings
  • Features: Profile Information, Password Change, Timezone, Notification Preferences, Account Limits, Sending Preferences

Admin Panel

• Admin Dashboard
  • Metrics: Total Users, Total Campaigns, Total Emails Sent, Revenue Tracking
  • Features: User Management, Subscription Management, Analytics

3. Functional Requirements

• As a user, I should be able to log in using email/password or Google sign-in to access the application. (explicit)
• As a user, I should be able to register for a new account using my email and a password. (explicit)
• As a user, I should be able to reset my password if I forget it. (explicit)
• As a user, I should be able to verify my email address upon registration. (explicit)
• As a user, I should be able to view a dashboard with key metrics and recent activity after logging in. (explicit)
• As a user, I should be able to connect multiple Gmail accounts using Google OAuth. (explicit)
• As a user, I should be able to create, edit, and manage email campaigns using a campaign builder. (explicit)
• As a user, I should be able to upload recipient lists via CSV and manage contacts. (explicit)
• As a user, I should be able to manage a sending queue and configure account rotation for email sending. (explicit)
• As a user, I should be able to track campaign progress and view detailed reports. (explicit)
• As a user, I should be notified of key events such as campaign completion or errors. (explicit)
• As an admin, I should be able to manage users, subscriptions, and view analytics in the admin panel. (explicit)

4. User Personas

• User

  • Responsibilities: Manage Gmail accounts, create and manage campaigns, upload contacts, track campaign performance, configure sending preferences.

• Admin

  • Responsibilities: Manage users and subscriptions, track overall platform analytics, ensure data security and compliance.

5. Core User Flows

User Login and Dashboard Access

1. User navigates to the login page.
2. User enters email and password or selects Google sign-in.
3. Upon successful authentication, the user is redirected to the dashboard.
4. User views overview cards, charts, and recent activity.

Gmail Account Management

1. User navigates to the Gmail Accounts section.
2. User connects a new Gmail account via Google OAuth.
3. User views connected accounts and manages them (add, remove, pause, resume).

Campaign Creation and Management

1. User navigates to the Campaign Builder.
2. User enters campaign details and selects a template.
3. User previews the campaign and saves it as a draft or schedules it.
4. User starts the campaign, which is added to the sending queue.

CSV Import and Contact Management

1. User navigates to the Contacts section.
2. User uploads a CSV file with recipient details.
3. System validates the CSV and reports any errors.
4. User manages contacts by searching, filtering, and tagging.

Sending Queue and Account Rotation

1. User configures sending limits per account.
2. System automatically rotates between accounts during campaign sending.
3. User monitors the sending queue and adjusts as necessary.

Progress Tracking and Reporting

1. User views live campaign monitor for real-time updates.
2. User accesses detailed reports and exports them to CSV.

Notifications and Settings Management

1. User receives notifications for key events.
2. User navigates to the settings page to update profile and preferences.

Admin Management

1. Admin accesses the admin panel.
2. Admin manages users and subscriptions.
3. Admin views platform analytics and revenue tracking.

6. Visuals Colors and Theme

• Muse: Michal Malewicz
• Palette (dark mode):
  • Background: #0F172A
  • Surface: #1E293B
  • Text: #FFFFFF
  • Primary: #3B82F6
  • Accent: #EC4899
  • Muted: #6B7280
• Typography:
  • Headings: Plus Jakarta Sans — Semi-bold, large, tight tracking, mixed case
  • Body: Manrope
  • Scale: 1.5 modular, 48/32/24/18/16
• Shape Language: Rounded rectangles, frosted glass-style cards, floating layers
• Layout: Responsive grid with generous spacing
• Motion: Gentle float and hover-lift, blur transitions, smooth gradient drift

7. Signature Design Concept

The landing page features a large frosted glass card at the center over a soft multicolor gradient background. Key product stats are displayed as glowing text overlays, creating a bold and sophisticated entrance to the application.

8. Interaction Model & Motion Direction

• Interaction Model: Animated
• Motion Tempo: Expressive
• Hero Dimensionality: Layered_2d
• Landing Hero Motion Brief: The hero section features a large frosted glass card with key metrics. Upon user interaction, the card gently lifts and reveals additional stats with smooth transitions and gradient drifts. In reduced-motion mode, transitions are simplified to fades.

9. Non-Functional Requirements

• The application must be fully responsive and support both desktop and mobile devices. (explicit)
• The interface should load quickly and provide a smooth user experience. (explicit)
• The application must ensure secure authentication and data protection. (explicit)
• The system should handle concurrent users efficiently without performance degradation. (required_inference)

10. Tech Stack

• Frontend: React, TypeScript, Tailwind CSS, Shadcn UI, React Router, React Query
• Backend: Supabase, Supabase Authentication, Supabase Database, Supabase Edge Functions
• Email Integration: Google OAuth, Gmail API

11. Assumptions and Constraints

• Users must have a Gmail account to use the email sending features. (explicit)
• The application relies on Supabase for backend services and data management. (explicit)
• The application must comply with relevant data protection regulations. (required_inference)

12. Glossary

• Gmail OAuth: A protocol that allows users to grant third-party access to their Gmail accounts without sharing passwords.
• CSV: Comma-Separated Values, a file format used to store tabular data.
• Campaign: A coordinated series of email messages sent to a list of recipients.
• Supabase: An open-source Firebase alternative providing backend services like authentication and database management.