Architecture Challenge: Integrating New Modules through iFrame 

Celestial Systems faced the challenge of integrating new modules into the existing 360Learning application using iFrames, complicated by the client's inability to share their codebase due to ISO compliance. They responded by closely collaborating with the client to refine their development approach.

To meet the compliance requirements, they revised the project plan, adding a step to design and implement each module with iFrames. This strategic adjustment enabled successful module integration while adhering to the client's compliance needs. 

Data Fetching Challenge: Adapting to Changing API Requirements 

During the development phase, Celestial Systems initially used mock APIs for preliminary research but later realized they were unsuitable for the final application. The team quickly adapted their data fetching strategies to meet evolving project needs, ensuring a smooth transition. This flexibility allowed for efficient integration of the necessary data sources, resulting in a robust and functional solution. 

UI Uniformity Challenge: Achieving Consistency in UI Design 

Celestial Systems faced the challenge of maintaining a consistent UI design across the application, given partially functional UI components from the client's Storybook link. To ensure uniformity within the existing Vue.js framework, Celestial thoroughly reviewed and experimented with these components.

This involved redesigning and refining the UI from scratch to meet the client's standards for consistency and professionalism. Celestial’s dedication resulted in a visually cohesive and seamlessly integrated user interface. 

Technical summary

360Learning is a Front-end focused project with React (v17) and Typescript as its main tech stack. The application had two user roles/modules:  

1. Learner Module - consisting of pages for enrolling Learners into a classroom session.
2. Manager Module- approving/rejecting the Learner’s requests by the manager based on a backend logic designed and managed by 360Learning.  

The primary goal of these modules was to extend functionality for learner and manager roles on an already existing application using <iFrame> and to have a thorough QA to ensure that all components will work as intended after the release. 
The end client who used the Learner and Manager modules was Sephora, while the designs to develop the front end of both these modules were provided by 360Learning. 

Application Architecture 

Celestial Systems created a few modules on a 360Learning’s already existing primary application (created using VueJs framework) using <iFrame> . On the primary application, several methods were exposed on window.parent to fetch data inside the new web application.

Notably, no API calls were initiated within this application; instead, data retrieval relied solely on the methods exposed on the browser's window object. Error handling was proactively integrated on the primary application side, eliminating the need for additional implementation on Celestial’s end.