Cubiverse
Cubiverse is a data-driven, fully automated SaaS product that provides real-time data for proactive quality improvement and cost-effective operations. It is designed to streamline delivery businesses by offering features like real-time delivery tracking, pickup/drop models, and efficient data transfer. The system ensures couriers receive task notifications in real time, optimizing their operational efficiency.
Client:
Cubivue
Category:
SaaS Product
Frontend Stack:
HTML, SASS, Bootstrap, Angular, PrimeNG, NGXS
Approach
To create a scalable SaaS product, we conducted thorough research to identify the best approach for managing multiple portals using a single SaaS asset base. We adopted a utility-based design system and developed a centralized UI portal housing all foundational elements like form components, checkboxes, radios, and inputs. This approach eliminated the need for separate CSS for each portal, allowing the UI to adapt seamlessly to UX changes. To enhance customization, we extended Bootstrap’s utility API with custom utilities providing greater control and flexibility in design implementation.
The UI portal also served as a centralized resource, enabling developers to independently access and integrate components without relying on the UI team.
I have created different portals using the SaaS asset framework, including MLS, PP, Service Worker, Daily Planning, Vehicle Portal, and Product Portal.
Portal
Planning portal is a centeral hub for the Cubivue SaaS, it has major role in optimizing and planning efficient routes. It accesses locations information from MLS or any other provided source and creates route efficiently based on the availability of resources.
My Role
- Analyzed UX flow to fully understand design and functional requirements for the planning portals.
- Implemented UX designs in an Angular environment, ensuring responsive and user-friendly interfaces.
- Customized PrimeNG components to meet specific project needs and integrate seamlessly into the UI.
- Developed advanced drag-and-drop functionality to enhance user interaction and flexibility.
- Integrated and customized FullCalendar for dynamic scheduling features tailored to the portal’s requirements.
- Data binding with mock APIs to simulate real-time interactions and ensure robust performance during development.
- Designed and developed the entire UI independently, managing every phase from setup to deployment, ensuring successful project delivery.
Portal
Daily Planning is a comprehensive system designed to streamline operational workflows. It encompasses functionalities like managing worker salaries, base plans, and daily plans, including tasks such as editing rules, jobs, workers, and vehicles. Additionally, it provides user management features for role assignments and access controls, along with settings for syncing resources and handling deadline periods
My Role
- Performed an in-depth analysis of Adobe XD designs to thoroughly understand UX principles and project requirements.
- Converted UX designs into a responsive and fully functional UI within an Angular environment, adhering to industry standards.
- Customized PrimeNG components extensively to handle complex UI requirements. Built advanced drag-and-drop functionality supporting single and multi-item actions.
- Configured API integrations using mock data and leveraged NGXS for robust state management and enhanced application performance.
- Designed and developed the entire UI independently, managing every phase from setup to deployment, ensuring successful project delivery.
