Project Metamorphosis: Performance Optimization and UI Revamp
- Led the migration of the frontend tech stack from React v16 to v18, Material-UI v4 to v6, and Node 12 to 20, ensuring compatibility and leveraging new features.
- Developed and documented over 30 reusable UI components in Storybook to establish a consistent design language.
- Collaborated with the design/UX team to implement a comprehensive design system (Typography, Colors, Spacings, Theme), standardizing UI elements and decreasing design inconsistencies.
- Enhanced performance by optimizing builds and JavaScript bundles, reducing the initial bundle size by 52% using SplitChunks (webpack plugin) and code splitting.
- Optimized Redux store management with data normalization techniques, improving performance by 30% and enhancing list/grid layout performance by virtualization.
Google Maps API Integration
- Integrated Google Maps APIs to display approximately 2 lakh vehicle/genset locations using markers, polylines, and infowindows.
- Developed vehicle movement visualization and real-time tracking via WebSocket connections.
Dashboard Development for Vehicle Certification and Data Management
-
Designed dashboards for AIS/non-AIS vehicle certifications along with advanced filtering, sorting, and file upload/export features with polling mechanisms to monitor and display background job statuses.
-
Built a financial dashboard for fleet profit/loss analysis and a supervisor assignment feature with role-based access control
Predictive Health Algorithm Showcase and Data Visualization
- Built predictive real-time Air Intake Diagnosis (AID) and Battery Temperature Forecasting (BTF) charts using Chart.js.
- Managed 8+ charts displaying AI algorithm outcomes for vehicle health matrices.
Reports and Summary
- Designed 7+ reports for vehicle trips, history, and journey details with sorting, filtering, and export features using React-Data-Grid & MUI-data-grids.
- Developed a Vehicle Summary Page with detailed metrics like alerts, fuel usage, and mileage lead to ~20% improvement in user engagement. .
Deployment Pipeline Optimization and Migration
- Reduced CircleCI build time by ~25% by upgrading package dependencies and react version, along with webpack config changes.
- Migrated deployment pipeline to github action along with manual and automatic workflows with help of github app.
Customer Experience Solutions and API’s Contributions
- Resolved 170+ bugs, improving system’s bug free performance by ~27%.
- Integrated Mixpanel for user action tracking and followed contribution in internationalization (i18n) for global user support.
- Designed and implemented scalable RESTful APIs using Express.js and Node.js, integrating with MongoDB for efficient data storage and retrieval.
- Architected and developed background job processing system using to automate report generation and short-polling tasks.
TECH STACK:
ReactJS, JavaScript, NextJS, TypeScript, Express, Webpack, NodeJS, Redux, Redux-Saga, Chart.js, AngularJS, Material-UI, Storybook, GitHub Actions, Circle CI, Data Grids