profile-pic

Ayush Kumar Papnai

A curious and problem solving mind which has helped fintech, ed-tech and now energy market teams to better there UI journey with the help of exceptional work ethics and dedication on products.

  • Role

    Sr Software Engineer II & Jekyll Developer

  • Years of Experience

    6.9 years

  • Professional Portfolio

    View here

Skillsets

  • Git
  • Lazy Loading
  • Miro
  • nginx
  • React hook form
  • react testing library
  • Recharts
  • Shadcn
  • Adobexd
  • Ci/Cd Pipelines
  • Jenkins
  • Google Tag Manager
  • Hubspot
  • Jekyll
  • Jira
  • JWT
  • NPM
  • Restapis
  • webpack
  • Wordpress
  • Docker
  • Next.js
  • Node.js
  • React.js
  • TypeScript
  • Jest
  • Nx
  • vite
  • Tailwind
  • Chakra UI
  • MongoDB
  • Redux
  • asset optimization
  • CSS
  • Express.js
  • Figma
  • GitHub Actions
  • Google Analytics
  • HTML
  • JavaScript

Professional Summary

6.9Years
  • Apr, 2025 - Present1 yr 4 months

    Senior Software Engineer 2

    Zopper
  • Dec, 2022 - Aug, 20252 yr 8 months

    Senior Software Engineer

    Zopper
  • Jun, 2022 - Nov, 2022 5 months

    Software Developer ( Frontend )

    Customized Energy Solutions
  • Jun, 2019 - Nov, 2019 5 months

    Software Developer

    Creaxt Inc.
  • Nov, 2019 - Dec, 20201 yr 1 month

    Frontend / User Interface Designer

    Creaxt Inc.
  • Jan, 2021 - May, 20221 yr 4 months

    Web Developer

    Clear

Applications & Tools Known

  • icon-tool

    React

  • icon-tool

    TypeScript

  • icon-tool

    Node.js

  • icon-tool

    Node Package Manager

  • icon-tool

    Redux

  • icon-tool

    Design Thinking

  • icon-tool

    UX Research

  • icon-tool

    Tailwind

  • icon-tool

    SEO

  • icon-tool

    Next.js

  • icon-tool

    Jenkins

  • icon-tool

    Docker

Work History

6.9Years

Senior Software Engineer 2

Zopper
Apr, 2025 - Present1 yr 4 months
    Policy Admin System Platform: Built a SaaS platform for banks and insurers to manage the full customer lifecycle using React.js, Redux, jBPM, and JSON-driven configs. Developed a dynamic form engine and a configurable UI renderer for rapid onboarding and validation. Integrated a custom TanStack Table-based grid and implemented multi-language support with i18next. Ensured accessibility (WCAG 2.1) compliance across form components and UI flows. Maintained quality with Jest and Playwright testing. No Code - Low Code Platform: Defined and led the front-end architecture using React.js, Redux, React Hook Form, and Chakra UI to build scalable and maintainable applications. Led a team of 4 engineers to architect a low-code dashboard builder with drag-and-drop UI, customizable widgets, real-time data binding, and responsive design using React and Node.js. The platform also powered internal tools like email and PDF generators boosting sprint output by 20% and cutting dev/config time by 50%. Platform Engineering: Established a scalable monorepo architecture using React, Nx, Yarn, Vite, Docker and Eslint, significantly improving development velocity and collaboration. Built a reusable component library using Chakra UI and React, enabling consistent design and rapid development across teams. Achieved 40% faster build speeds and streamlined deployment workflows.

Senior Software Engineer

