System Requirements Document (SRD) for emerald-web

1. Introduction

This document outlines the system requirements for emerald-web, a web application named The Creators Hub, designed to serve as a platform for influencers to manage their profiles and connect with brands. The project aims to deliver a clean, modern, and mobile-friendly MVP (Minimum Viable Product) with essential features tailored to influencers' needs. This document has been prepared for Ronit Tanti, based in India, and considers locale-specific defaults such as OTP-based authentication and mobile-first design.

2. System Overview

The Creators Hub is a web application that allows influencers to create profiles, validate their social media presence, and specify their collaboration preferences. The platform includes:

• A user-friendly onboarding process for influencers.
• A personalized dashboard for influencers to manage their profiles.
• An admin panel for managing influencer data securely.
• Social media validation to ensure credibility.
• A clean and modern UI/UX optimized for mobile devices.

The system will use a robust tech stack, including React/Next.js for the frontend, Node.js/Firebase for the backend, and MongoDB/Firestore for the database. Authentication will be OTP-based, ensuring security and ease of use.

3. Functional Requirements

Influencer Features

• As an Influencer, I should be able to sign up/login using:
  • Name
  • Email (with OTP verification)
  • Phone Number (with OTP verification)
• As an Influencer, I should be asked to provide:
  • Instagram Profile URL (Mandatory)
    • Validate that the URL is a real Instagram profile.
    • Ensure the account has at least 1000 followers.
  • Facebook Profile URL (Optional)
  • YouTube Channel URL (Optional)
    • Validate these URLs as real profiles.
• As an Influencer, I should be asked:
  • "What do you bring here?" with options:
    • "Paid Collaboration"
    • "Barter (Free Products)"
    • "Brand Enquiry"
    • "All Of These"
  • "What type of products/content do you mainly create?" (Optional)
• As an Influencer, I should see a simple profile dashboard after login with:
  • Name
  • Email
  • Phone
  • Instagram ID
  • Other social links
  • Description
  • Status: "Logged in successfully"

Admin Features

• As an Admin, I should be able to view all influencer data, including:
  • Name
  • Email
  • Phone
  • Instagram URL
  • Facebook/YouTube (if provided)
  • Answers to questions
• As an Admin, I should ensure influencers cannot view other influencers' data.

UI/UX

• As a User, I should experience a clean, modern, and mobile-friendly interface.
• As a User, I should have a simple onboarding flow.

4. User Personas

Influencer

• Description: Social media content creators looking to connect with brands for collaborations.
• Goals: Showcase their profiles, validate their social media presence, and specify collaboration preferences.
• Pain Points: Difficulty in managing multiple social profiles and connecting with brands.

Admin

• Description: Platform administrators responsible for managing influencer data.
• Goals: Securely view and manage influencer profiles and ensure data integrity.
• Pain Points: Ensuring data security and preventing unauthorized access.

5. Visuals Colors and Theme

Color Palette

The color palette for The Creators Hub is designed to evoke creativity, professionalism, and trust:

• Background: #F9F9F9 (Soft White)
• Surface: #FFFFFF (Pure White)
• Text: #333333 (Dark Charcoal)
• Accent: #FF6F61 (Vibrant Coral)
• Muted Tones: #B0BEC5 (Cool Gray)

This palette ensures a clean and modern look while maintaining readability and visual appeal.

6. Signature Design Concept

Interactive Mosaic Landing Page

The homepage of The Creators Hub will feature an interactive mosaic of tiles representing different aspects of the platform. Each tile will:

• Animate subtly when hovered over (e.g., a slight zoom-in effect).
• Display a short description or icon (e.g., "Sign Up," "Dashboard," "Admin Panel").
• Be clickable, leading to the respective section of the website.

The background will feature a dynamic gradient animation that shifts between shades of coral and gray, creating a sense of movement and energy. Micro-interactions, such as button clicks and form submissions, will include smooth transitions and subtle sound effects to enhance the user experience.

7. Non-Functional Requirements

• Performance: The system should load within 2 seconds on a 4G connection.
• Scalability: The backend should support up to 10,000 active users initially, with room for expansion.
• Security: All user data must be encrypted in transit and at rest.
• Accessibility: The platform should comply with WCAG 2.1 Level AA standards.
• Localization: The system should support Indian locale settings, including OTP-based authentication.

8. Tech Stack

Frontend

• React or Next.js

Backend

• Node.js or Firebase

Database

• MongoDB or Firestore

Authentication

• Firebase Auth or OTP-based system

Additional Tools

• Docker for local orchestration
• Kubernetes for server-side orchestration

9. Assumptions and Constraints

Assumptions

• Influencers will provide valid social media URLs.
• The Instagram API will be available for follower count validation.
• The platform will initially target influencers in India.

Constraints

• The MVP must be delivered within 3 months.
• The system must operate on a limited budget, favoring open-source tools.

10. Glossary

• MVP: Minimum Viable Product
• OTP: One-Time Password
• API: Application Programming Interface
• WCAG: Web Content Accessibility Guidelines
• UI/UX: User Interface/User Experience