Usama Tufail, Developer in Faisalabad, Punjab, Pakistan
Usama is available for hire
Hire Usama

Usama Tufail

Verified Expert  in Engineering

Software Developer

Location
Faisalabad, Punjab, Pakistan
Toptal Member Since
August 8, 2022

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

Availability

Full-time

Preferred Environment

React, MongoDB, Express.js, TypeScript, JavaScript, Node.js, GraphQL, PostgreSQL, NestJS, APIs, Web Development, NoSQL, Responsive Design, Windows, Chrome Extensions, User Experience (UX), Docker

The most amazing...

...thing I've worked on is Neufluence, an influencer marketing platform where one can connect brands with influencers.

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

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

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)

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)

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 Auth, 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

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 Auth, 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

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 Auth, 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

Human Dilemmas

https://humandilemmas.com
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.

Neufluence

https://neufluence.com
This 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.

Maxxis | Pakistan Web App

https://maxxis.pk
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.

Majestic Designs

Majestic Designs is an innovative online art marketplace built using React, Hydrogen, a Shopify API, Tailwind CSS, GraphQL, and SCSS. As a front-end developer, I utilized React and Hydrogen to build a dynamic, high-performing interface backed by Shopify's robust infrastructure.

Tailwind CSS and SCSS were leveraged to create an intuitive and visually captivating user interface. Tailwind provided a utility-first CSS framework for unique designs, while SCSS enriched our CSS, enhancing readability and maintainability.

Communication with the Shopify back end was facilitated through the Shopify API and GraphQL. The Shopify API provided an interface to the ecosystem, enabling features like product listing and checkout. GraphQL efficiently loaded specific data sets, reducing data fetching issues.

I worked closely with the back-end team to integrate tools and data into the user interface, ensuring rich, customizable data views for an immersive art shopping experience.

Learnatric

https://www.awesomescreenshot.com/video/14068506?key=f0007c4116a33bb4b6ee99a0cc53464c
The 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.

Toptal Node.js Accelerator

https://www.loom.com/share/462b9bff40ff42a8b1c230cbca1c7cfd
The 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.

Energized Enterprise LLC Web App

http://journeyintotheheartofegypt.com
I developed the web app journeyintotheheartofegypt.com, for Energized Enterprise LLC using Next.js, Tailwind CSS, Framer Motion, Shopify Storefront API, and TypeScript.

The website serves as a platform for a two-week spiritual pilgrimage tour of Egypt, highlighting its ancient wisdom and sacred sites. The site showcases the various stops along the journey, including Aswan, Luxor, Cairo, and Abu Simbel, and provides information on the activities and experiences participants will encounter.

I worked closely with the client to ensure that the website conveyed the mystical and transformative nature of the journey while also providing practical information and a seamless user experience. With a focus on creating a safe and magical container for personal expansion and remembrance, the website invites visitors to embark on a lifetime journey.

Kodiak Knife Co.

http://kodiakknifeco.com
As a full-stack engineer, I was involved in building Kodiak Knife Co., an online store that sells high-quality knives and accessories. To create a modern and sleek online store, I utilized various cutting-edge web development technologies such as the Shopify Hydrogen Framework, React, Tailwind CSS, Framer Motion, and Git.

I designed the website's architecture, created reusable components using React, and styled the website using Tailwind CSS. I implemented website functionality and interactivity using JavaScript.

To ensure that the website was fully responsive and compatible with all devices, I used a mobile-first design approach and responsive design principles.

In summary, my role as a full stack engineer in building Kodiak Knife Co. involved using modern web development technologies to create a responsive, fast, and intuitive online store that provides an excellent user experience.

I designed the website's architecture, created reusable components, and implemented interactivity with JavaScript. Additionally, I ensured the website was fully responsive and compatible with all devices by adopting a mobile-first design approach and utilizing responsive design principles.

Racquet Pass Application

https://www.loom.com/share/86eacf1bb7ce4008a82883e8b66c4abf
Racquet 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.

Fear of God - eCommerce

https://fearofgod.com
As a senior front-end engineer on the Fear of God website project, I led the development of a minimalist and responsive eCommerce store using Shopify and modern CSS frameworks. I focused on crafting an immersive user experience that mirrored the luxury brand's aesthetic, ensuring seamless navigation and interaction across all devices. I played a pivotal role in integrating Shopify for its eCommerce functionality, setting up secure payment gateways, and optimizing inventory management, significantly enhancing customer satisfaction and sales conversion rates. My commitment to code quality and performance optimization resulted in a fast, engaging website that elevated the brand's digital presence. Through effective collaboration with the design team and stakeholders, I ensured that the development process aligned with Fear of God's vision, contributing significantly to the project's success and establishing a digital platform that reflects the brand's identity.
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

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

Libraries/APIs

React, Node.js, REST APIs, Twilio API, Formik, Redux Form, Recharts, 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, SendGrid API, React Redux, Antd, Reactstrap, React Router

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, SendGrid, GitLab CI/CD, GitLab, Git, Mongoose, Redux Thunk

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

Languages

TypeScript, JavaScript, HTML, CSS3, CSS, HTML5, ECMAScript (ES6), Sass, GraphQL, SQL, CoffeeScript, SAML, XML, SCSS

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

Platforms

Firebase, Twilio, Shopify, Windows, Vercel, Amazon EC2, AWS Lambda, Amazon Web Services (AWS), HubSpot, Google Cloud Platform (GCP), Docker, DigitalOcean

Storage

MySQL, Cloud Firestore, Redis, MongoDB, PostgreSQL, Amazon S3 (AWS S3), Amazon DynamoDB, NoSQL

Industry Expertise

Web Design

Other

Styled-components, Web UI, OAuth, Responsive Web Apps, Server-side Rendering (SSR), 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, 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, Clerk Auth, SSL Certificates, User Experience (UX), Design, Domain-driven Design (DDD), Axios, ESLint, Husky, Framer, Filestack, Load Balancers, Complex Problem Solving, Communication, Data Structures, Algorithms

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