Zopper
Dec, 2022 - Aug, 20252 yr 8 months
    SaaS-based Insurance Platform: Collaborated closely with product and design teams to streamline requirements and ensure seamless user experiences. Improved reliability and scalability for a React-based insurance platform handling 250K+ policy transactions/month by implementing PWA features, responsive design, and performance optimizations (code-splitting, lazy loading, efficient state management). Integrated RBAC for secure access control, leveraged Redux RTK for scalable state management, and React Hook Form for dynamic, validated form flows. Performance Optimization: Boosted load times by 50% and improved Lighthouse scores by leveraging React features like code-splitting, lazy loading, memoization (React.memo, useMemo, useCallback), and reducing render cycles resulting in faster initial paint and smoother UX. Internal Tool: Self-initiated and built an internal tool to automate HTML email template management, reducing manual QA and content delivery effort by 70%. Developed with a Node.js backend, it featured a centralized repository for reusable assets (AWS S3) and copiable HTML templates. Enabled teams to upload, preview, and send test emails via the Gmail API, improving turnaround time for campaign testing and ensuring consistent branding across communications.

Software Developer ( Frontend )

Customized Energy Solutions
Jun, 2022 - Nov, 2022 5 months

Web Developer

Clear
Jan, 2021 - May, 20221 yr 4 months
    Performance & SEO Optimization: Improved Core Web Vitals scores from 45 to 90+ by optimizing JavaScript, deferring non-critical assets, and lazy loading. Reduced CSS/JS bundle size and improved LCP, FID, and CLS using Lighthouse and DevTools. SEO enhancements boosted page indexing and discoverability. Resulted in 18% retention uplift and 100K+ monthly organic users. Currency Conversion Tool: Built a responsive currency conversion tool using React and Next.js, integrating live exchange rate APIs for real-time accuracy. Collaborated with the UX team by providing key design feedback that improved usability and led to a 15% increase in user engagement. Analytics & A/B Testing: Integrated a custom A/B testing framework using Retool and GTM, enabling dynamic experiment control. Leveraged Google Analytics to collect user behavior data and optimize funnels resulting in a 25% boost in product adoption. Platform Engineering: Collaborated with the marketing team to design the architecture for a blogging platform. Built reusable layout and SEO meta components in React, enabling consistent structure, faster page creation, and improved organic reach.

Frontend / User Interface Designer

Creaxt Inc.
Nov, 2019 - Dec, 20201 yr 1 month

Software Developer

Creaxt Inc.
Jun, 2019 - Nov, 2019 5 months
    Company Portfolio Website: Designed and developed the startups portfolio website from scratch using Angular, Material UI, and pure CSS animations, incorporating interactive UI elements. The site effectively showcased the product vision and was well-received by investors during early-stage funding discussions. Marketing Website: Developed e-commerce marketing platform, raising engagement by 40%. UI/UX Architecture: Designed modern UI layouts and led the revamp of the platforms interface, which played a key role in investor acquisition. Collaborated with the team to convert designs into scalable React applications using Material UI, HTML, CSS, and frontend patterns for long-term maintainability.

Major Projects

3Projects

TailwindChef VS Code Extension

    Developer productivity tool for Tailwind CSS providing intelligent autocomplete, real-time snippet generation, and custom configuration via twc-config.js. Built using TypeScript and the VSCode API to streamline UI development and maintain design consistency.

Form Magic Dynamic Form Builder

    Drag-and-drop React form builder supporting validation, real-time preview, and JSON schema export. Built with TypeScript, Next.js, React Hook Form, and DnD Kit; leveraged modular renderer architecture for internal onboarding tools at Zopper.

Lego Blocks Headless Component Library

    Modular React + TypeScript library of 30+ reusable, unstyled components built with headless architecture for flexible design integration. Improved developer velocity and UI consistency across multiple projects.

Education

  • B.E. in Computer Science

    Savitribai Phule Pune University (2019)

Certifications

  • React frontend development

  • Book store website development using api and json

  • Web ui/ux design certification using adobe xd

  • Responsive web development with angular 7

  • The depth of ux/ui for a website development from udemy.

A Few Screening Questions Before You Begin

My name is Ayush, and I am currently working as a senior front-end developer at Zoper. My current experience is around 5 plus years. And I have been working at Zoper for around 6 to 5 projects, which includes 5 to 6 projects. This includes a drag and drop form builder that provides product managers and the business team to create flows and new UIs by dragging and dropping immediately. That also helps the business team to create these flows really quickly, and they can even create dashboards from it. The form is well-equipped with validations and all. We are internally using React JS and no other library is being used. For React, we are using Formic, which provides React Hook form, that provides validations and basic upload functionalities and all.

