Eflintdev

Page Content Section

HomeContentSkye Learning®

Skye Learning®

Visit Skye Learning
Skye Learning home page

The limit to learning has no roof!

Read more about my contributions to the Skye Learning® online application.

The Details

This was the first project I worked on when I joined MindEdge’s IT team as a web developer, back in 2018. The project was designed to help promote B2B (Business-to-Business) sales for courseware that’s developed by MindEdge.

React Shopify Code Example

React code example

The UI

The frontend UI has changed over the years and has been re-faced at least three times to accommodate new business approaches, strategies, or theming. The wireframes for this project were produced by the Jayvon Gomes, who is at the time of this writing the Senior Graphic Designer and Brand Manager at MindEdge.

It was my job to produce the coded UI in Laravel and eventually with React using the following languages:

Languages

  • PHP (Laravel)
  • HTML
  • Laravel Blade
  • JavaScript
  • SCSS

Libraries

  • jQuery
  • React (JSX)
  • Material Bootstrap 4+
// Relational Query Builder Example

public function subject()
{
return $this->belongsTo(Subject::class, "subject_id", "subject_id");
}

This was an engineering team project and much of the back-end at the beginning was developed by senior engineers at MindEdge, at the time. They also developed the deployment strategies.

Now, in terms of styling and grid layouts I utilized Bootstrap utilities (essentials), and eventually started to work-in Material Bootstrap 4. I learned to use Laravel Blade, Eloquent, and React JSX as well, for creating many of the components that support the e-commerce functions within the Skye Learning application. There’s ample use of vanilla JavaScript and some implementations of jQuery for events.

Eventually, in a few years I took on more responsibility for developing the back-end code, SEO (Google Analytics), unit testing, and deploying the application during release cycles.

Software Architecture

Now, regarding this application's backend architecture, the engineers that initially built it setup the most essential paradigms that are pivotal to successfully implementing data flows for hydrating the frontend. Skye Learning’s frontend is partially driven by React but many of the components and templates are coded in Laravel Blade templates.

Common SA Trifecta

  • Singleton - For services and containers.
  • Facade - Our most common object-oriented patterns for various contexts while also providing access to objects from containers.
  • Factory - There is also use of factories to create objects within classes. This is most often done during testing in Skye Learning, using PHP Unit.

Other Patterns - Within React we use other patterns or classes to support ‘reactive’ coding.

  • Mutation Observer - Watches for DOM changes.
  • Observable - Detects data changes in targeted variables.
  • Event Listeners - These perform functions when predefined events are triggered (click, mouseup, mousedown, keyup, etc.).