Welcome to ReelsX

System requirements

Before you run the installer, ensure the target server meets the minimum requirements:

• PHP 8.2+ with extensions: OpenSSL, PDO, Mbstring, Tokenizer, JSON, cURL, Fileinfo, BCMath.
• Database: MySQL 8.0+ or MariaDB 10.5+.
• Queue backend (database driver supported by default; Redis optional).
• Writable storage/ and bootstrap/cache/ directories.

cPanel: create database & upload files

Database & user

1. Open MySQL® Databases in cPanel and create a database (for example reelsx_db).
2. Create a database user with a strong password, then add the user to the database granting ALL PRIVILEGES.

Upload application files

1. Zip the project locally (excluding node_modules, storage/logs, if you prefer running composer on the server).
2. In File Manager go to public_html/ (or the target directory) and upload the archive, then extract it.








Without terminal access, you can complete migrations by visiting /install after uploading.

Codecanyone setup wizard

ReelsX bundles a polished Codecanyone-style wizard for first-time installs. Browse to /install after configuring your vhost or running php artisan serve.

Step 1: Welcome

Step 2: Requirements

Step 3: Permissions

Step 4: Environment

Step 5: Database

Step 6: Finish

Interface Preview

Manual installation fallback

If you cannot access the browser wizard (headless servers, CLI-only environments), follow these steps:

1. Copy the environment template and update manually:

   cp .env.example .env
   php artisan key:generate

2. Configure database credentials in .env, ensure the database exists, then run:

   php artisan migrate --force
   php artisan db:seed --force

3. Run final commands to clear caches:

   php artisan optimize:clear
   php artisan storage:link

4. Create the installation marker to skip the wizard:

   php -r "file_exists('storage/installed') || touch('storage/installed');"

Folder Permissions Guide

The web server needs write permissions on specific directories. If the setup wizard warns about permissions or if you receive HTTP 500 errors, apply the correct permissions below.

Required Directories

• storage/ (including all subdirectories: app, framework, logs)
• bootstrap/cache/

Method 1: Linux / Unix Command Line (Recommended)

# Change ownership to the web server user
sudo chown -R www-data:www-data storage bootstrap/cache

# Grant read, write, and execute permissions
sudo chmod -R 775 storage bootstrap/cache

Method 2: cPanel File Manager (Shared Hosting)

1. Log in to cPanel and open File Manager.
2. Navigate to the project root directory.
3. Right-click on the storage folder → Change Permissions.
4. Set to 775 and click save.
5. Repeat for bootstrap/cache.

Production VPS Deployment (LEMP Stack)

For high-performance production hosting, we recommend a VPS running Ubuntu Server with Nginx.

1. Install PHP, Nginx, & MySQL

sudo apt update && sudo apt upgrade -y
sudo apt install software-properties-common -y
sudo add-apt-repository ppa:ondrej/php -y
sudo apt update
sudo apt install nginx mysql-server php8.2-fpm php8.2-mysql php8.2-common php8.2-curl php8.2-xml php8.2-bcmath php8.2-mbstring php8.2-tokenizer php8.2-zip php8.2-gd php8.2-intl -y

2. Configure the Database

sudo mysql_secure_installation
sudo mysql

CREATE DATABASE reelsx CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;
CREATE USER 'reelsx_user'@'localhost' IDENTIFIED BY 'your_strong_password';
GRANT ALL PRIVILEGES ON reelsx.* TO 'reelsx_user'@'localhost';
FLUSH PRIVILEGES;
EXIT;

3. Upload & Configure Application

curl -sS https://getcomposer.org/installer | php
sudo mv composer.phar /usr/local/bin/composer

cd /var/www/reelsx
cp .env.example .env
composer install --no-dev --optimize-autoloader

# Edit .env: APP_ENV=production, APP_DEBUG=false, DB_* values

php artisan key:generate
php artisan migrate --force
php artisan db:seed --force
php artisan storage:link

sudo chown -R www-data:www-data /var/www/reelsx
sudo find /var/www/reelsx -type f -exec chmod 644 {} \;
sudo find /var/www/reelsx -type d -exec chmod 755 {} \;
sudo chmod -R 775 /var/www/reelsx/storage /var/www/reelsx/bootstrap/cache

