SeLeBox - Social & Entertainment Feature Expansion

Overview & Product Narrative

SeLeBox is a web application originally built to deliver digital audiobook and story content to users. To increase platform engagement and transform passive content consumption into an active community experience, the platform required a comprehensive social and media feature expansion.

Rather than replacing the established product, the engineering objective was to extend the live application with interconnected communication tools, user-generated media publishing, and modern video discovery patterns without interrupting active user accounts or existing monetization features.

Existing Entertainment Platform
        ↓
Audiobooks & Story Content
        ↓
Need for Richer User Interaction
        ↓
Social & Media Feature Expansion
        ├── Follow / Follow Back Graph
        ├── Direct & Group Messaging
        ├── User Media Feeds & Uploads
        ├── Continuous Vertical Video
        └── Offline Content Caching
        ↓
Interactive Social Entertainment Hub

Existing Platform Context

Before the social expansion, SeLeBox operated as a digital content platform. Established platform capabilities included:

Audiobook & Story Consumption Streaming and reading experience focused on popular romantic genres, including Pure Romance, Romantic-Comedy, and Hot Romance Love Stories.

Virtual Coin Economy Tokenized economy allowing users to acquire virtual coins and spend them to unlock premium story chapters or audio titles.

Content Unlocking & Coin Purchasing Gated content access mechanisms tied to account coin balances and transaction records.

Core Account Infrastructure Established user authentication, profile records, and responsive web interface layouts.

Note: These core capabilities establish product context and pre-existed my major social feature contributions.

My Role & Contribution Boundary

As a Part-Time Full-Stack Engineer at YenkoDev, my responsibilities centered on implementing frontend UI/UX components, integrating backend application services, developing social and media features, and maintaining existing codebase areas.

EXISTING PLATFORM

Audiobook streaming engine
Romantic story catalog
Virtual coin economy
Coin purchasing workflows
Base user account schemas
Initial responsive UI templates

MY CONTRIBUTIONS

Follow / Follow Back social relationship graph
Direct Chat person-to-person messaging
Group Chat multi-user conversations
Feed services & post retrieval
Image and video upload pipeline
Continuous vertical video feed
Like, Comment, and Share interactions
Offline video caching implementation
Appwrite service integration & maintenance

Product Evolution Breakdown

The addition of social capabilities transformed SeLeBox from a one-way content consumption app into a two-way social entertainment ecosystem. Users who previously visited solely to listen to audiobooks could now follow creators, join discussion group chats, post user-generated media, and consume vertical video clips.

Phase 1: Content Foundation Audiobook listening, story browsing, coin unlocking, and chapter purchases.

Phase 2: Social & Community Layers Profiles, social relationships, direct/group chat, media feeds, and infinite video discovery.

Interconnected Feature Architecture

Rather than existing as isolated modules, new features were engineered as an interconnected workflow where profile relationships directly empowered communication and media sharing:

User Profiles
      ↓
Follow / Follow Back Graph
      ↓
┌──────────────────────┬──────────────────────┐
│                      │                      │
Messaging Subsystem     Feed Subsystem        Social Discovery
│                      │                      │
├── Direct Chat        ├── Media Post Uploads ├── Continuous Vertical Video
└── Group Chat         └── Feed Retrieval     └── Like / Comment / Share
                              ↓
                        Media Consumption
                              ↓
                        Offline Video Caching

Implemented profile-level social relationship capabilities. The social graph enabled users to connect with story creators and fellow community members.

Key functionality:

Follow / Unfollow: Establish or remove social connections from user profiles.
Follow Back Recognition: Automatically identify mutual social relationships.
Relationship Verification: Provide relationship status checks required by direct messaging permission boundaries.

Permission Foundation Social relationships serve as a prerequisite check for direct messaging eligibility, preventing unsolicited messaging.

Messaging Subsystem - Direct & Group Chat

Designed and integrated communication tools to foster user interaction directly within the application.

Direct Messaging (Person-to-Person) Enables private chat conversations between users with verified social relationships. Message flows follow `User → Relationship Check → Conversation → Message Item`.

Group Chat (Multi-User Conversations) Extends messaging capabilities to support multi-user group chat rooms where community members discuss shared stories, genres, and platform content.

User A Initiates Chat
        ↓
Check Relationship with User B
        ↓
Valid Social Connection?
  ┌─────┴────────────────┐
  NO                     YES
  ↓                      ↓
