FlexGen Calculator - React Widget/App

This calculator widget marks phase 2 of my work on Flexgen.com. Following the successful launch of their Drupal 11+ site just a couple of months ago, the company identified a need for an interactive tool to demonstrate the financial impact of their energy storage solutions. The challenge was to create a user-friendly, engaging calculator that would:

The Challenge

• Provide real-time financial calculations based on user inputs
• Showcase FlexGen's performance compared to competitors
• Serve as a lead generation tool by encouraging newsletter sign-ups
• Seamlessly integrate with the existing Drupal 11+ website

The Solution

Leveraging my expertise in both React and Drupal, I developed a custom React-based calculator widget that integrates smoothly with FlexGen's Drupal 11+ website. The solution included:

• A React + TypeScript frontend for dynamic, responsive user interactions
• Integration with a Drupal 11+ custom module as Block
• Use of ChartJS for dynamic graph visualizations
• Implementation of Material UI components for a polished look
• A dual-state functionality (locked/unlocked) mode to encourage newsletter sign-ups from potential customers
• Token-based unlocking mechanism for persistent access

The Results

• Enhanced user engagement through interactive, real-time calculations
• Increased lead generation via newsletter sign-ups
• Improved demo of FlexGen's value proposition to potential clients
• Seamless integration with the existing website, maintaining brand consistency

The project showcases the power of combining modern front-end technologies with Drupal's robust CMS capabilities, resulting in a tool that not only impresses technically but also drives tangible business results.

Timeline: Completed in approximately a few weeks, from dev to launch, including client feedback and refinements.