
Hakimuddin Haweliwala
Verified Expert in Engineering
Front-end Developer
Hyderabad, Telangana, India
Toptal member since September 1, 2022
A front-end technical architect working on front-end technologies for eight years, Hakimuddin's skill set includes React, Redux, TypeScript, React Native, Node.js, Vue, Jest, SCSS, CSS, JavaScript, Next.js, and HTML. He has vast experience developing and architecting startup products and enterprise-level complex applications widely used in the market and building products in SaaS, ITSM, and e-learning domains. Hakimuddin writes robust and high-quality code according to the technology standards.
Portfolio
Experience
- JavaScript - 9 years
- React - 7 years
- TypeScript - 7 years
- HTML - 7 years
- CSS - 6 years
- Next.js - 4 years
- SCSS - 4 years
- Jest - 3 years
Availability
Preferred Environment
MacOS, HTML, Front-end, IndexedDB, Web Worker, Responsive Design, Web Accessibility, A11Y, Front-end Development, React Native
The most amazing...
...app I've developed using JavaScript and WebGL is a configurable 3D garage that creates, visualizes, and shares a 3D model with dimensions, color, pattern, etc.
Work Experience
Front-end Developer
Simbiotica S.L
- Translated complex, responsive components and pages from Figma designs into React and TypeScript with pixel-perfect precision, ensuring adherence to accessibility standards.
- Designed and implemented a reusable, configurable data visualization chart component using Recharts and D3.js, capable of rendering multi-dimensional x and y coordinates for intuitive data representation.
- Leveraged AG Grid and TanStack React Table to create an interactive climate data display with robust support for pagination, sorting, and search functionality.
- Extended and customized ShadCN components using Tailwind CSS to align seamlessly with the project’s design system and functional requirements.
- Maintained a scalable codebase structure with monorepo and optimized data fetching using React Query for efficient state management.
Front-end Developer
Design Barn, Inc.
- Led front-end development for Lottie Creator, a web-based animation editor. Built key features, including timeline editing, layer hierarchy visualization, shape transformation tools, and segment management using React, TypeScript, Zustand, and Tailwind.
- Designed and implemented an intelligent naming system in React and TypeScript to automatically assign unique names to new segments upon creation.
- Built vertical connection lines in the layers panel using React and Tailwind CSS to visualize sibling and nested layer relationships. Implemented Zustand state management for dynamic hierarchy updates, ensuring consistent visual representation.
- Developed useHoldMenu React hook featuring hold-to-open menu functionality with timing controls. The hook manages complex state transitions and cleanup, improving component reusability and preventing memory leaks via automatic timeout management.
- Debugged and resolved issues with shape scaling and transformation by creating reusable react utility methods using Zustand, ensuring accurate sizing and proportions during editing.
- Enhanced the focus functionality, enabling users to select specific layers on the canvas using marquee selection. Leveraged Zustand for dynamic state management, ensuring precise tracking and updates of focused layers for accurate editing.
- Fixed issues with the animation timeline panel to ensure accurate trimming of frames both inwards and outwards. Enhanced the functionality using React and TypeScript, with Tailwind CSS ensuring a visually consistent and intuitive interface.
Front-end React Developer
Heroik Strategies
- Built the front end of a data-intensive chart application for visualizing survey data with advanced configurations using Next.js, styled-components, Redux, and Material UI (MUI).
- Implemented AWS Amplify to enable manual and 3rd-party user authentication, utilizing Google Authenticator for seamless data management.
- Optimized chart rendering for large datasets by implementing efficient data structures such as arrays and maps to improve data access speed.
- Implemented reusable API hooks such as useFetchData, useCachedData, and useErrorHandling to efficiently manage complex API calls within UI components, ensuring smooth data retrieval and graceful error display.
- Integrated and customized Builder.io to enable a seamless no-code/low-code content management experience, empowering non-technical teams to create and manage dynamic web pages efficiently.
Front-end React Engineer
Dekeo Inc
- Enhanced an object dimension editing feature in a design editor, allowing users to modify the width and height of graphical elements and groups with real-time aspect ratio preservation and text integrity constraints.
- Developed an alignment feature for seamless center alignment of individual elements with groups on the artboard, including intuitive snapping and ruler guidance for improved design efficiency.
- Implemented horizontal and vertical object resizing functionality, enabling intuitive adjustments of object dimensions directly from the Elements panel or Layers panel.
- Engineered a custom text input component for the text effects section, supporting numerical values with special characters and providing enhanced validation and flexibility for attribute specification.
- Utilized Tailwind CSS to create a responsive and visually cohesive design editor interface, ensuring a consistent user experience across various screen sizes and improving the overall aesthetic and usability of the tool.
Senior Front-end Engineer
ServiceNow
- Integrated AI/ML models into the dropdown and HTML editor controls, suggesting relevant field options and content recommendations based on user context and past interactions.
- Led the initiative to address manual audit results and ensure all control components comply with WCAG 2.1 AA accessibility guidelines by enforcing best practices like keyboard navigation, screen reader compatibility, and color contrast adjustments.
- Developed and implemented custom plugins for advanced features like image compression, customizable style formats, and integrated custom font options for the TinyMCE library used in the HTML editor component across ServiceNow.
Vue Developer
Connectara
- Developed an MVP using Vue for a sales engagement platform, allowing users to manage leads, automate outreach, and track interactions, demonstrating core functionality for potential users and stakeholders.
- Implemented a dynamic contact search and enrichment feature, enabling users to access and organize prospect data in real time, showcasing the platform's potential to streamline lead management.
- Integrated multichannel communication tools, allowing users to manage email, phone, and social interactions from a single platform, illustrating the platform's ability to simplify sales workflows.
Senior Full-stack React Engineer
BrowserStack
- Spearheaded the migration of the core app's live components from jQuery/ Ruby on Rails to React, Redux Toolkit, and TypeScript, improving code maintainability, scalability, and type safety.
- Improved limited debugging capabilities by using the WebSocket API within the existing Cypress test framework by introducing states like "pending," "paused," and "waiting" to help users pinpoint issues more effectively using Node.js and React.
- Transformed BrowserStack's documentation build process with Gulp, slashing build times by 50%. Leveraged automation, caching, and parallel execution to streamline workflows, boosting dev productivity.
- Built a Node.js API from scratch to handle scheduling, execution, and reporting of automated test runs in Automate, enabling integration with CI/CD pipelines and third-party tools.
- Designed and implemented a user-friendly modal pop-up via Node.js back-end APIs to handle location updates without leaving the testing screen.
- Used Amplitude and Google Tag Manager successfully to design and implement an A/B testing framework for the "App Live" product. This project improved user engagement by 15%, enhanced feature adoption, and informed future development strategies.
- Built and customized Sitecore components and templates to enhance content management flexibility and improve the editorial experience for marketing teams.
- Implemented headless Sitecore architecture using React, enabling dynamic, API-driven content rendering while maintaining a highly interactive user interface.
Full-stack Developer
Globant
- Developed a highly reusable UI component library based on the atomic component architecture using React, TypeScript, and Storybook to be used across projects.
- Enhanced data visibility and control for school administrators with interactive dashboards and granular reporting tools built using Node.js. Developed interactive dashboards and reports using Next.js data fetching and Recharts.
- Spearheaded the redesign and migration of the user management portal from legacy frameworks to NextJS and React, achieving user satisfaction and a 30% reduction in support tickets.
- Introduced multi-factor authentication and role-based access control features to strengthen user security and data privacy, exceeding industry compliance standards.
Front-end Developer
HCL Technologies
- Implemented a local database using IndexedDB to cache frequently accessed data using the multi-threading capability of web worker, enabling offline functionality and accelerating subsequent page loads by an additional 40%.
- Developed real-time 3D data visualization in a dashboard using Angular 2, WebGL, and BIM data integration to visually represent energy consumption, HVAC efficiency, and occupant comfort metrics.
- Integrated an AI model using the Google Cloud AI Platform to identify unusual energy spikes, equipment malfunctions, and potential comfort issues within the Angular 4 dashboard.
- Utilized TypeScript's generics for reusable components and data structures and explored async/await patterns for streamlined asynchronous operations within Web Workers.
React Native Developer
5 Exception Software Solutions
- Implemented custom hooks and state management techniques to optimize performance and maintainability for the 3D scene and customization controls.
- Leveraged React Native Navigation with custom animations to create a smooth, intuitive navigation flow between product selection, customization, and design sharing.
- Utilized SCSS to handle responsive layouts and conditional rendering based on device orientation and screen size.
- Built a performant 3D model viewer using Three.js with scene optimization techniques and custom shaders for efficient rendering on mobile devices.
- Developed a modular SCSS architecture with mixins and variables to manage global styles, theme options, and dynamic color adjustments for building materials.
Experience
Read It | A Reddit App Redesigned Version
In this project I:
• Revamped the infinite nested comments section for better visibility;
• Implemented custom infinite scrolling for feeds;
• Provided the ability to display different media formats like video, audio, and images from multiple API calls, including JSON and XML.
Tech Stack: TypeScript, React, and Styled-components.
Gradient Creator
Package: https://www.npmjs.com/package/gradient-creator/
Currency Converter
https://chrome.google.com/webstore/detail/currency-converter/mgajjigejpadffkeaadenehfkojcipoj?hl=en-GBCreated a settings page where users can change any country's [from] and [to] currencies.
Open-source Contributor at MUI
https://mui.com/base-ui/getting-started/• Core Component Development: Contributed to essential components such as tabs, radio buttons, checkboxes, switches, and tooltips, used by millions of developers, focusing on usability and flexibility.
• Base UI Contributor: Actively contributes to MUI’s Base UI repository, refining and optimizing foundational components that support consistent, high-quality user experiences across applications.
Certifications
Graphics, Web Design & Development
Arena Animation
Skills
Libraries/APIs
React, React Testing Library, Node.js, REST APIs, React Redux, WebGL, HTML5 Canvas, ServiceNow REST API, Google API, Vue 3, Chart.js, React Query, Recharts, React Router, Three.js, jQuery, Web Worker, AWS Amplify, Vue, WebRTC, Web Audio, Web Audio API, D3.js, TanStack Table, AG Grid, API Development, react-spring, Chrome API, Fabric.js, W3C Widget API
Tools
NPM, JSX, Figma to HTML, Git, JavaScript Testing, Redux Toolkit, Jira, Figma, GitHub, Expo, Photo Editors, Webpack, Docker Compose, Canvas, Builder.io, GitLab, CodeMirror, Xcode, Android Studio, Sentry, Shadcn
Languages
HTML5, JavaScript, CSS, SCSS, TypeScript, HTML, Sass, CSS3, ECMAScript (ES6), GraphQL, Python, SQL, Ruby, Arabic
Frameworks
Next.js, Jest, Redux, React Native, Material UI, Tailwind CSS, Cypress, Web Frameworks, WebApp, Vanilla JS, Angular, MUI CSS, Express.js, Bootstrap, NestJS, Vuetify, Ruby on Rails (RoR), Angular Material
Paradigms
Unit Testing, Responsive Web Design (RWD), UI Design, UX Design, App Development, HTML DOM, Responsive, Responsive Layout, Web Performance Optimization (WPO), Code Refactoring, Testing, Scrum, Test-driven Development (TDD), Cross-platform, Mobile Development, Microfrontends, E2E Testing, Microservices
Platforms
Amazon Web Services (AWS), Google Chrome, Web, Firebase, Android, iOS, Google Cloud Platform (GCP), Vercel, WordPress, Docker, Heroku, MacOS, Webflow
Storage
MongoDB, PostgreSQL, IndexedDB, JSON, Google Cloud, Firebase Realtime Database
Industry Expertise
Web Design
Other
Enzyme, Storybook, Front-end, Front-end Development, Responsive UI, Responsive Design, Chrome Extensions, Styled-components, Interactive UI, Web Development, Web Components, User Experience (UX), Single-page Applications (SPAs), APIs, ServiceNow, Design Systems, Full-stack, Design, UI Development, Software Architecture, Solution Architecture, Architecture, User Interface (UI), Axios, SVG, A/B Testing, Startups, Pixel Perfect, Test Case Development, Responsive Web Apps, Application State Management, Software Engineering, Dashboards, Software as a Service (SaaS), Web Animation, TinyMCE, UI Frameworks, Product Engineering, Web UX, Server-side Rendering (SSR), Minimum Viable Product (MVP), Mobile-first Design, Responsiveness, UI Animation, Animation, Charting, Web Applications, CSS Animations, Tailwind UI, CSS-in-JS, Memory Optimization, Performance Optimization, Large-scale Projects, SSG, Web Scalability, Caching, DOM Parsing, UI Components, Web App Development, Large Data Sets, Zustand, Deployment, Charts, Lottie, Front-end Design, Complex Application User Interfaces (UI), Teamwork, Code Review, Landing Pages, Service Workers, Performance, Web Accessibility, A11Y, API Integration, Material Design, Full-stack Development, Back-end Development, 3D, SaaS, Technical Leadership, WebSockets, Large Language Models (LLMs), Monorepos, PDF, UI Automation, Web App Automation, Mobile Apps, Data Visualization, Manifest V3, Front-end Architecture, Artificial Intelligence (AI), Integration, FastAPI, MERN Stack, Vite, React Three Fiber (R3F), Mobile App Development, HTML5 Audio, Mobile First, Leadership, OAuth, Learning Management Systems (LMS), Browser Automation, Open Source, Canvas API, Single Sign-on (SSO), WYSIWYG Web Builders, Core Web Vitals, Lazy Loading, Extensions, OWASP, Generative Artificial Intelligence (GenAI), Cloud, CI/CD Pipelines, Optical Character Recognition (OCR), Headless CMS, Content Management Systems (CMS), AI Integration, Communication, Back-end, Progressive Web Applications (PWAs), Accessibility, OpenAI, XState
How to Work with Toptal
Toptal matches you directly with global industry experts from our network in hours—not weeks or months.
Share your needs
Choose your talent
Start your risk-free talent trial
Top talent is in high demand.
Start hiring