Prompt Follow      Load / Create Conversation
                         ↓
                   Send / Receive Messages

Feed Services & Media Uploads

Developed user-generated feed services allowing community members to publish visual updates, story reviews, and media clips.

The media upload pipeline handles post composition, file validation, storage upload, metadata persistence, and feed list updates.

User Creates Post
        ↓
Attach Image / Video File
        ↓
Upload File to Appwrite Storage
        ↓
Persist Post Metadata (Caption, Author, File Ref)
        ↓
Update Feed List Output

Continuous Vertical Video Experience

Implemented a continuous vertical video browsing feed providing an infinite content stream optimized for mobile and desktop screens.

Features and interactions:

Continuous Video Playback: Smooth auto-play transition as the user scrolls vertically through video clips.
Like Interactions: Instant feedback toggle allowing users to appreciate video content.
Comment Threads: Contextual comment overlays for community discussion.
Social Sharing: Action triggers enabling content link propagation.

Engagement Engine Combines video streaming with real-time social feedback indicators, increasing daily active session duration.

Offline Video Caching

Implemented client-side caching mechanisms for selected video content to support playback under limited or interrupted network connectivity.

When users mark videos or access content under stable connections, media resources are cached locally so playback remains seamless during network drops.

Connectivity Resilience Ensures selected video playback continues without buffering errors when transitioning across weak mobile networks.

Backend Services - Appwrite & Firebase Transition

Development was executed in a dual backend-service environment. The engineering direction focused on gradually shifting application services toward Appwrite while maintaining legacy integrations with Firebase.

Worked within a backend-service environment using Appwrite alongside remaining Firebase functionality, with the application gradually moving away from Firebase.

React Frontend Application
        ↓
Application Integration Layer
        ↓
Appwrite Services (Primary Growth)
├── Authentication & Sessions
├── Database Documents & Feeds
└── File Storage for Media Uploads
        ↓
Firebase Services (Diminishing Legacy Role)

System & Production Constraints

Existing Live Production Product All feature additions were required to integrate seamlessly into an active application with existing users, content records, and coin balances.

Feature Interdependence Social graph, messaging, feeds, media uploads, and video interactions were deeply connected, requiring careful data flow design.

Multi-Backend Coexistence New Appwrite feature services had to operate harmoniously with legacy Firebase dependencies during the multi-month transition.

Responsive Media UX Media-heavy feeds and video playback required optimization across diverse mobile and desktop screen sizes.

Key Technical Decisions

1. Extend Existing Platform Architecture

Context: Production platform had live users and established coin monetization workflows.

Decision: Extend existing React frontend components and integrate new Appwrite services without disrupting core audiobook behavior.

2. Couple Direct Messaging to Social Relationship Verification

Context: Unrestricted user messaging risked spam and poor user experiences.

Decision: Require verified Follow/Follow Back status before initiating direct chat conversations.

3. Streamlined Media Upload Pipeline

Context: User-generated feeds required reliable image and video file handling.

Decision: Direct file uploads to Appwrite Storage with atomic document creation for post metadata.

4. Continuous Vertical Video Stream Integration

Context: Platform needed high-engagement video discovery functionality.

Decision: Build a continuous vertical video feed combining auto-play behavior with contextual Like, Comment, and Share interactions.

5. Client-Side Video Caching

Context: Mobile users experienced buffering interruptions on unstable networks.

Decision: Implement video resource caching for selected content to preserve playback continuity offline.

Verified Qualitative Outcomes

Enhanced Platform Engagement Expanded SeLeBox beyond passive audiobook consumption into an interactive social ecosystem.

Connected Community Interactions Linked user profiles with Follow relationships, direct messaging, and group discussion rooms.

Rich User-Generated Media Feeds Enabled community publishing through structured image and video post uploads.

Modern Video Discovery Introduced continuous vertical video browsing with contextual social feedback tools.

Resilient Video Availability Supported offline media access for selected video content under limited connectivity.

Backend Modernization Progress Contributed to the platform's gradual transition from Firebase toward Appwrite services.

Lessons & Retrospective

Interconnected Product Engineering

SeLeBox reinforced that extending an existing product requires understanding how seemingly separate features affect one another. Profiles, follow graphs, direct chat, group rooms, media uploads, and video feeds became interconnected product behaviors rather than independent pages.

Evolving Service Boundaries

Working within an environment shifting from Firebase to Appwrite emphasized the importance of writing adaptable frontend integration code that abstracts backend service specifics behind clean data handlers.