preloader
Profile Menu

Overview

Welcome to Zepid LMS a complete and modern Learning Management System built using Next.js, Laravel, and Flutter for seamless web and mobile experiences.

Zepid LMS empowers multi-branch institutions, online course platforms, and training academies with advanced learning and user-management tools. It includes a powerful Admin Panel (Laravel 11) for managing users, courses, assignments, reports, payments, and institutional settings.

It also offers a responsive web app and students and instructors panels, alongside a dedicated Android mobile app for learning on the go.

Core Modules:

  • Responsive Website (Student & Instructor panels)
  • Admin Dashboard (Backend)
  • Android Mobile Application

Contact support: support@thetork.com

Basic Prerequisites

Zepid LMS is a full-stack system for web and mobile platforms. To install, configure, and publish the system with your own branding, you should have a basic understanding of server management and mobile application development.

  • Code Editors/IDEs โ€” Recommended: Android Studio (for mobile), VS Code (for web)
  • Flutter SDK & JDK installed and properly configured in IDE
  • Real production server knowledge โ€” Recommended: cPanel-based Linux server
  • Server management basics (Apache/Nginx, database config, SSL setup)
  • Basic understanding of PHP, Laravel, Dart, and Flutter for customization (optional but helpful)
  • Google Firebase setup knowledge (Push Notification, Authentication, etc.)
  • Git, Node.js 16+, NPM/Yarn installed
  • PHP 8+ with Composer installed
  • MySQL 8 / PostgreSQL 13+ database knowledge

Server Prerequisites

  • PHP 8.2+ and MySQL 8+ / PostgreSQL 13+
  • Web Server: Apache (mod_rewrite enabled) / Nginx supported
  • Required PHP Extensions: OpenSSL, PDO, Mbstring, Tokenizer, XML, Zip, Fileinfo, GD, JSON, BCMath, Ctype, Sodium
  • Composer installed globally
  • Minimum Server Requirements:
    • RAM: 2GB minimum (4GB recommended)
    • CPU: 2 Core+
    • Storage: 10GB+
  • SSL Certificate for secure domain (Recommended)

Mobile App Prerequisites

  • Android Studio (latest stable version)
  • Flutter SDK (3.35.4 stable) installed & PATH configured
  • JDK 17 installed
  • Xcode (latest version) for iOS build and publishing
  • Apple Developer Account required for iOS publishing
  • Google Play Console account for Android publishing

Flutter SDK Setup

Zepid LMS mobile applications are built using Flutter. To build, customize, or publish the mobile app, install the Flutter SDK and configure your development environment (Android/iOS). Download the latest stable Flutter SDK from flutter.dev and follow the official setup instructions for your platform:

After installation, run the following command to verify setup:

  flutter doctor

Local Server Setup (Optional)

If you want to run the admin panel in your local machine for test purposes or need to customize something you can install but we recommend test the system in a live server.

Website Mandatory Setup

Website Logo

To update the website branding, replace the default logo by updating the file in <project>/public/assets. Replace logo.svg with your own logo file.

Placeholder / Loader Image

Replace the default loader image in <project>/public/assets (e.g., preloader.svg) with your preferred image.

Favicon

Update the website favicon by replacing favicon.png in <project>/public/ with your desired icon.

Website Title

Set your website title in <project>/pages/_document.js (or next.config.js depending on setup) inside the <title> tag:

 <title>My LMS</title>
Student & Instructor Panels

After deployment, users can access their panels using the following URLs or navigation links:

  • Student Panel: Manage enrolled courses, view progress, attempt quizzes, download certificates, and track activities.
  • Instructor Panel: Create and manage courses, upload content, manage students, view analytics, and handle assignments.
Required Dependencies

Before running the website, ensure the following are installed:

  • Node.js: Latest stable version
  • npm or yarn: Package manager for installing dependencies
  • Install project dependencies:
 npm install
 # or
 yarn install
Run Website Locally

