360 Learning
Elevating Collaborative Learning with Seamless
Front-End Enhancement
services offered
Client Testimonials
"Celestial is a reliable software partner and has been amazing to work with. Celestial gave us the flexibility to scale up and down by adapting to our ever-changing needs. They have a wide range of software skillsets and I would recommend them for any software initiatives."
Overview
360Learning is a collaborative learning platform that empowers teams and organizations to engage in shared learning and development initiatives. By fostering a collaborative approach to learning, the platform enables users to work together on training programs, skill development, and knowledge sharing. With an emphasis on teamwork, 360Learning provides a space where users can create, share, and participate in learning content, including courses, modules, and resources.
The client approached us to support their front-end development, seeking expertise in enhancing React-Based UI. We were tasked to deliver refined user interfaces, to elevate the visual and functional aspects of their platform.
scope
Project Scope
Dissecting the Problem
Challenges
Architecture Challenge
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
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
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.
360Learning ended up going with the idea, refining the design and were still able to deliver the project in a timely manner. Their efforts ultimately contributed to the successful resolution of these challenges and the delivery of a high-quality front-end solution for 360Learning, enhancing the platform’s visual and functional aspects.
our approach
Celestial’s Solution
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.
the results
Outcomes
Met client's vision and compliance needs by seamlessly integrated new modules.
Ensured efficient integration of data sources.
Achieved visual cohesion and seamless integration of UI components.
A flawless release following rigorous QA ensured high client satisfaction.
contact us
Connect With Us
To learn more about how Celestial can help your organization modernize its
technology stack and leverage data and AI for competitive advantage
