Improving Performance and User Experience: Apium’s Dashboard Transition from Angular to React

Share This Case Study

Introduction

Apium Delivery is a top grocery delivery company that operates in multiple cities in the western US. Their software routes drivers effectively to customers’ homes, ensuring timely delivery of fresh groceries and allowing customers to track their deliveries, provide feedback on drivers and groceries, and more.

 

One of the key features of the Apium Delivery platform is the dashboard, which provides a range of tools and information for both customers and delivery drivers. The dashboard was originally built using older versions of Angular, a popular JavaScript framework. However, over time, we decided to transition to React, another popular JavaScript framework, in order to improve the performance, user experience, and user interface of the dashboard.

Why the Transition Was Necessary

There were several reasons why we decided to transition from Angular to React. First and foremost, we were looking to improve the performance, speed and user interface of the dashboard. Angular is a powerful javascript framework, but it can be quite resource-intensive and slow, particularly when rendering large amounts of data or handling complex user interactions.

 

In addition to performance issues, Apium Delivery was also looking to improve the overall user experience of the dashboard. Angular is known for its steep learning curve and complex architecture, which can make it challenging for developers to work with and maintain. By contrast, React is known for its simplicity and ease of use, which can make it more accessible and efficient for developers to work with.

The Transition Process

The transition from Angular to React was a significant undertaking for our react team, as it required a complete overhaul of the dashboard’s functional components and codebase. The company began by carefully planning the transition, including identifying the dashboard technology stack, user interfaces, and component logic for potential risks and challenges that might arise during the process.

 

The team then began the process of refactoring the Angular code into React, using a combination of automated tools, manual efforts, and rewriting existing code. This included breaking down the Angular code into smaller, more manageable chunks, and then reassembling it using React components.

 

The team also took advantage of the opportunity to modernize the dashboard’s design and functionality, incorporating new features and functionality that were not possible with the Angular codebase. This included the use of responsive design techniques to ensure that the dashboard would work seamlessly on a range of devices, as well as the incorporation of new data visualization tools to make it easier for customers and drivers to track and understand their delivery data.

Results

The transition from Angular to React was a success. We were able to improve the performance and user experience of the dashboard significantly, making it faster and more responsive for both customers and drivers. The new React-based codebase was also easier for developers to work with and maintain, reducing the time and resources required for updates and bug fixes.

 

In addition to these technical benefits, the transition to React and upgrading the user interfaces also helped to boost Apium’s customer support team performance. Apium Delivery’s support team appreciated the faster and more reliable performance of the dashboard, which made it easier for them track and perform other backend administration tasks. Delivery drivers also benefited from the improved dashboard, as they were able to access the tools and information they needed more quickly and efficiently.

Conclusion

Overall, the transition from Angular to React was a major success. We were able to improve make performance improvements and user experience of the dashboard, while also streamlining the development process and increasing customer satisfaction. By embracing the power and simplicity of React, we were able to take Apium Delivery’s platform to the next level, solidifying its position as a leader in the food delivery industry.

Facebook
Twitter
LinkedIn
Email

More To Explore

Contact Us For A Free IT Consultation

Custom Wearable Watch

Case Study: A Custom Wearable Watch for Monitoring Heart Rate, Body Temperature, and Sudden Falls

Introduction

The wearable industry is constantly growing and evolving, with new products being introduced every year that offer more and more advanced features. Our custom wearable watch is a cutting-edge product that integrates a range of sensors to monitor vital signs and detect sudden falls, providing critical information to keep the wearer safe and healthy. In this case study, we’ll delve into the features of the watch and the IoT development life cycle that we used to build it.

Integrated Sensors

The custom wearable watch integrates heart rate monitoring (HRM), temperature sensing, and an accelerometer to track a range of health metrics. The HRM provides real-time monitoring of the wearer’s heart rate, while the temperature sensor tracks the body temperature, and the accelerometer detects any sudden falls. These sensors work together to provide a comprehensive picture of the wearer’s health, giving them and their caregivers peace of mind.

Tiny Lithium Ion Battery

The watch runs on a tiny lithium-ion battery, which provides long battery life and ensures that the wearer never has to worry about the watch running out of power. The battery is easy to charge, and the watch has a low-power mode that extends the battery life even further.

LoRa-Based Long-Range Communication

The watch collects data regularly and sends it over LoRa (Long Range) WAN, which is a sub-gig RF frequency (868 MhAZ). LoRa is touted as one of the best protocols for IoT and is ideal for battery-powered devices due to its low power consumption and built-in security features. This long-range communication capability ensures that the data can be transmitted over long distances, making it ideal for monitoring the wearer’s health even when they’re away from home.

Backend Analysis and Emergency Assistance

The data collected by the watch is transmitted to the backend, where it is analyzed to provide a general health assessment of the wearer. This information can be used to alert caregivers or emergency services if necessary, providing critical assistance in the event of a sudden fall or other health emergency.

Proof of Concept and Design

We participated in the complete design and proof of concept phase of the wearable watch, ensuring that the product was optimized for performance and user experience. Our team of engineers and designers worked together to create a product that is both functional and aesthetically pleasing, making it a great choice for anyone looking to stay safe and healthy.

IoT Development Life Cycle

The development of the wearable watch was guided by the IoT development life cycle, which involves several phases including planning, design, development, testing, and deployment. Our team followed this process to ensure that the watch was developed to the highest standards and that it would meet the needs of users.

Conclusion

Our custom wearable watch is a cutting-edge product that provides real-time monitoring of vital signs and detects sudden falls. It integrates a range of sensors and runs on a tiny lithium-ion battery, and it transmits data over LoRa-based long-range communication for comprehensive health analysis and emergency assistance. We participated in the complete design and proof of concept phase, and we followed the IoT development life cycle to ensure that the product was developed to the highest standards.