Start the development server:

 npm run dev
 # or
 yarn dev

Open http://localhost:3000 in your browser to view the website locally.

Build & Deploy

Build Website for Deployment

To prepare the website for production, run the following command in your project root:

 npm run build
 # or
 yarn build

This generates an optimized production build in the .next folder.

Start Production Server (Optional)

To run the production server locally for testing:

 npm run start
 # or
 yarn start

Deploy Website

Upload the project to your hosting environment. Common deployment options for Next.js include:

  • Vercel (recommended for Next.js)
  • Netlify
  • Traditional VPS / Shared Hosting (using npm run build + Node.js server)

Ensure that all build files, including hidden files (e.g., .env.production), are included in the deployment.

Domain & Admin Panel Setup

It is recommended to host the **Admin Panel** and **Website** on separate domains or subdomains. For example:

  • Admin Panel: https://admin.your_domain.com
  • Website (Student/Instructor panels): https://your_domain.com

Update the base URL in your app configuration to point to the Admin Panel domain:

const BASE_URL = 'https://admin.your_domain.com';

Install on Server

After downloading the source code, upload the Admin New Install ZIP package to your server in the desired directory and extract it. Zepid LMS Admin Panel can be installed on a root domain or a subdomain, for example: yourdomain.com or admin.yourdomain.com.

Info

The Admin Panel and Web App are built using different technologies. If you want your LMS website (frontend) to run on the main domain, you must install the Admin Panel on a subdomain. For example, if your frontend runs on yourdomain.com, install the Admin Panel on admin.yourdomain.com or any preferred subdomain. Complete installation steps for the web app are provided in the next section.

Warning

Do not install the Admin Panel or Web App inside a subdirectory (e.g., yourdomain.com/folder). Use a domain or subdomain to avoid routing and build issues.

Admin Panel Installation

Step 1: Extract the Code

Upload the Admin Panel ZIP file to your server and extract it into your desired directory. You may install it on a main domain or subdomain such as: yourdomain.com or panel.yourdomain.com.

Ensure that your domain/subdomain has an active SSL certificate. SSL is required for secure authentication and API communication.

Step 2: Run Composer Update

After extracting the project, open your server terminal (SSH) and run the following command: 

 composer update

Step 3: Update Database Configuration in .env

Open the .env file in the project root and update the database credentials: 

 DB_HOST=localhost
 DB_DATABASE=your_database_name
 DB_USERNAME=your_username
 DB_PASSWORD=your_password

Make sure you have already created a MySQL database and assigned a database user with full permissions.

Step 4: Run Migrations

Run the following command to create database tables: 

 php artisan migrate --seed

Step 5: Access the Application

Once everything is configured, visit your domain in the browser: 

 https://yourdomain.com

Your Admin Panel is now ready to use. Log in using your provided admin credentials.

Mandatory Setup

Business Setup

Configure all primary LMS settings under Admin Panel > Setings > General Settings. Set the following:

  • System Logo & Favicon
  • Primary Contact Details
  • Currency Settings
  • Meta Information
  • Default Language

Configure ENV settings under Admin Panel > Setings > Dev Tools > View ENV. Set the following:

  • APP_NAME
  • TIMEZONE
  • SHOW_SUPERADMIN_LOGIN

Mail Configuration

Configure SMTP email to enable password reset, enrollment emails, admin alerts, and other notifications. Navigate to Admin Panel > Setings > Dev Tools > View ENV and set:

  • MAIL_HOST
  • MAIL_PORT
  • MAIL_USERNAME
  • MAIL_PASSWORD
  • MAIL_ENCRYPTION
  • MAIL_FROM_ADDRESS
  • MAIL_FROM_NAME

Tip: After setup, send a test email to verify configuration.

Payment Configuration

Enable payment gateways for online course enrollment and subscription purchases. Navigate to Admin Panel > Settings > Payment-Setting to activate providers such as:

  • Stripe
  • SSL
  • bKash
  • Nagad

