Case Study
Atomberg 2.0
Consumer Electronics WooCommerce Platform
Project Overview
Atomberg Technologies is a leading Indian consumer electronics brand specializing in BLDC fans, exhaust fans, mixer grinders, and smart home accessories. Over a two-year engagement, I led the complete website revamp — building a custom WordPress theme, WooCommerce store, Vue.js interactive components, and a 128-module component architecture.
The platform featured a custom critical CSS pipeline, pincode-based delivery infrastructure, CRM integration with Sell.Do, chatbot automation via Verloop, logistics integration with eShipz and multiple courier partners, and a comprehensive lead management system — all powered by a modern Gulp/Webpack build pipeline.
My Role
Engineering Challenges & Solutions
Complex WooCommerce Customization
Building a heavily customized product page with pincode checker, comparison tool, product batches, FAQ accordion, UGC gallery, and sticky mobile CTA — all within WooCommerce template overrides.
Created a comprehensive WooCommerce template override set covering single product, archive, cart, checkout, myaccount, and email templates with custom hooks for injecting modules at specific positions.
Custom Module Architecture
Designing a modular component system with 128+ module classes and Latte templating that could be assembled into any page layout without code duplication.
Built a custom PSR-4 module autoloader that discovered 128 module classes, each implementing a standard IModule interface with setData/getData/render methods using Latte templating.
Critical CSS Pipeline
Building a custom critical CSS generation and serving system that extracted above-the-fold styles per page template and injected them inline for performance.
Developed a Node.js critical CSS generator using the critical library that extracted above-the-fold styles per page type, stored them in a custom MySQL table, and injected them inline via a WordPress hook.
India-Specific E-commerce Features
Implementing pincode-based delivery checking, COD restrictions by pincode and cart value, CCAvenue payment integration, and Indian mobile number validation.
Built a complete pincode delivery infrastructure with custom database tables (pincode_status, pincode_status_list), Vue.js frontend component, and REST API endpoints for real-time delivery checking.
Multi-System Integration
Integrating with Sell.Do CRM, Verloop chatbot, eShipz logistics, CCAvenue payments, Plivo/TextLocal SMS, and the Atomberg internal CRM API — all through a unified WordPress backend.
Created 20+ custom REST API endpoints under atomberg-api/v1/ that connected the WordPress frontend with Sell.Do CRM, Verloop chatbot, eShipz logistics, CCAvenue, and internal Atomberg APIs.
Vue.js + WordPress Hybrid
Building interactive Vue.js components — pincode checker, mini cart, store locator, product comparison, order tracking — within a traditional WordPress theme without conflicting with jQuery or WooCommerce scripts.
Implemented Webpack code splitting with dynamic imports for Vue.js components, loading them only when needed — PincodeCheck, MiniCart, StoreLocator, ProductCompare, TrackYourOrder — without affecting initial page load.
Feature Highlights
Performance Engineering
Critical CSS Pipeline
Node.js-based critical CSS generator extracted above-the-fold styles per page type, stored them in the database, and served them inline — eliminating render-blocking stylesheet requests.
Async CSS Loading
Full CSS loaded asynchronously via preload and switched to stylesheet on user interaction, with a 3-second timeout as fallback.
Lazy Loading
Images lazy-loaded via a3 Lazy Load plugin. All module HTML automatically processed for lazy loading attributes via the latte_render filter.
Webpack Code Splitting
JavaScript split into lazy-loaded chunks by feature — pincode checker, mini cart, store locator, product comparison — loaded on demand via dynamic imports.
Asset Optimization
Unnecessary CSS dequeued (woocommerce-smallscreen, dashicons for guests), Google Fonts loaded async via WebFont loader, images optimized during build.
Caching Strategy
W3 Total Cache for full-page and database caching, Autoptimize for CSS/JS aggregation, CDN delivery through Apache-level configuration.
Custom Module Architecture
Designed and implemented a PSR-4 autoloaded module system with 128 PHP classes, each implementing a standardized IModule interface. Modules were rendered via Latte templating and could be freely assembled into 60+ page templates — enabling rapid page creation without code duplication.
Vue.js Interactive Components
Built interactive Vue.js components with Webpack code splitting for lazy loading — each component loaded only when needed, without affecting initial page load. Vuex provided shared state management across components.
Technology Stack
Engineering Contributions
Built the complete WordPress theme from the ground up on UnderStrap, creating a fully customized WooCommerce e-commerce platform for a major Indian consumer electronics brand.
Designed and implemented a custom module architecture with 128 module classes and Latte templating, enabling modular page assembly across 60+ page templates.
Developed interactive Vue.js components — pincode delivery checker, mini cart, store locator, product comparison tool, and order tracking — with Webpack code splitting for lazy loading.
Created a custom critical CSS generation and serving pipeline using Node.js, the critical library, and database-backed storage — eliminating render-blocking stylesheets.
Built 20+ custom REST API endpoints under atomberg-api/v1/ connecting the WordPress frontend with Sell.Do CRM, Verloop chatbot, eShipz logistics, and payment gateways.
Implemented a complete pincode-based delivery infrastructure with custom database tables, Vue.js frontend component, and REST API for real-time delivery checking.
Integrated Sell.Do CRM for lead management across warranty registrations, chatbot conversations, store locator inquiries, and contact forms.
Set up Verloop chatbot webhooks for automated pincode checking, order tracking, and after-sales support — with Sell.Do lead forwarding.
Configured eShipz logistics webhooks for automated tracking number updates and order status synchronization.
Integrated CCAvenue as the primary payment gateway with COD restrictions by pincode, cart value, and product type.
Built a store locator with Leaflet maps, SMS notifications via Plivo, and Sell.Do lead integration for dealer inquiries.
Established a Gulp + Webpack build pipeline with asset optimization, image compression, and Babel transpilation for production deployments.
Business Impact
Complete e-commerce platform serving Atomberg's full product line — BLDC fans, exhaust fans, mixer grinders, and accessories — with a modern, custom-built WooCommerce experience.
128-module component architecture that enabled rapid page assembly for 60+ page templates without code duplication.
Critical CSS pipeline that eliminated render-blocking stylesheets, significantly improving Lighthouse performance scores.
India-specific e-commerce infrastructure — pincode delivery checking, COD restrictions, CCAvenue payments — tailored for the Indian market.
Integrated lead management pipeline connecting Sell.Do CRM with chatbots, store locator, warranty forms, and contact forms.
Multi-provider logistics integration with eShipz, AfterShip, FedEx, Bluedart, Delhivery, and DTDC for automated tracking.
Vue.js interactive components that enhanced the shopping experience without compromising page load performance.
Lessons Learned
Modular Architecture Enables Scale
The 128-module component system with Latte templating allowed the team to build 60+ page templates by assembling pre-built modules, reducing development time for each new page significantly.
Critical CSS Requires Automation
Generating critical CSS manually for each template is impractical at scale. The automated Node.js pipeline with database storage made critical CSS a sustainable part of the workflow.
WooCommerce Can Be Heavily Customized
With proper template override patterns and custom hooks, WooCommerce can be extended far beyond its default capabilities — custom product pages, checkout flows, and post-purchase experiences.
Vue.js + WordPress Is a Valid Stack
Vue.js components with Webpack code splitting integrate well into traditional WordPress themes when loaded lazily and scoped properly, providing modern interactivity without a full SPA architecture.
Indian E-commerce Needs Regional Infrastructure
Pincode-based logistics, CCAvenue payments, COD management, Indian mobile validation — these are not optional features for Indian e-commerce but core infrastructure that must be built into the platform.
Integration Architecture Is Critical
Connecting CRM, chatbot, logistics, payment, and SMS systems through a unified API layer requires careful architecture. The atomberg-api/v1/ namespace provided a clean abstraction over multiple backend services.