Wonder Learning Website (Design Document)

◴ 17 May 2023 | ☕ 10 mins

Github Source Code

🗨️ Overview

Wonder Learning provides services to schools. This was their Learning Management Platform where to onboard schools will have a completely digital workflow. School management can deal with inquiries, students, and fees online. Teachers were also keeping homework, attendance, etc. Parents were using an app developed

Software Stack
FrontendBootstrap, Orchid
ServersideLaravel, Orchid
Versioning/ManagementGit and GitHub
Package ManagementComposer
Hardware Stack
Storage40 GB NVME SSD
OSUbuntu 20.04

🛡️ Why this stack?

Before I start describing the application and process, Here is the reason why all the above choices in the stack were made.

🛠️ Architectural Overview

Wonder Learning How it works

Web App

  1. Web App uses a monolithic model where Request is received by Laravel Web Router
  2. Web Router runs middleware specified on the specific route.
    1. Ex: Proteced screens have an Auth Middleware that makes sure only authenticated users are allowed to access the screen.
    2. Middleware passes the Request back to the router if its condition is fulfilled, otherwise, it throws an exception.
  3. Router then routes it to a Screen Controller, In Orchid Screen Controller lets you define Dashboard Behaviours, UI, and Interactions in PHP itself, without requiring you to work with HTML.
    1. Screen Controllers compose the UI using reusable components provided by Orchid UI or one defined by me using Blade or Vuejs.
  4. Screen Controller uses a Model to access data. The model handles tasks like transforming values while fetching or inserting, defining Entities Relation to one another like books having an author, etc.
    1. Some of the queries such as the total number of students might not change for months, such heavy queries are cached to file to avoid expensive redundant operations.
  5. The model uses Laravel’s internal query builder to build and run raw SQL queries on the database. It also maps it as an Object (acting as an ORM).

Android App

  1. Android App is developed with Flutter and REST APIs. Mobile App was developed by a friend of mine Pawan Ghewande and REST APIs were designed by Me.
  2. Mobile App first checks for Local SQLite Cache for data and if it’s not there then makes a Network Call to respective REST API.
  3. REST Endpoints are handled by Laravel’s API Router for the specific router
    1. Middleware Layer same as Web App is used here but with different middleware, because REST Endpoints are stateless and need a different set of logic to operate
  4. The controller receives the request from the router which then Fetches the data with the help of Model Class.
  5. The model returns either the instance of itself or the object Collection interface. This is then further consumed by API Resources.
    1. In most scenarios, you might want to remove, transform, or add fields you receive from the database to something else, in the API response.
    2. This can include not including the id field from db, or deriving the number of days trials remaining from the timestamp in DB.
  6. The controller returns the API resource as a response, which the Mobile application receives and caches for a day or less to avoid unnecessary calls to API.

🚚 Deployment Workflow

🌐 Web App

🤖 Android App

Copy of the both web and android app is kept on GitHub as backup and a way to collaborate.

Note: Wonder Learning has hired another agency to work on their LMS platform as I left freelancing at the end of 2021, the live backend application is not the one I initially deployed. But you can still take a look at original source code hosted by me. The change in the backend wasn’t due to any issues but the newer agency had its own prebuilt software solution.