Usama is available for hire
Hire UsamaUsama Tufail
Verified Expert in Engineering
Software Developer
Faisalabad, Punjab, Pakistan
Toptal member since August 8, 2022
Bio
Usama is an extraordinarily disciplined full-stack developer. Having experience in HTML, CSS, JavaScript, React, TypeScript, MongoDB, Express, SQL, Husky, Git, NestJS, GraphQL, and API integration, he thrives in both front-end and back-end development. He quickly masters new technologies and stays ahead of industry trends. Usama's adaptability, continual learning, and high standards make him a solid asset to any project or team.
Portfolio
Marketplug
React, React Redux, Material UI, Microfrontends, Antd...
NTA
React, Next.js, TypeScript, Tailwind CSS, Vercel...
Humans
React, Next.js, Firebase, Vercel, HTML, CSS3, Web UI, React Native, GraphQL...
Experience
- React - 7 years
- Next.js - 6 years
- Redux - 4 years
- JSON Web Tokens (JWT) - 4 years
- TypeScript - 4 years
- Express.js - 3 years
- Tailwind CSS - 3 years
- NestJS - 3 years
Work Experience
Senior Front-end Engineer
2023 - 2024
Marketplug
- Headed the development of Marketplug's user interface, utilizing React, Redux, and Material UI, a tool that allows businesses and customers to connect seamlessly.
- Created a sophisticated analytics dashboard with React and Chart.js, providing businesses with real-time insights into user interactions and data ownership.
- Led workshops on React and front-end best practices for the engineering team, enhancing team capabilities and efficiency by 45%.
- Collaborated closely with the back-end team and UI/UX designers to ensure a coherent development lifecycle, shortening the feedback loop by 40% and enhancing the overall product quality.
- Implemented a comprehensive linting and code review process that reduced bugs by 70% and improved feature deployment times by 25%.
Technologies: React, React Redux, Material UI, Microfrontends, Antd, Amazon Web Services (AWS), Agile, GitLab CI/CD, GitLab, Docker, Git, NGINX, Authentication, Headless CMS, Babel, Progressive Web Applications (PWAs), Forms, Web Forms, Google API, Social Media, Mapbox, WebSockets, Agile Product Delivery, Product-led Growth (PLG), JSON Web Key (JWK), Auth0 API, Auth, Google Analytics, Artificial Intelligence (AI), Startups, Mobile First, React Router, Midjourney, Mixtral, Ollama, Payment APIs, Payments, Third-party Integration, Software Architecture, Zustand, Playwright, React Testing Library, Technical Leadership
Full-stack Developer
2022 - 2022
NTA
- Created the UI for a complete application and integrated APIs to make it fully functional.
- Provided support consistently to the team and project owner to ensure we got everything working as expected.
- Oversaw the usage of the application using LogRocket and fixed any potential bugs that were already present.
Technologies: React, Next.js, TypeScript, Tailwind CSS, Vercel, Content Management Systems (CMS), HTML, CSS3, Web UI, React Native, GraphQL, JSX, CSS, GitHub, Responsive Web Apps, Front-end, Server-side Rendering (SSR), HTML5, Behavior-driven Development (BDD), Webpack, Firebase Authentication, Redux, Responsive UI, API Hooking, Stripe, JavaScript Testing, SQL, Passport.js, Prisma, Formik, Firebase, REST, Responsive Development, Amazon S3 (AWS S3), ESLint, Axios, SCSS, SendGrid, SendGrid API, Husky, DigitalOcean, Twilio, Sass, Website Performance, Website Optimization, Videos, APIs, Charts, MERN Stack, Amazon DynamoDB, API Integration, Create React App, Web Development, Full-stack Development, Architecture, JavaScript, Responsive Web Design (RWD), Supabase, Stripe Payments, D3.js, Headless Software, SAML, SAML-auth, Cloud Firestore, OpenAI, Agile, NoSQL, Asynchronous Programming, Cross-browser Compatibility, Front-end Development, NextAuth.js, Responsive Design, Serverless Architecture, Web App Development, Amazon Cognito, XML, Windows, Design Systems, SSL Certificates, Web Hosting, User Experience (UX), Redis, Authentication, Optical Character Recognition (OCR), Progressive Web Applications (PWAs), Forms, Web Forms, Google API, Social Media, Mapbox, WebSockets, Agile Product Delivery, Product-led Growth (PLG), JSON Web Key (JWK), Auth0 API, Auth, Google Analytics, Mobile First, React Router, Payment APIs, Payments, Third-party Integration, Software Architecture, Back-end, Zustand, Playwright, React Testing Library, Jira, Technical Leadership
Lead Front-end Engineer
2021 - 2022
Humans
- Helped the customer build UIs according to their needs by providing proper support and design ideas. As the client was already a Figma designer, I assisted in creating Figma designs by giving adequate feedback and support.
- Oversaw the process of creating a working and functional web app using Next.js and Python Django. Reviewed code and merged pull requests.
- Managed post-production and user feedback. Led junior developers in the team and helped them complete features on time.
Technologies: React, Next.js, Firebase, Vercel, HTML, CSS3, Web UI, React Native, GraphQL, JSX, CSS, GitHub, Responsive Web Apps, Front-end, HTML5, Styled-components, Redux, Tailwind CSS, Amazon Web Services (AWS), Responsive UI, API Hooking, Stripe, Behavior-driven Development (BDD), SQL, Bootstrap, Ant Design, Jest, Passport.js, Prisma, Argon.js, Twilio API, Formik, Socket.IO, REST, Responsive Development, Cloudinary, MySQL, ESLint, Axios, SCSS, Husky, DigitalOcean, Twilio, Website Performance, Website Optimization, Storybook, React Query, CI/CD Pipelines, Full-stack, Videos, APIs, Charts, MERN Stack, API Integration, Create React App, Web Development, Full-stack Development, Architecture, JavaScript, Responsive Web Design (RWD), Recharts, SAML, SAML-auth, Cloud Firestore, OpenAI, Agile, NoSQL, Asynchronous Programming, Cross-browser Compatibility, Front-end Development, NextAuth.js, Responsive Design, Serverless Architecture, Web App Development, Amazon Cognito, XML, Windows, Design Systems, SSL Certificates, Web Hosting, User Experience (UX), Redis, Design, Search Engine Optimization (SEO), Authentication, Babel, Progressive Web Applications (PWAs), Forms, Web Forms, Webhooks, Google API, Social Media, Mapbox, WebSockets, Agile Product Delivery, Product-led Growth (PLG), JSON Web Key Set (JWKS), JSON Web Key (JWK), Auth0 API, Auth, Google Analytics, Startups, Mobile First, React Router, Payment APIs, Payments, Third-party Integration, Software Architecture, Zustand, Playwright, React Testing Library, Jira, Technical Leadership
Lead Front-end Engineer
2021 - 2022
AMF Media
- Developed the influencer search feature for the application, where brands can search for influencers for their marketing.
- Tracked issues using LogRocket and interacted with users to fix them following the best practices.
- Managed and distributed tasks among internees and junior developers and kept track of their progress.
Technologies: React, Next.js, Vercel, Styled-components, Redux, Content Management Systems (CMS), HTML, CSS3, Web UI, React Native, JSX, CSS, GitHub, Responsive Web Apps, Front-end, TypeScript, HTML5, Adobe Experience Design (XD), Behavior-driven Development (BDD), Webpack, Firebase Authentication, Responsive UI, API Hooking, Stripe, JavaScript Testing, Bootstrap, Ant Design, Formik, SuperTest, Redux Form, REST, Responsive Development, Cloudinary, ESLint, Axios, SCSS, SendGrid, SendGrid API, Husky, DigitalOcean, Sass, Website Performance, Website Optimization, Storybook, React Query, CI/CD Pipelines, Videos, APIs, Analytics, Charts, MERN Stack, API Integration, Create React App, Web Development, Full-stack Development, Architecture, JavaScript, Google Calendar API, Responsive Web Design (RWD), Recharts, Cloud Firestore, Agile, NoSQL, Asynchronous Programming, Cross-browser Compatibility, Front-end Development, NextAuth.js, Responsive Design, Serverless Architecture, Web App Development, Electron, XML, Windows, Design Systems, Filestack, SSL Certificates, Stripe API, Web Hosting, User Experience (UX), Redis, Google Cloud Platform (GCP), Search Engine Optimization (SEO), Authentication, Headless CMS, Progressive Web Applications (PWAs), Forms, Web Forms, Google API, Social Media, Mapbox, WebSockets, Agile Product Delivery, Product-led Growth (PLG), JSON Web Key Set (JWKS), JSON Web Key (JWK), Auth0 API, Auth, Google Analytics, Startups, Mobile First, React Router, Large Language Models (LLMs), Payment APIs, Payments, Third-party Integration, Software Architecture, Jira, Technical Leadership
Full-stack Developer
2019 - 2022
An Online Freelance Agency
- Developed multiple applications while working in the freelancing agency and achieved everything on time while keeping a high rating.
- Communicated with various clients and helped them accomplish their goals while managing teams.
- Acted as a project manager on more than three projects, all of which were completed successfully.
Technologies: MongoDB, Express.js, Node.js, React, JavaScript, HTML, CSS3, React Native, JSX, CSS, GitHub, Responsive Web Apps, Material UI, Front-end, TypeScript, HTML5, Adobe Experience Design (XD), Semantic UI, Firebase Authentication, Cypress, Redux, Amazon Web Services (AWS), Responsive UI, eCommerce, API Hooking, Vercel, NestJS, Stripe, PostgreSQL, Auth0, Behavior-driven Development (BDD), JavaScript Testing, SQL, Bootstrap, Ant Design, Pactum, Jest, Passport.js, Prisma, Argon.js, Twilio API, Formik, Socket.IO, SuperTest, Redux Form, REST, Responsive Development, Amazon S3 (AWS S3), Cloudinary, MySQL, ESLint, Axios, SCSS, Husky, Twilio, Amazon EC2, Serverless, AWS Lambda, ECMAScript (ES6), Sass, Website Performance, Website Optimization, Backbone.js, Storybook, React Query, Single Sign-on (SSO), CI/CD Pipelines, Full-stack, APIs, Charts, MERN Stack, Amazon DynamoDB, API Integration, HubSpot, QuickBooks API, Create React App, SEO Tools, Web Development, Full-stack Development, Marketplaces, Architecture, AdonisJS, Radix UI, Google Calendar API, Discord, Responsive Web Design (RWD), AngularJS, Live Chat, Supabase, Stripe Payments, D3.js, Recharts, Headless Software, Shopify, Oxygen, Remix.run, HubSpot Marketing Hub, HubSpot CRM, SAML, SAML-auth, Data Visualization, Cloud Firestore, OpenAI, Electronic Health Records (EHR), NoSQL, Asynchronous Programming, Cross-browser Compatibility, Front-end Development, NextAuth.js, Responsive Design, Learning Management Systems (LMS), Serverless Architecture, Web App Development, Electron, Gatsby, Chakra UI, Chrome Extensions, User Interface (UI), Design Systems, Clerk, OAuth 2, Filestack, Load Balancers, SSL Certificates, NGINX, Stripe API, Web Hosting, Flutter, Web Design, User Experience (UX), Web3.js, Redis, Google Cloud Platform (GCP), Docker, Design, Search Engine Optimization (SEO), AWS AppSync, Domain-driven Design (DDD), Automation, Authentication, Zapier, Apollo, Headless CMS, WordPress, Babel, Progressive Web Applications (PWAs), Forms, Web Forms, Webhooks, Google API, LinkedIn API, Social Media, Mapbox, WebSockets, Generative Artificial Intelligence (GenAI), Product-led Growth (PLG), JSON Web Key (JWK), Auth0 API, Customer Relationship Management (CRM), Auth, Google Analytics, Artificial Intelligence (AI), Mobile First, React Router, Payment APIs, Payments, Third-party Integration, Back-end, Jira, Technical Leadership
Full-stack Developer
2019 - 2019
Invictus Solutions
- Developed a voice-assisted eCommerce store using AI and React that helps disabled persons navigate the website smoothly.
- Created scripts to automate redundant work, including component creation, folders creation, and website automation.
- Kept track of repositories, reviewed code from different developers, and managed pull requests.
Technologies: Ant Design, Material UI, eCommerce, API Hooking, Auth0, Amazon S3 (AWS S3), Axios, Redux, React, Express.js, AWS Lambda, eCommerce UI, eCommerce UX, Website Performance, Website Optimization, Backbone.js, Storybook, Front-end, Amazon Web Services (AWS), Single Sign-on (SSO), CI/CD Pipelines, Full-stack, APIs, Analytics, Charts, MERN Stack, Amazon DynamoDB, API Integration, HubSpot, QuickBooks API, Create React App, SEO Tools, Web Development, Full-stack Development, Marketplaces, Architecture, JavaScript, HTML, CSS3, CSS, AdonisJS, Radix UI, Google Calendar API, Discord, Responsive Web Design (RWD), AngularJS, Live Chat, Supabase, Stripe Payments, Recharts, Headless Software, HubSpot Marketing Hub, HubSpot CRM, SAML, SAML-auth, Data Visualization, Cloud Firestore, Electronic Health Records (EHR), NoSQL, Asynchronous Programming, Cross-browser Compatibility, Front-end Development, NextAuth.js, Responsive Design, Learning Management Systems (LMS), Serverless Architecture, Web App Development, Amazon Cognito, Electron, Gatsby, Chakra UI, Chrome Extensions, User Interface (UI), Design Systems, Clerk, OAuth 2, Filestack, Load Balancers, SSL Certificates, NGINX, Stripe API, Web Hosting, Web Design, User Experience (UX), Web3.js, Redis, Google Cloud Platform (GCP), Docker, Design, Search Engine Optimization (SEO), AWS AppSync, Automation, Authentication, Zapier, Apollo, Headless CMS, WordPress, Babel, Progressive Web Applications (PWAs), Forms, Web Forms, Webhooks, Google API, Social Media, Mapbox, WebSockets, Customer Relationship Management (CRM), Auth, Google Analytics, Artificial Intelligence (AI), Startups, Mobile First, React Router, Back-end, Jira, Technical Leadership
Full-stack Developer
2018 - 2019
Gamicacloud
- Developed Magento clone using MERN stack and Ant Design to manage client's eCommerce.
- Created a web-based language compiler, which helps compile code on the go.
- Built an eCommerce mobile application using React Native.
Technologies: Ant Design, React, Node.js, MongoDB, Express.js, Amazon EC2, Adobe Experience Design (XD), Auth0, Axios, Behavior-driven Development (BDD), API Hooking, Amazon S3 (AWS S3), Cloudinary, Content Management Systems (CMS), CSS3, Website Performance, Website Optimization, CoffeeScript, Backbone.js, Amazon Web Services (AWS), CI/CD Pipelines, Full-stack, Waterfall Methodology, APIs, Charts, Amazon DynamoDB, API Integration, HubSpot, QuickBooks API, Create React App, SEO Tools, Web Development, Full-stack Development, Marketplaces, Architecture, JavaScript, HTML, CSS, AdonisJS, Radix UI, Google Calendar API, Discord, Responsive Web Design (RWD), AngularJS, Live Chat, Supabase, Stripe Payments, D3.js, Headless Software, HubSpot Marketing Hub, HubSpot CRM, SAML, SAML-auth, Data Visualization, Electronic Health Records (EHR), Asynchronous Programming, Cross-browser Compatibility, Front-end Development, NextAuth.js, Responsive Design, Learning Management Systems (LMS), Serverless Architecture, Web App Development, Amazon Cognito, Electron, Chakra UI, Chrome Extensions, User Interface (UI), Design Systems, Clerk, OAuth 2, Filestack, Load Balancers, SSL Certificates, NGINX, Stripe API, Web Hosting, Web Design, User Experience (UX), Web3.js, Redis, Google Cloud Platform (GCP), Docker, Design, Search Engine Optimization (SEO), Domain-driven Design (DDD), Automation, Authentication, Zapier, Apollo, Headless CMS, WordPress, Babel, Progressive Web Applications (PWAs), Forms, Web Forms, Webhooks, Google API, Social Media, Mapbox, WebSockets, Customer Relationship Management (CRM), Auth, Google Analytics, Artificial Intelligence (AI), Mobile First, React Router, Back-end, Jira, Technical Leadership
Project History
Human Dilemmas
The Human Dilemmas project aims to provide an unbiased and open-minded platform for people to share their thoughts and feelings on taboo topics, such as mental health, sexuality, and personal beliefs. It focuses on conducting surveys and research on topics that are often considered difficult to discuss in society and helps educate and raise awareness about these sensitive issues.
As the technical project manager, I managed the technical aspects of the project, including the development and implementation of the survey platform, data collection and analysis, and reporting. I also ensured that the technology behind this platform was secure, accurate, and user-friendly.
The survey platform was designed to be user-friendly and anonymous to encourage participants to be honest and candid in their responses. It was built using the latest technologies and frameworks, such as React, Python, Django, and Postgres.
As the technical project manager, I managed the technical aspects of the project, including the development and implementation of the survey platform, data collection and analysis, and reporting. I also ensured that the technology behind this platform was secure, accurate, and user-friendly.
The survey platform was designed to be user-friendly and anonymous to encourage participants to be honest and candid in their responses. It was built using the latest technologies and frameworks, such as React, Python, Django, and Postgres.
Neufluence
https://neufluence.comThis project aims to help companies and influencers achieve their marketing goals by providing a comprehensive and efficient platform for influencer marketing. It focuses on utilizing influencer marketing to promote and increase brand awareness for various companies.
As the full-stack lead developer, I led the development team in creating and implementing a comprehensive platform that enables the seamless execution of influencer marketing campaigns. I also oversaw the overall technical direction of the project, managed the development team, and implemented best practices to ensure timely delivery and high-quality results.
The platform includes a user-friendly interface that allows companies to easily identify and connect with influencers, track campaign performance, and analyze data to optimize their marketing strategy. It also provides tools for influencers to manage their campaigns, track their earnings, and interact with their audience. The platform was built using the latest web technologies and frameworks, such as React, Node.js, and MongoDB, ensuring scalability and high performance.
As the full-stack lead developer, I led the development team in creating and implementing a comprehensive platform that enables the seamless execution of influencer marketing campaigns. I also oversaw the overall technical direction of the project, managed the development team, and implemented best practices to ensure timely delivery and high-quality results.
The platform includes a user-friendly interface that allows companies to easily identify and connect with influencers, track campaign performance, and analyze data to optimize their marketing strategy. It also provides tools for influencers to manage their campaigns, track their earnings, and interact with their audience. The platform was built using the latest web technologies and frameworks, such as React, Node.js, and MongoDB, ensuring scalability and high performance.
Maxxis | Pakistan Web App
Maxxis is an eCommerce application that helps users find the best tires that meet their needs.
I worked as a lead developer in the team. My major responsibility was managing developers (assigning and reviewing tasks) and then implementing critical features myself to save time. I was also tasked with managing pipelines to transfer code from our repository to servers without hustle.
I worked as a lead developer in the team. My major responsibility was managing developers (assigning and reviewing tasks) and then implementing critical features myself to save time. I was also tasked with managing pipelines to transfer code from our repository to servers without hustle.
Learnatric
https://www.awesomescreenshot.com/video/14068506?key=f0007c4116a33bb4b6ee99a0cc53464cThe project provides a dynamic and personalized learning path for students from the pre-K to third-grade level. By combining data and machine learning techniques, an individualized curriculum was created for each student, tailored to their unique needs and abilities. The curriculum is constantly updated and adjusted as students progress, ensuring they are always challenged and engaged in learning. The project also includes interactive and multimedia-rich learning materials to keep students interested and motivated. The goal is to improve student outcomes by providing a more personalized and effective educational experience.
I was the lead developer in this project, managing the team and helping choose libraries, frameworks, linting, and stuff that would boost the application's performance. I added some critical features in the app that were highly time sensitive to ensure the project was completed before the deadline.
I was the lead developer in this project, managing the team and helping choose libraries, frameworks, linting, and stuff that would boost the application's performance. I added some critical features in the app that were highly time sensitive to ensure the project was completed before the deadline.
Toptal Node.js Accelerator
https://www.loom.com/share/462b9bff40ff42a8b1c230cbca1c7cfdThe Node.js Accelerator is an exclusive learning program that educates JavaScript or back-end developers in Node.js, Express, NestJS, and TypeScript. It was a two-month program consisting of rigorous learning exercises, live instructor-led sessions by SMEs, hands-on activities, along with a stringent evaluation process, comprehensive assessments, and an incremental project where participants implement a few microservices (REST APIs) using Express and NestJS. The project simulated an eCommerce application consisting of two services, i.e., a user service to implement the authentication with user management and a product-catalog service that offers functionalities to manage inventory.
Racquet Pass Application
https://www.loom.com/share/86eacf1bb7ce4008a82883e8b66c4abfRacquet Pass is a web application that I built using React and Tailwind CSS that connects players and vendors in the sports industry. The platform has user types: Players, and Vendors, with a variety of features to enhance their experience.
Players can search for vendors based on location, rating, and other criteria. The application also allows players to communicate with vendors directly and book services such as training sessions, rentals, and events. They can review the vendors' ratings, read other players' reviews, and leave feedback to help improve the quality of the services.
Vendors can create their profiles, add services, and manage their availability. They can customize their profiles with images to showcase their services. Vendors can respond to players' requests and accept or decline them as per their availability.
I designed the user interface with simplicity and functionality, making it easy for users to navigate and find what they are looking for. The application uses React and Tailwind CSS, providing a seamless user experience with fast loading times, responsive design, and easy-to-use features.
Players can search for vendors based on location, rating, and other criteria. The application also allows players to communicate with vendors directly and book services such as training sessions, rentals, and events. They can review the vendors' ratings, read other players' reviews, and leave feedback to help improve the quality of the services.
Vendors can create their profiles, add services, and manage their availability. They can customize their profiles with images to showcase their services. Vendors can respond to players' requests and accept or decline them as per their availability.
I designed the user interface with simplicity and functionality, making it easy for users to navigate and find what they are looking for. The application uses React and Tailwind CSS, providing a seamless user experience with fast loading times, responsive design, and easy-to-use features.
CannaSpyglass
https://cannaspyglass.com/CannaSpyglass is a B2B market-intelligence suite that delivers verified data on 65,000 + licensed operators, 16,000 products, and 5,000 vendors. Its toolset, custom report builder, interactive map, revenue analytics, and granular filters, helps sales teams close faster and investors spot opportunities worldwide. I was a front-end-focused full-stack engineer in this project and contributed as follows:
• Migrated the legacy Create-React-App codebase to Next.js App Router, enabling SSR for SEO-critical pages and cutting initial load by 45%.
• Introduced a faceted global-filters system (region, license type, revenue band, product category) with React-Query, returning results in under 300ms and letting users drill from continent down to zip code.
• Re-designed core UX flows, operator profile, comparison dashboard, and report wizard, reducing average clicks-to-insight from 11 to 6 and lifting session duration by 23%.
• Led triage on front-end bugs, paired with the back-end team to trace issues, and shipped hot-fixes within SLA.
• Streamlined the monorepo documents, so contributors on macOS or Windows could spin up the stack in under 10 minutes.
• Migrated the legacy Create-React-App codebase to Next.js App Router, enabling SSR for SEO-critical pages and cutting initial load by 45%.
• Introduced a faceted global-filters system (region, license type, revenue band, product category) with React-Query, returning results in under 300ms and letting users drill from continent down to zip code.
• Re-designed core UX flows, operator profile, comparison dashboard, and report wizard, reducing average clicks-to-insight from 11 to 6 and lifting session duration by 23%.
• Led triage on front-end bugs, paired with the back-end team to trace issues, and shipped hot-fixes within SLA.
• Streamlined the monorepo documents, so contributors on macOS or Windows could spin up the stack in under 10 minutes.
Phia (Web App)
https://phia.comPhia is an AI shopping sidekick that compares prices across 40,000+ retail and resale sites in real time, like “Google Flights for fashion.” I focused mainly on the front end while pitching in on back-end work when needed:
• Redesigned and rebuilt search, PDP, and filters in Next.js 14 App Router and Tailwind, cutting time-to-interactive by 40% and raising user satisfaction to 4.8 stars.
• Added “Share-a-Search” deep links and a Stripe-metered referral flow that drove a 21% bump in organic sign-ups within six weeks.
• Led bug-crunching: fixed hydration mismatches, i18n flashes, and price-sync race conditions, trimming Hotjar rage-clicks by 35%.
• Migrated the marketing site from WP to streamed server components in Next.js 14; First Contentful Paint dropped from 3.4s to 1.2s.
• Integrated the front end with a GraphQL edge that streams live pricing and resale-score data.
• Built a reusable brand/value badge component consumed across web, iOS, and the Chrome extension.
• Ran A/B tests that boosted install-to-active-user conversion by 27%.
• Back-end contributions: added referral/rewards tables in PostgreSQL, wrote NestJS endpoints, and optimized a price-matching query (p95 latency 480ms to 170ms).
• Redesigned and rebuilt search, PDP, and filters in Next.js 14 App Router and Tailwind, cutting time-to-interactive by 40% and raising user satisfaction to 4.8 stars.
• Added “Share-a-Search” deep links and a Stripe-metered referral flow that drove a 21% bump in organic sign-ups within six weeks.
• Led bug-crunching: fixed hydration mismatches, i18n flashes, and price-sync race conditions, trimming Hotjar rage-clicks by 35%.
• Migrated the marketing site from WP to streamed server components in Next.js 14; First Contentful Paint dropped from 3.4s to 1.2s.
• Integrated the front end with a GraphQL edge that streams live pricing and resale-score data.
• Built a reusable brand/value badge component consumed across web, iOS, and the Chrome extension.
• Ran A/B tests that boosted install-to-active-user conversion by 27%.
• Back-end contributions: added referral/rewards tables in PostgreSQL, wrote NestJS endpoints, and optimized a price-matching query (p95 latency 480ms to 170ms).
Phia Chrome Extension
https://chromewebstore.google.com/u/0/detail/phia-best-price-in-one-cl/ehoknmhmadiboejdbinglmbnlghnbldcWith 10,000+ users and a 4.7-star rating, the extension injects a “Should I Buy This?” button that compares the page item against 250 million resale listings and 40,000 online stores, notifying shoppers when cheaper or higher-value options exist. I contributed to this project as follows:
• Built the Manifest V3 extension in React and TypeScript (CRXJS) with a tree-shaken 2.7 MiB bundle.
• Implemented AI-driven content scripts that parse PDPs from Shopify, Salesforce CC, Magento, etc., with 94 % accuracy.
• Added background-service-worker caching for offline price history; reduced API calls by 38%.
• Set up Chrome Web Store CI (semantic-release) and privacy-sandbox telemetry compliant with GDPR/CCPA.
• Built the Manifest V3 extension in React and TypeScript (CRXJS) with a tree-shaken 2.7 MiB bundle.
• Implemented AI-driven content scripts that parse PDPs from Shopify, Salesforce CC, Magento, etc., with 94 % accuracy.
• Added background-service-worker caching for offline price history; reduced API calls by 38%.
• Set up Chrome Web Store CI (semantic-release) and privacy-sandbox telemetry compliant with GDPR/CCPA.
Investler Realty
Investler Realty is a Florida-focused marketplace where buyers, sellers, renters, and agents meet in one hub. Visitors browse MLS-synced listings, run mortgage scenarios, and tap first-time-buyer guides, while agents get a self-service portal with split-cap commission tracking and marketing resources. As the senior front-end engineer in this project, I:
• Migrated the public site to Next.js and TypeScript with server-side rendering for SEO-critical listing pages.
• Built a dynamic search-and-map view powered by Algolia and Mapbox, returning filtered results in under 200ms.
• Created an agent dashboard (React, Zustand, Tailwind) with role-based access, task queues, and real-time lead notifications via WebSockets.
• Set up GitHub Actions CI/CD to Vercel and Supabase Storage for zero-downtime blue-green deploys and wrote Cypress tests that keep regression bugs near zero.
• Implemented SOC-2-aligned security (JWT, rate-limiting, audit logging) and encrypted Supabase media uploads, cutting vulnerability reports by 80%.
• Migrated the public site to Next.js and TypeScript with server-side rendering for SEO-critical listing pages.
• Built a dynamic search-and-map view powered by Algolia and Mapbox, returning filtered results in under 200ms.
• Created an agent dashboard (React, Zustand, Tailwind) with role-based access, task queues, and real-time lead notifications via WebSockets.
• Set up GitHub Actions CI/CD to Vercel and Supabase Storage for zero-downtime blue-green deploys and wrote Cypress tests that keep regression bugs near zero.
• Implemented SOC-2-aligned security (JWT, rate-limiting, audit logging) and encrypted Supabase media uploads, cutting vulnerability reports by 80%.
Education
2020 - 2022
Master's Degree in Computer Science
Virtual University of Pakistan - Lahore, Pakistan
2016 - 2020
Bachelor's Degree in Computer Science
Virtual University of Pakistan - Lahore, Pakistan
Certifications
DECEMBER 2022 - PRESENT
TopAcademy Node.js Accelerator Graduate
Toptal
AUGUST 2020 - PRESENT
Server-side Development with NodeJS, Express and MongoDB
Coursera
AUGUST 2020 - PRESENT
Multiplatform Mobile App Development with React Native
Coursera
JULY 2020 - PRESENT
Front-End Web Development with React
Coursera
Skills
Libraries/APIs
React, Node.js, REST APIs, Twilio API, Formik, Redux Form, Recharts, React Router, jQuery, Stripe, Passport.js, Argon.js, Socket.IO, Shopify API, Backbone.js, React Query, QuickBooks API, Google Calendar API, D3.js, Stripe API, Web3.js, PostgREST, Google API, LinkedIn API, Auth0 API, Auth, Playwright, React Testing Library, SendGrid API, Filestack, React Redux, Antd, Reactstrap
Tools
JSX, GitHub, Firebase Authentication, Create React App, Adobe Experience Design (XD), JavaScript Testing, Figma, Webpack, Auth0, Prisma, SuperTest, React Apollo, Mocha, Amazon Cognito, NGINX, AWS AppSync, Zapier, JotForm, Babel, Google Analytics, Jira, SendGrid, GitLab CI/CD, GitLab, Git, Mongoose, Redux Thunk
Languages
TypeScript, JavaScript, HTML, CSS3, GraphQL, CSS, HTML5, ECMAScript (ES6), Sass, SQL, CoffeeScript, SAML, XML, SCSS
Frameworks
Next.js, Redux, Tailwind CSS, React Native, Express.js, JSON Web Tokens (JWT), Material UI, NestJS, Bootstrap, Ant Design, Jest, Cypress, AdonisJS, Electron, OAuth 2, Flutter, Remix, AngularJS
Paradigms
Behavior-driven Development (BDD), REST, Responsive Development, Responsive Web Design (RWD), Asynchronous Programming, Agile, Serverless Architecture, Search Engine Optimization (SEO), Mobile Development, Automation, Microfrontends, Role-based Access Control (RBAC)
Platforms
Firebase, Twilio, Shopify, Windows, WordPress, Vercel, Amazon EC2, AWS Lambda, Amazon Web Services (AWS), HubSpot, Clerk, Google Cloud Platform (GCP), Docker, Mapbox, Ollama, DigitalOcean
Storage
PostgreSQL, MySQL, Cloud Firestore, Redis, MongoDB, Amazon S3 (AWS S3), Amazon DynamoDB, NoSQL, Web Forms
Industry Expertise
Web Design, Social Media
Other
Styled-components, Web UI, OAuth, Responsive Web Apps, Server-side Rendering (SSR), Axios, Responsive UI, API Hooking, Cloudinary, Front-end, CI/CD Pipelines, Full-stack, APIs, Charts, MERN Stack, API Integration, Web Development, Full-stack Development, Architecture, Supabase, Cross-browser Compatibility, Front-end Development, Responsive Design, Web App Development, Chakra UI, User Interface (UI), Design Systems, PWA, Web Hosting, Authentication, Headless CMS, Forms, Startups, Mobile First, Supabase Auth, Firebase Cloud Functions, Software Architecture, Back-end, Zustand, Content Management Systems (CMS), Semantic UI, eCommerce, Pactum, Serverless, eCommerce UI, eCommerce UX, Website Performance, Website Optimization, Storybook, Single Sign-on (SSO), Waterfall Methodology, CSV, Audio, Videos, API Testing, Analytics, SEO Tools, Marketplaces, Radix UI, Discord, Live Chat, Stripe Payments, Headless Software, Oxygen, Remix.run, HubSpot Marketing Hub, HubSpot CRM, SAML-auth, Data Visualization, OpenAI, Electronic Health Records (EHR), NextAuth.js, Learning Management Systems (LMS), Gatsby, Chrome Extensions, SSL Certificates, User Experience (UX), Design, Domain-driven Design (DDD), Optical Character Recognition (OCR), Apollo, Progressive Web Applications (PWAs), Webhooks, WebSockets, Agile Product Delivery, JSON Web Key Set (JWKS), JSON Web Key (JWK), Artificial Intelligence (AI), Large Language Models (LLMs), Midjourney, Mixtral, Payment APIs, Payments, Third-party Integration, User Experience Design, Technical Leadership, ESLint, Husky, Framer, Load Balancers, Complex Problem Solving, Communication, Data Structures, Algorithms, Generative Artificial Intelligence (GenAI), Product-led Growth (PLG), Customer Relationship Management (CRM), M2M, Machine-to-Machine (M2M), Tailwind UI
Collaboration That Works
How to Work with Toptal
Toptal matches you directly with global industry experts from our network in hours—not weeks or months.
1
Share your needs
Discuss your requirements and refine your scope in a call with a Toptal domain expert.
2
Choose your talent
Get a short list of expertly matched talent within 24 hours to review, interview, and choose from.
3
Start your risk-free talent trial
Work with your chosen talent on a trial basis for up to two weeks. Pay only if you decide to hire them.
Top talent is in high demand.
Start hiring