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:
- Public-facing frontend app: For learners to access and interact with courses.
- Administrator frontend app: For managing users, courses, and platform settings.
- 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
- Clone the repo and navigate to the project directory:
- Install dependencies:
- Run the application
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
npm install
npm run dev
Frontend Architecture
Tech Stack
- Frontend framework : Svelekit
- CSS Framework : Tailwind CSS
- Charts and Maps : Chart JS, AM Charts
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.
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