Abdullah System Requirements Document

Introduction

The Abdullah project aims to develop a public web application that allows users to sign up, connect their social media accounts via OAuth, and upload videos for automatic publishing across multiple platforms. This application is designed to simplify the process of video publishing by handling API credentials internally and providing a seamless user experience.

System Overview

The Abdullah application will provide users with the ability to manage their social media video publishing from a single platform. Users will be able to authenticate, connect their social media accounts, upload videos, and publish them across multiple platforms without needing to manage API keys themselves. The application will handle all backend processes, ensuring secure storage and management of user data and credentials.

Source Content Inventory

• OAuth Integration: The application will integrate OAuth for user authentication and social media account connections.
• Video Processing: Utilizes FFmpeg for video quality enhancement and compliance checks with platform requirements.
• Cloud Storage: Temporary storage of video files during processing.
• Background Job Queue: Asynchronous processing of video uploads to avoid UI blocking.
• Security: Encryption of stored OAuth tokens and secure handling of API credentials.

Functional Requirements as Story Points

• As a User, I should be able to sign up and log in using my email and password.
• As a User, I should be able to access a dashboard after logging in.
• As a User, I should be able to connect my social media accounts via OAuth without needing my own API keys.
• As a User, I should see a "Connect Accounts" page with buttons for each platform.
• As a User, I should be able to see the connection status of each platform.
• As a User, I should be able to disconnect a platform at any time.
• As a User, I should be able to upload videos via drag-and-drop or file picker.
• As a User, I should see an upload progress bar during video uploads.
• As a User, I should be able to edit the title, description, and tags of my video before publishing.
• As a User, I should receive suggestions for relevant trending hashtags/tags.
• As a User, I should be warned if my video does not meet platform requirements.
• As a User, I should be able to select which connected platforms to publish my video to.
• As a User, I should be able to select a Facebook Page for publishing.
• As a User, I should see a live status dashboard showing the publish status per platform.
• As a User, I should be able to view a history of past uploads with their publish status.
• As a User, I should be able to retry failed uploads.

User Personas

• Admin: Manages the application settings and oversees user activities.
• User: Regular users who sign up, connect their social media accounts, and upload videos.

Core User Flows

• User signs up -> logs in -> connects social media accounts -> uploads video -> edits video details -> selects platforms -> publishes video -> views status dashboard.
• User checks history dashboard -> views past uploads -> retries failed uploads.

Visuals Colors and Theme

• primary: #1E90FF (Dodger Blue)
• primary_light: #63B8FF (Light Dodger Blue)
• secondary: #FF6347 (Tomato)
• accent: #32CD32 (Lime Green)
• highlight: #FFD700 (Gold)
• bg: #F0F8FF (Alice Blue)
• surface: rgba(255, 255, 255, 0.9)
• text: #000000 (Black)
• text_muted: #696969 (Dim Gray)
• border: rgba(0, 0, 0, 0.1)

Signature Design Concept

The homepage will feature an interactive "Video Publishing Journey" animation. Users will see a dynamic workflow where a video file travels through various stages: Upload, Processing, and Publishing. Each stage will have animated icons that transform as the video progresses. Users can hover over each stage to see detailed information and tips. The animation will be built using motion/react for smooth transitions and interactivity.

Landing Hero Motion Brief

The hero section will depict a video file being uploaded, processed, and published. The animation will loop every 10 seconds, showing the transformation of the video as it moves through each stage. Users can interact by clicking on stages to learn more about the process. The animation will be responsive, adapting to different screen sizes while maintaining clarity and engagement.

Interaction Model & Motion Direction

• Intended Interaction Model: Animated
• The landing page will feature moderate scroll-triggered reveals and hover transitions. Interactive elements will have spring physics for a polished user experience. Each section will have a unique mechanic, such as morphing SVGs or kinetic typography, to maintain user engagement.

Non-Functional Requirements

• The application must be mobile-responsive and accessible.
• OAuth tokens must be securely encrypted and stored.
• The system should handle high volumes of video uploads without performance degradation.

Tech Stack

• Frontend: React
• Backend: Node.js/Express
• Database: PostgreSQL or MongoDB
• Cloud Storage: AWS S3 or similar
• Background Processing: Node.js with a job queue library like Bull or Kue

Assumptions and Constraints

• Users will have existing accounts on the social media platforms they wish to connect.
• The application will manage API credentials internally, ensuring they are not exposed to users.
• The system will comply with each platform's API usage policies and guidelines.

Glossary

• OAuth: Open standard for access delegation, commonly used for token-based authentication.
• FFmpeg: A multimedia framework used for video processing.
• API: Application Programming Interface, a set of tools for building software applications.
• UI: User Interface, the space where interactions between humans and machines occur.