Home / Documentation

EduReach Documentation

Introduction

An open-source Course Content Management System (LMS) platform for creating and delivering online courses, developed to take education to every corner of the world.

EduReach comprises three key modules:


  1. Public-facing frontend app: For learners to access and interact with courses.
  2. Administrator frontend app: For managing users, courses, and platform settings.
  3. Robust backend app: Provides a secure and scalable foundation for both frontends. This modular architecture enhances flexibility, maintainability, and independent development of each component.

Why EduReach?

  • Open Source & Free for all
  • Customize and adapt to your needs
  • A wholesome package to create and manage courses
  • Scalable Learning Platform
  • Mobile-Friendly design
  • Seamless API Integration
  • Role based access control

Installation

Frontend Application

  1. Clone the repo and navigate to the project directory:
  2. Public Facing Frontend Application
    git clone https://github.com/tech-tlai/openlms_public_ui.git 
    cd openlms_public_ui
    Admin Frontend Application
    git clone https://github.com/tech-tlai/openlms_admin_iu.git 
    cd openlms_admin_iu
  3. Install dependencies:
  4. npm install
  5. Run the application
  6. npm run dev

Frontend Architecture

Tech Stack

Architecture

File structure

Follows Sveltekit’s recommended project structure.

my-project/
├ src/
│ ├ lib/
│ │ ├ server/
│ │ │ └ [server-only lib files]
│ │ └ [lib files]
│ ├ routes/
│ │ └ [routes]
│ ├ app.html
│ ├ error.html
│ ├ hooks.client.js
│ ├ hooks.server.js
│ └ service-worker.js
├ static/
│ └ [static assets]
├ package.json
├ svelte.config.js
├ tsconfig.json
└ vite.config.js

Sveltekit provides a file based routing system. Thereby, the folders inside ‘routes’ folder become routes of the application.
lib > Components folder contains all reusable components. However, page specific components will be found in folder in the same name as the page under the lib folder. For eg: components specific to trainingCenters page will be found in lib > trainingCenters

Data Loading

Data loading is done utilizing Sveltekit’s load functions. The attached image shows the data loading strategy followed.

Fetch layout data
Fetch page specific data
Pass data as props
Layout load functions
Page load functions
+page.svelte
Individual components

Form handling

The product has utilised Sveltekit form actions for form handling. Form submissions are thus handled by actions in the corresponding +page.server.js file.

Using the application

Public Facing Frontend Application Demo

Admin Frontend Application Demo

API

The apis used are documented here