Flexgen.com
Flexgen.com - In under six weeks, I spearheaded the development and relaunch of Flexgen.com on Drupal 11+. This project involved creating over 15 custom components/paragraph types, theme variations, forms, product landing pages, and blog posts to effectively showcase FlexGen's offerings. Utilizing Vite as the build tool, I implemented Hot Module Replacement (HMR) for an efficient front-end development experience. visit site
Date
07.16.2024
Role
Lead Developer (FE/BE)
Agency
Alphex Information Solutions & Arrowake
Tech
Drupal 11, Javascript, SCSS, Vite + Hot Module Replacement (HMR), Widget/App - (React, TypeScript, ChartJS, Material UI)
Tabs Section
Featured Cards
Content Scroller
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.
Calculator (React Widget) - Locked/Default Mode
Calculator (React Widget) - Unlocked Mode
Summary of Role
- Led the development of Flexgen.com from start to finish, owning both frontend and backend across the full Drupal 11+ build
- Architected and built 15+ custom Paragraph types and components to support a flexible, editor-friendly content authoring experience
- Configured Vite as the front-end build tool with Hot Module Replacement (HMR) for a fast, modern development workflow
- Developed product landing pages, service pages, blog infrastructure, theme variations, and lead generation forms
- Built a standalone React + TypeScript calculator widget (Phase 2) integrated as a custom Drupal block, featuring ChartJS visualizations, Material UI components, and a token-based locked/unlocked mode for newsletter lead capture
- Collaborated with Alphex Information Solutions and Arrowake throughout the engagement, shipping the full marketing site in under six weeks
Stats.
Date
07.16.2024
Role
Lead Developer (FE/BE)
Agency
Alphex Information Solutions & Arrowake
Tech
Drupal 11, Javascript, SCSS, Vite + Hot Module Replacement (HMR), Widget/App - (React, TypeScript, ChartJS, Material UI)
next project