CSS grid systems can only integrate into a complex application to ensure consistency and maintainability across various modules. Okay, so CSS grid systems can be, like, basically, we can create different classes for CSS grid maintaining it consistently across the project. And the basic thing that we can do is imagine the grid as a 12-column grid, and rows can be a number of rows. We can create classes from column 1 to column 12. And then, immediately, we can reuse them across the project by defining a grid class and adding up the columns. Like, one element can flex to display how many columns into how many columns. So, that's how we can create a grid system that most designers use, such as Figma.

So for our to automate the deployment process of any single page application using Amazon Web Services, like, we can basically go with a workflow that either GitHub or Bitbucket provides us, and we can continuously verify new updates. And if you want to upload the new development and deploy the new deployment immediately, we can create the whole workflow like that. Or even we can use Jenkins as well, for the same thing or any CICD pipeline software like Jenkins. Yeah. And also, if we are using Bitbucket or GitHub, that's what we always use, so we can directly create workflows. That's a better way to streamline the process of uploading a new deployment to AWS servers. And yeah, that will almost remove all the dependency on developers or DevOps to deploy a certain project to production or any stage, like dev staging or production. But one thing that we can do here is like we can also optimize this. We can depending on the scenario and use cases. If it's a marketing website, we can use a time that could be a day and a half. The changes would deploy on a half-day basis or a time would be there because marketing websites require frequent updates to be deployed with changes for AB testing and all. But a better way for other applications like dashboards and other user-facing websites, we can add test cases as well into our workflows and pipelines and then deploy them at nighttime or any convenient time that we think our users' count is really low. And that will help perfectly for any big applications, that's how we can ignore downtimes and all. And for monitoring purposes, we can definitely use some monitoring software that are available in the market. Though, currently, I haven't used any, but yeah, we can use these as well.

Can't find some of the final condition which is returning based on user roles. Now we have to issue that. So

What was my third model used to test? Does Calabrio react? It is an application that accepts only using AWS backend services. What would be the result?

Implementing a multi-tenant front end architecture involves several steps. So, like, for implementing a highly configurable multi-tenant front end architecture, we can definitely create modular, like, we can use modularity here. The very basic thing is, there are multiple people that would be using a particular application. So, first, we can divide the front end based on the users that are there. We can use a role-based authentication system here. We can create permissions. Like, every role would get access to some particular route. We will have to bifurcate those routes and add protected and unprotected routes for those particular roles. And as well as, once the user enters the application, let's say we have an application that would be managed by, say, an Uber-like thing. So, if there is a guy who is managing all these Ubers, then the Uber application user would be one front end, and the other would be the back end, with an admin handling all these Uber Riders. So, let's say those are 2 roles we are having. Once any of them logs in to the particular role, particular dashboard or application, we would check if the user is in the role-based authentication system. So, what we can do is we can just send a business rule on the login API response where we can send the particular entity would be using. And then, according to that, after login, we can bifurcate the protected routes, like the authorized ticket routes that this user will only be able to authenticate, this authenticated user would only be able to access those particular routes that he or she is assigned to. And other than that, for implementing multiple front end architecture. And then, if we can use lazy loading for components that are not being loaded for that particular role, and that would significantly decrease the amount of load that application takes on the load time. The time would be decreased, and that's how we can definitely make it highly configurable. And also, for permission, we can add permission page-wise permissioning or feature-wise permissions. So, we can create a map of each feature, and that feature is allowed to which role. So, on the time of creating that particular role, we can just check if the screen is shared between 2 users, then it's not required.

And the CSS code went for a response from the outside. Use the CSS grid system. Identify the possible issues with the grid template column definition. Okay?

Techniques would you apply to optimize server handling? Warrior applications for enhanced SEO and performance. And so for the server side handling technique, we can

Yeah. For accessibility, I have been working with banks so very closely. And with the bank, what we face mostly is the user coming to the website and really struggling with the basic keyboard presses and other things, like if they're doing it, if any user is coming there. Now, what happens is when a user tries to enter a website, then

I have just completed.