You can enable/disable gateways and set default currency preferences from Admin Panel > Settings > General Setting > Default Currency.

SMS / OTP Configuration

SMS is used for OTP verification, password recovery, and transactional alerts. Navigate to Admin Panel > Settings > SMS-Settings to configure your SMS provider credentials.

Supported gateways vary depending on country/region.

Admin Panel Customization

  • Update branding (logo, favicon, primary theme colors)
  • Edit system texts & labels / multi-language support
  • Manage user roles & access permissions

Zepid LMS Admin Panel supports full branding and text customization. You can modify system language files to update text labels and translations.

Language File Location:

resources/lang/en/messages.php

Edit the text values only. Do not change or delete any language key. The format follows:

'key' => 'Translated text here'

Dynamic placeholders start with a : symbol โ€” do not remove them. Example:

'account_setup' => 'Configure your :service account'

Here :service is a placeholder variable. You may reposition the variable inside the sentence but you must not modify its name.

โš ๏ธ Important: Removing or editing language keys or variables will cause translation and UI errors.

Mandatory Setup

Run an Existing Flutter Project

Open the Flutter project in your preferred IDE and ensure all dependencies are installed correctly.

You can generate an app icon using https://appicon.co.

Steps:

  • Replace app_logo_dark.png in <project>/images/logos/app_logo_dark.png with your logo. (For dark Version app)
  • Replace app_logo_light.png in <project>/images/logos/app_logo_light.png with your logo. (For light Version app)
  • Replace all mipmap folders in /android/app/src/main/res with your generated Android icon folders.
  • Replace Assets.xcassets in /ios/Runner with your iOS app icon assets.

Set App Name

Update the app name in the following locations:

  • <project>/lib/util/constants/app_strings.dart: static const String appName = 'My App';
  • AndroidManifest.xml: android:label="My App"
  • iOS info.plist: <key>CFBundleName</key><string>My App</string>
  • Web index.html: <title>My App</title>

Tip: Follow a recommended tutorial if you are unfamiliar with these steps.

Configure Base URL

Set your Admin Panel URL as the base URL (without trailing slash):

BASE_URL="https://your_domain.com";

Update this in <project>/.env.

Setup Firebase for Push Notifications

  1. Ensure your app package name is correct.
  2. Create a Firebase project: Firebase Console and add your Android app.
  3. Download google-services.json and place it in <project>/android/app/.
  4. Replace notification_icon.png in <project>/android/app/src/main/res/drawable/ with a white PNG icon.
  5. For iOS, add your app to the same Firebase project, download GoogleService-Info.plist, and place it under <project>/iOS/. Refer: iOS Firebase Setup.
  6. Restart your IDE, uninstall any previous builds, and run the app on a real device (emulators do not support push notifications).

Customization

Change Onboarding Text and Graphics

Text

Edit the onboarding text by opening <project>/lib/src/l10n/app_en.arb and modifying the desired keys. For example:

"onBoardingTitle1": "YOUR_PREFERRED_TEXT"

Apply the same process to app_bn.arb or any other language files.

Graphics

To update the onboarding images, replace on_boarding_01.png in <project>/assets/images/on_boarding_images/ with your preferred images. Maintain the same file name and format.

Change Welcome screen Text and Graphics

Text

Edit the welcome screen text by opening <project>/lib/src/l10n/app_en.arb and modifying the desired key. For example:

"welcomeTitle": "YOUR_PREFERRED_TEXT"
"welcomeSubTitle": "YOUR_PREFERRED_TEXT"

Apply the same process to app_bn.arb or any other language files.

Graphics

To update the welcome screen images, replace welcome_image.png in <project>/assets/images/on_boarding_images/ with your preferred images. Maintain the same file name and format.

Change App Colors

Update app theme colors in the following file:

  • Theme: <project>lib/src/utils/theme/theme.dart

Customize primary, accent, and other color settings according to your branding.