4. Configure Nginx Server Block

server {
    listen 80;
    server_name yourdomain.com;
    root /var/www/reelsx/public;

    add_header X-Frame-Options "SAMEORIGIN";
    add_header X-Content-Type-Options "nosniff";

    index index.php;
    charset utf-8;

    location / {
        try_files $uri $uri/ /index.php?$query_string;
    }

    error_page 404 /index.php;

    location ~ \.php$ {
        fastcgi_pass unix:/var/run/php/php8.2-fpm.sock;
        fastcgi_param SCRIPT_FILENAME $realpath_root$fastcgi_script_name;
        include fastcgi_params;
    }

    location ~ /\.(?!well-known).* {
        deny all;
    }
}

sudo ln -s /etc/nginx/sites-available/reelsx /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl restart nginx

5. Secure with SSL (Let's Encrypt)

sudo apt install certbot python3-certbot-nginx -y
sudo certbot --nginx -d yourdomain.com

6. Queue Worker (Supervisor)

[program:reelsx-worker]
process_name=%(program_name)s_%(process_num)02d
command=php /var/www/reelsx/artisan queue:work --sleep=3 --tries=3 --max-time=3600
autostart=true
autorestart=true
user=www-data
numprocs=2
redirect_stderr=true
stdout_logfile=/var/www/reelsx/storage/logs/worker.log

sudo supervisorctl reread && sudo supervisorctl update
sudo supervisorctl start reelsx-worker:*

7. Cron Job (Task Scheduler)

sudo crontab -u www-data -e
# Add:
* * * * * cd /var/www/reelsx && php artisan schedule:run >> /dev/null 2>&1

Demo accounts

The seeders provision default accounts for quick testing with the default password 12345678.

Update System

Keeping your system up-to-date is crucial for security and new features.

One-Click Updater

1. Login to the Admin Panel.
2. Navigate to /admin/updater.
3. If an update is available, click Update System Now.

Feature Overview

Environment keys

All configuration lives in your .env file. Key variables:

Admin Panel

Access at /admin — automatically redirects to /admin/login when not authenticated, or straight to the dashboard if already logged in.

Web Application & Frontend User Guide

ReelsX includes a state-of-the-art, responsive web application engineered with Laravel 12 Blade, modern CSS3 design variables, and dynamic JavaScript. It offers a native desktop and mobile browser experience matching TikTok and Instagram Reels.

1. Immersive Shorts Video Feed

• Full-Height Snap Player: Smooth vertical scrolling with automatic viewport snapping and video preloading.
• Keyboard Controls: Users on desktop can navigate seamlessly:
  • Up Arrow (↑) / Down Arrow (↓): Jump to previous / next reel
  • Spacebar: Toggle Play / Pause
  • M key: Toggle Audio Mute / Unmute
• Theme Switcher: One-click toggle between Obsidian Dark Mode and Crisp Light Mode, remembered across sessions.
• Audio Equalizer: Live animated equalizer bars indicate background audio playback with direct links to the audio hub.

2. Web Creator Studio (Upload Workflow)

Located at /create, creators can publish short videos with rich metadata:

• Drag-and-Drop Dropzone: Upload MP4, WebM, or MOV files up to 100MB with instant duration and file size validation.
• Custom Cover Selection: Pick custom video cover thumbnails (.jpg, .png, .webp).
• Audio Sync Hub: Choose between original video audio or attach trending music tracks from the platform sound library.
• Playlists & Series: Attach reels directly to an existing playlist or create a new public series on the fly.
• Monetization Toggle: Choose between standard free reels or exclusive paid reels with custom pricing.

3. Creator Profiles & Discovery Hub

• Profile Showcase (/@username): Displays cover banners, avatar badge, verified blue checkmark, creator bio, website link, and a 5-metric performance summary bar (Reels, Views, Likes, Followers, Following).
• Multi-Tab Galleries: View Published Reels, Curated Playlists, Liked Videos, and Purchased/Saved Library.
• Explore & Search (/explore): Real-time discovery grid with trending hashtags chips, top audio tracks, creator recommendations, and search filters.

4. Direct Messaging & Social Features

• Real-Time 1-on-1 Chat (/chat): Delta polling (3s) delivers fast message exchanges with photo attachments.
• Threaded Comments: Multi-level nested replies and comment likes.
• Notifications (/notifications): Instant activity alerts for new followers, likes, comments, and rewards.

Site Branding & Dynamic Theme Customizer

ReelsX allows administrators to fully customize platform branding and color schemes directly from the admin panel without editing any code.

1. Logo & Favicon Dropzones

• Site Logo: Upload PNG, SVG, or WebP logos (recommended: 250×60px). Features an interactive drag-and-drop zone with instant preview and file size badge.
• Favicon: Upload 32×32px .ico or .png favicons with live transparency preview.

2. Dynamic Primary Brand Color

Admins can pick any custom primary brand color using the integrated HTML5 color swatch picker or typing a HEX code (e.g. #FE2C55, #6366F1, #00C8FF):

• Quick Presets: Includes 8 curated one-click brand colors (TikTok Rose, Neon Crimson, Electric Purple, Royal Indigo, Cyber Cyan, Emerald Green, Amber Gold, Sunset Orange).
• Live CSS Theme Injection: The selected color dynamically generates CSS custom variables (--primary, --primary-hover, --primary-gradient, --shadow-glow), instantly restyling all website buttons, navigation badges, and glowing highlights across all pages.

Paid Content, Digital Wallet & Creator Monetization

ReelsX features a comprehensive monetization engine enabling creators to earn from their content and administrators to collect platform fees.

1. Exclusive Paid Reels

• Creators can toggle Paid Exclusive Reel during upload and specify an unlock price.
• Viewers see a blurred video preview card with a lock icon, unlock price, and a direct "Unlock Now" modal.
• Upon unlocking, credits are instantly transferred from the viewer's wallet to the creator's earnings balance (minus any admin commission).
• Purchased reels are permanently accessible in the viewer's Purchased Reels Library.

2. Digital Wallet & Top-Ups (/wallet)

• Stripe Card Payments: Native card top-up checkout via Stripe.
• Offline / Manual Bank Transfer: Users can select offline bank payment methods, view bank transfer instructions, and upload receipt images. Admins review and approve offline deposits from the Admin → Finance → Offline Payments queue.
• Creator Withdrawals: Creators can submit payout requests once their balance reaches the minimum threshold. Admins process and mark payouts from the dashboard.

3. Daily Gamification & Referral Hub (/rewards)

• Daily Login Streaks: Users earn bonus points every day they visit the platform.
• Task Checklist: Completing tasks (watching videos, sharing content, inviting members) rewards users with redeemable points.
• Affiliate Referrals: Every user gets a personalized referral link to invite friends and earn bonus rewards.

Post-install checklist

1. Log in to /admin with admin@example.com / password.
2. Go to Settings → General and update site name, logo, and contact email.
3. Go to Settings → Email and configure SMTP credentials. Send a test email.
4. Go to Settings → Payment and enter your Stripe keys.
5. Go to Settings → Storage and configure S3/DigitalOcean Spaces if needed.
6. Go to Settings → Rewards and configure point values and payout thresholds.
7. Go to Settings → Referral and configure the referral bonus amount.
8. Delete or update the seeded test accounts if deploying to production.
9. Set APP_DEBUG=false in .env for production.

Troubleshooting

Common SSL & HTTPS Setup Issues

Setting up SSL (HTTPS) is required for secure communication between the Flutter mobile app and the Laravel backend. Here are the most common SSL issues less-technical buyers encounter and how to fix them easily.

1. Cloudflare "Too Many Redirects" (Redirect Loop)

Symptom: Your site displays ERR_TOO_MANY_REDIRECTS or fails to load when proxied through Cloudflare.

Cause: Cloudflare SSL mode is set to "Flexible", causing Cloudflare to contact your server over HTTP while your server forces an HTTPS redirect.

Fix: Log in to your Cloudflare Dashboard → go to SSL/TLS tab → change the encryption mode to Full or Full (Strict).

2. Mixed Content Errors (HTTP Assets on HTTPS Site)

Symptom: Images, avatars, or media files don't display or show browser security warnings.

Cause: Your backend is configured with an http:// URL instead of https:// in your environment file.

Fix: Open your backend .env file and update APP_URL:

APP_URL=https://yourdomain.com

Then run php artisan optimize:clear in your terminal or cPanel terminal to clear cached configurations.

3. Mobile App Certificate Verification Failed (Handshake Error)

Symptom: The mobile app cannot connect to the backend or logs HandshakeException: CERTIFICATE_VERIFY_FAILED.

Cause: Self-signed certificate, expired certificate, or incomplete certificate chain (missing intermediate CA bundle on your server).

Fix:

• Use a free trusted certificate authority like Let's Encrypt or cPanel AutoSSL. Avoid self-signed SSL certificates in production.
• On custom VPS Nginx/Apache servers, ensure you link the fullchain.pem file (which contains the root and intermediate certificates) instead of just cert.pem.

4. cPanel AutoSSL Not Generating

Symptom: cPanel AutoSSL fails or status says "Domain does not resolve to IP".

Fix:

• Verify your domain's DNS A Record points directly to your cPanel server's IP address.
• If using Cloudflare, temporarily set the DNS proxy status to DNS Only (grey cloud), run AutoSSL in cPanel, then re-enable Cloudflare proxy (orange cloud).

5. HTTPS API Connection Test

To verify your SSL setup is working properly before testing the mobile app, open your browser and visit:

https://yourdomain.com/api/reels

If your browser shows a green padlock icon without any warnings and returns a JSON response, your backend SSL is correctly configured!

Frequently Asked Questions

Common server environment compatibility questions and deployment guidelines to help buyers set up the ReelsX platform smoothly.

Flutter App Configuration

Complete guide to re-branding, configuring, and publishing the ReelsX mobile application.

Prerequisites

• Flutter SDK: 3.19.0+
• Dart SDK: 3.3.0+
• IDE: VS Code or Android Studio
• macOS: Required for iOS builds
• Android SDK: 36 (set explicitly in build.gradle.kts)

Installation

1. Unzip the reelsx_app directory.
2. Open the folder in your IDE.
3. Install dependencies:

   flutter pub get

4. Run the app:

   flutter run

Connect to Backend

Link the mobile app to your installed Laravel server.

1. Open lib/config/app_config.dart.
2. Update baseUrl (must end with /api):

   static const String baseUrl = 'https://your-domain.com/api';

3. Update the app name and tagline:

   static const String appName    = 'ReelsX';
   static const String appTagline = 'Create. Share. Go Viral.';

Deep Linking Setup

ReelsX includes a built-in deep linking system so shared reel links open directly in the mobile app when installed.

1. Configuration in app_config.dart

// lib/config/app_config.dart
static const String defaultDeepLinkBaseUrl = 'https://yourdomain.com';
static const String deepLinkScheme         = 'reelsx';   // custom URI scheme
static const String deepLinkHost           = 'reel';

2. How Deep Links Work

• Web Links: Tapping https://yourdomain.com/reel/42 opens the reel directly in the app.
• Custom Scheme: reelsx://reel/42 launches the app immediately.

3. Native Platform Registration

Android: Registered in android/app/src/main/AndroidManifest.xml under <intent-filter> tags.

iOS: Registered in ios/Runner/Info.plist under CFBundleURLTypes.

App Name & Package ID

Change App Display Name

Android: Open android/app/src/main/AndroidManifest.xml and update:

android:label="Your App Name"

iOS: Open ios/Runner/Info.plist and update:

<key>CFBundleDisplayName</key>
<string>Your App Name</string>

Change Package Name / Bundle ID

Android Specifics

1. Update applicationId in android/app/build.gradle.kts.
2. Rename the folder android/app/src/main/kotlin/com/reelsx/app/ to match your new package path.
3. Update AndroidManifest.xml package attribute.

iOS Specifics

1. Open ios/Runner.xcodeproj in Xcode.
2. Select the Runner target.
3. Update the Bundle Identifier field.

Logo & Splash Screen

Change App Icon

We use the flutter_launcher_icons package to generate icons for all devices.

1. Replace assets/images/logo/logo.png with your logo (1024×1024px, no transparency recommended).
2. Update the icon path in pubspec.yaml under flutter_launcher_icons if needed.
3. Run the generator:

   dart run flutter_launcher_icons

4. This generates icons for both Android and iOS automatically.

Change Splash Screen

1. The splash screen shows only the logo on a solid background — no additional background image.
2. Replace assets/images/logo/logo.png with your own logo file.
3. To change the splash background color, edit the backgroundColor in lib/pages/splash/splash_page.dart.

Colors & Theme

All brand colors are defined centrally in lib/config/app_config.dart.

1. Open lib/config/app_config.dart.
2. Update the brand color constants:

   // Primary accent (used for buttons, icons, highlights)
   static const Color primaryColor   = Color(0xFFFF2D55);  // Change this
   
   // Secondary gradient color
   static const Color secondaryColor = Color(0xFF833AB4);  // Change this

3. These two values propagate automatically across the entire app — no other files need editing.

Theme Mode

The app supports both light and dark mode. The user can switch theme from Settings inside the app. The default mode is controlled by SettingsController which reads from GetStorage.

Language & Localization

The app supports multiple languages using GetX translations.

Adding a New Language

1. Go to lib/translations/ directory.
2. Create a new translation file, e.g., es_ES.dart for Spanish.
3. Copy the key map from en_US.dart and translate the string values.

Registering the Language

1. Open lib/translations/app_translations.dart.
2. Import your new file and add it to the keys map:

   @override
   Map<String, Map<String, String>> get keys => {
     'en_US': enUS,
     'es_ES': esES,  // Add this
   };

Android Build & Signed Release

To publish on Google Play, you must sign the app with a release keystore.

Step 1: Verify SDK Versions

Open android/app/build.gradle.kts and confirm:

android {
    compileSdk = 36   // must be explicit integer (NOT flutter.compileSdkVersion)
    defaultConfig {
        targetSdk = 36
        minSdk    = 21
    }
}

Step 2: Generate a Keystore File

Run the keytool command to create your keystore file. Replace <path-to-keystore-file> with the file path where you want to store your generated keystore file:

keytool -genkey -v -keystore <path-to-keystore-file> -keyalg RSA -keysize 2048 -validity 10000 -alias upload

Keep your keystore file safe and never commit it to version control.

Step 3: Create key.properties

Create a file named key.properties inside your app's android/ directory (i.e. android/key.properties):

storePassword=your_keystore_password
keyPassword=your_key_password
keyAlias=upload
storeFile=<path-to-keystore-file>

Step 4: Update build.gradle.kts Signing Config

val keystorePropertiesFile = rootProject.file("key.properties")
val keystoreProperties = java.util.Properties()
if (keystorePropertiesFile.exists()) {
    keystoreProperties.load(java.io.FileInputStream(keystorePropertiesFile))
}

android {
    signingConfigs {
        create("release") {
            keyAlias     = keystoreProperties["keyAlias"]     as String
            keyPassword  = keystoreProperties["keyPassword"]  as String
            storeFile    = file(keystoreProperties["storeFile"] as String)
            storePassword = keystoreProperties["storePassword"] as String
        }
    }
    buildTypes {
        release {
            signingConfig = signingConfigs.getByName("release")
        }
    }
}

Step 5: Build

# App Bundle (recommended for Google Play)
flutter build appbundle --release

# Standalone APK
flutter build apk --release

iOS Build & App Store Publish

iOS requires code signing via Apple Developer certificates before distribution.

Step 1: Open project in Xcode

open ios/Runner.xcworkspace

Step 2: Setup Signing & Capabilities

1. In the Xcode sidebar, select the top-level Runner project node.
2. Select the Runner target.
3. Go to the Signing & Capabilities tab.
4. Enable "Automatically manage signing".
5. Select your registered Apple Developer Team from the dropdown.

Step 3: Configure Bundle Identifier

Under the General tab, set the Bundle Identifier to match your Apple App ID (e.g. com.yourdomain.reelsx).

Step 4: Archive and Upload

1. Select Any iOS Device (arm64) as the active destination.
2. From the menu: Product → Archive.
3. When the Organizer window opens, click Distribute App.
4. Follow the prompts to upload to App Store Connect / TestFlight.

API Endpoints

ReelsX uses a RESTful API for all Flutter ↔ Laravel communication. Include Accept: application/json on all requests. Protected endpoints require Authorization: Bearer {token}.

Authentication

Reels Feed

Users & Profiles

Chat & Messaging

Rewards, Wallet & Other