Retail Electricity and Natural Gas Supply Provider build a Pricing App using React.JS with TypeScript


VNB Consulting assisted a Retail Electricity and Natural Gas Supply Provider to build an application for their Pricing and Forecasting teams using React.JS with TypeScript.

Customer Profile

Customer is a certified competitive retail electricity and natural gas supply provider in U.S. They are the nation’s largest electricity producer with about 25,000 megawatts of diverse generating capacity, including more than 7,100 megawatts of renewable energy. The company also has the country’s largest investor-owned utilities. They serve nearly 5.6 million customers in 11 states.

Customer Situation

The customer had the requirement to extend their current application stack for a heavy data workload. The new application should also have a similar user interface as per the existing applications along with an improvement in user experience like performance improvement, ease of usage. It should also have flexibility to update existing features with ease of development and deployment.

Our Solution Offering

After performing a detailed customer environment assessment, VNB Consulting's Apps and Integration team recommended an architecture using React with TypeScript as the front-end and Axios framework as a middleware to integrate with on-premises API's. Design Patterns used in React based app allowed the users to easily navigate across the Menu bar, access the different screens seamlessly. Additional functionalities included to get data for a specific date range, filter set up for all the columns to sort data as per need, access to historical data, color-coded rows to easily identify different workflow type, tabular view of information, security restrictions to allow users only with required permission to go beyond the landing screen. Middleware services are created using Axios framework to connect to the on-premises API, while Redux store is used to maintain user specific data its state throughout the workflow. The API's were built to provide interaction with on premise data sources and contained the business rules and procedures to secure data. Token based authentication was used to generate the list of permission a User would have within the system. The overall solution was built with atomic design and React patterns which help achieve reusable components, improve speed and flexibility and reduce overall cost.

Customer Benefits

  • Zero or minimal downtime to upgrade the platform.
  • Easily add new features into the existing application as these are reusable components and are loosely coupled.
  • Easy to maintain. React with TypeScript is easy to build, maintain and carry out any updates if required. Customer team was aware of development and deployment processes and was comfortable to make any changes in future.
  • React is developer friendly technology and is widely used. Each component update from React is thoroughly tested with enough online documentation.
  • Insights into Business Processes. Customers can clearly get visibility in pricing request queues and accept/reject the queue request.

Related Case Studies

Power and Utilities Organization Consolidate Multiple CRMs to Target New Markets

VNB Consulting assisted a Power and Utilities organization to consolidate multiple CRMs into a single Dynamics 365 CE environment


Logistics and Supply Chain Company Automate Work Order Management using Power Platform

VNB Consulting assisted a logistics customer to automate their work order automation management …