Change App Font

  1. Download your preferred font from Google Fonts or another source.
  2. Unzip the font files and place them in <project>/assets/fonts/.
  3. Add the font to pubspec.yaml: 
    fonts:
  - family: YOUR_FONT_FAMILY_NAME
    fonts:
      - asset: assets/font/YOUR_FONT_FILE_NAME.ttf
        weight: YOUR_FONT_WEIGHT
  4. Update the font family in:
    • <project>lib/src/utils/theme/widget_themes/text_theme.dart
    • <project>lib/src/utils/theme/theme.dart

App Build & Release

Build for Android

To generate a debug APK, run the following command:

 flutter build apk

This produces a single merged APK. To create APKs for different ABIs separately, run:

 flutter build apk --target-platform android-arm,android-arm64,android-x64 --split-per-abi

The generated APKs will be located at: <project>/build/app/outputs/flutter-apk/

For deploying the app to Google Play, follow the official guide: Flutter Android Deployment

Build for iOS

iOS apps cannot be installed directly like Android debug builds. To deploy on an iOS device, you must use TestFlight or the App Store.

Refer to the official documentation for step-by-step instructions: Flutter iOS Deployment

3rd Party Setup

Facebook Login

Create a Facebook app at Facebook Developers and configure:

  • Settings โ†’ Basic: Display Name, Contact Email, Privacy Policy URL, Terms of Service URL, App Icon
  • Products โ†’ Facebook Login: Enable Client OAuth Login, Web OAuth Login, Enforce HTTPS, Strict Mode, JavaScript SDK
  • Add allowed domains (e.g., https://yourapp.com)

Configure your app IDs in mobile apps:

  • Android: android/app/src/main/res/values/strings.xml
  • iOS: ios/Runner/Info.plist
  • Web: main JS/React initialization

Google Login

Enable Google Sign-In in Firebase โ†’ Authentication โ†’ Sign-in Method โ†’ Google.

  • Android: Add SHA1/SHA256 in Firebase โ†’ Android App settings, add google-services.json
  • iOS: Add Client ID in Info.plist, update app_constants.dart
  • Web: Add Client ID in web/index.html, authorize your domains in Firebase

Admin Panel Updates

Updating the Admin Panel

To update your Admin Panel, upload the update ZIP file to your project's root directory and extract its contents. After extraction, refresh your website or visit your domain. An Update button will appear โ€” click it to complete the update process.

Updating After Customization

If you have made custom changes to your Admin Panel code, follow the steps below to safely upgrade to the latest version:

Recommended Method

  1. Backup your current customized version, including database and configuration files.
  2. Install the latest update by uploading and extracting the update ZIP file.
  3. Compare your customized code with the new version and migrate your custom changes step by step.
  4. Test thoroughly to ensure that all customizations are compatible with the new version.

Tip: Always perform updates on a staging or development environment before applying them to the live site.

App & Website Updates

Version Update

To update your app or website to the latest version from a previous version, locate the files included with each update. The update folder is typically named like: App changes from V1.0 to V1.1. Inside, you will find files organized by directory โ€” replace the corresponding files in your project directories accordingly.

Important Information

You cannot skip versions. Updates are supported only from the immediate previous version to the next version.

Update After Customization

If your code has been customized and you want to upgrade to the latest version, follow one of the recommended methods below:

Recommended Methods

Method 1: Git Branch Merge
  1. Push your current customized code to a dedicated Git branch.
  2. Download the latest version of the project from CodeCanyon and push it to a separate branch.
  3. Merge the branches carefully, reviewing all changes to avoid overwriting your customizations.
Method 2: Manual File Replacement
  1. Backup your customized project and database before proceeding.
  2. Replace only the updated files from the update package into your project directories.
  3. Manually review and integrate your custom code if conflicts occur.
  4. Test thoroughly to ensure all customizations work with the new version.

Tip: Always perform updates in a staging or development environment first before applying changes to the live site or production app.