Muhammad is available for hire
Hire MuhammadMuhammad Ali
Verified Expert in Engineering
Software Developer
Lahore, Punjab, Pakistan
Toptal member since November 17, 2021
Bio
Muhammad has significant experience developing software solutions, managing projects, and consulting clients globally. From developing eCommerce applications to leading and developing solutions that help cloud engineers keep track of their spending on cloud services, he has vast and in-depth experience communicating and establishing a collaborative strategy to best execute the plan. Muhammad would like to work on agile and structured projects to put his experience as a consultant into play.
Portfolio
TheHexaTown LLC
Amazon Web Services (AWS), API Integration, Blockchain, AWS Lambda, Cloud...
LogicFab (Pvt.) Ltd.
Node.js, MongoDB, React, React Native, Cloud Computing, Express.js, Linux...
Keeepr Labs
React Native, User Experience (UX), Blockchain, Crypto, Cryptocurrency Wallets...
Experience
- JavaScript - 8 years
- Web Development - 8 years
- React - 7 years
- Node.js - 7 years
- React Native - 7 years
- Software Development - 7 years
- Figma - 5 years
- Cloud Computing - 3 years
Availability
Full-time
Preferred Environment
MacOS, Slack, Visual Studio Code (VS Code), Jira, Amazon Web Services (AWS), Responsive Design, Express.js, PostgreSQL, Vercel, Ionic
The most amazing...
...and fun application I've worked on was a document scanning application using OpenCV for computer vision algorithms.
Work Experience
Senior Mobile Developer | Team Lead
2020 - PRESENT
TheHexaTown LLC
- Developed a human resources app called HexaHiring to help minimize the interviewing process and speed up talent-hiring by presenting an initial test curated by the organization.
- Introduced Atlassian products to the team for managing projects, documenting the work and requirements, keeping track of performance, and ensuring we deliver quality work at a given deadline.
- Provided JamStack-based solution to a marketing company that didn't want to invest too much time in development but wanted quality results and get their product up and running in no time, along with having control over data in their own hands.
- Automated manual processes using Retool’s powerful UI tools to streamline data workflows.
- Utilized Strapi as a headless CMS to manage internal documentation and resources, enabling HR managers to update content dynamically without developer involvement.
Technologies: Amazon Web Services (AWS), API Integration, Blockchain, AWS Lambda, Cloud, React, React Native, Team Leadership, Reporting, Full-stack, Google Cloud Platform (GCP), Front-end, Front-end Development, Redux, Axios, Python, WebSockets, Storybook, Web3.js, Google Cloud, PostgreSQL, Next.js, Swift, iOS, Java, MySQL, Android, Mobile, Web Development, Gatsby, Remix IDE, Web MVC, Vue, User Interface (UI), Mobile Apps, Redux Toolkit, Unit Testing, Material UI, Jest, APIs, REST, REST APIs, Architecture, CTO, Application State Management, Stripe Payments, Stripe Checkout, Stripe API, eCommerce, Startups, Social Media, Data Visualization, Business to Business (B2B), Charts, Tables, Optimization, Amazon S3 (AWS S3), Mobile Development, NoSQL, React Redux, Low Code, Low-code Development, UI Design, Google Apps Script, Databases, Dashboards, IT Project Management, IT, QA Testing, Integration Testing, Heroku, Streaming, Video Streaming, Video Players, Video.js, Video Platforms, Contentful, No-code Development, Bubble, Web Design, Serverless, Hugo, Mobile Architecture, Headless CMS, Strapi, Payment APIs, Amazon API Gateway, Caching, Redis, Amazon ElastiCache, Software Design, WebGL, Three.js, Headless Commerce, 3D, 3D Animation, Bitbucket, Generative Pre-trained Transformers (GPT), Git, Agile, GitLab, Google Cloud Functions, Algolia, Back-end, Retool, D3.js, React Apollo, Web 3.0, Web3, Single-page Applications (SPAs), Docusaurus, Trello API, Vercel, Front-end Architecture, Forms, Cryptocurrency, TradingView, Chakra UI, 3D Visualization, Data Security, App Store, Google Play Store, Mobile App Development
CTO and Senior Mobile Developer
2017 - PRESENT
LogicFab (Pvt.) Ltd.
- Developed a mobile application that implements a barter system with virtual currency involved. This app allowed users to exchange their items using the barter system and share the virtual currency for the remainder.
- Integrated Retool for user data management and analytics dashboards, automating repetitive tasks such as data reconciliation and transaction logging.
- Introduced E2E testing to our clients and DevOps lifecycle to ensure everything goes perfectly on a product or update launch. We saw a noticeable difference in issues reports before and after this implementation.
- Managed user-facing content like FAQs and guides through Strapi, ensuring easy scalability and dynamic updates.
- Led a document scanner module, experimenting both with native bridges and React Native packages. Our implementation of the native codebase using OpenCV showed tremendous performance differences, benefiting the client's revenue.
- Implemented seamless API integration between Strapi and the front end for real-time content updates.
Technologies: Node.js, MongoDB, React, React Native, Cloud Computing, Express.js, Linux, Web Security, Docker, Amazon Web Services (AWS), Azure, Blockchain, Web3.js, Next.js, GraphQL, MERN Stack, CSS, Ethers.js, AWS Lambda, HTML, Full-stack, User Experience (UX), Front-end, Front-end Development, Redux, Python, WebSockets, Storybook, Google Cloud, PostgreSQL, Apollo, Prisma, Flutter, Swift, iOS, Encryption, MySQL, Android, Mobile, Web Development, Gatsby, C#.NET, Web MVC, CI/CD Pipelines, Chrome Extensions, User Interface (UI), Leadership, Vue, Nuxt.js, Mobile Apps, API Development, Firebase, Full-stack Development, Microservices Architecture, Redux Toolkit, Material UI, Jest, APIs, Web Applications, Amazon DynamoDB, React Native for Web, Cloud Firestore, REST APIs, Progressive Web Applications (PWAs), CTO, Team Leadership, Application State Management, Reusable Libraries, Stripe Payments, Stripe Checkout, Responsive Web Apps, Social Media Apps, eCommerce, Startups, Social Media, Data Visualization, Business to Business (B2B), Charts, Tables, Optimization, Amazon S3 (AWS S3), Mobile Development, NoSQL, React Redux, Low Code, Low-code Development, UI Design, Databases, Dashboards, IT Project Management, IT, QA Testing, UI Testing, Integration Testing, Heroku, Streaming, Video Streaming, Video Players, Video.js, Video Platforms, Contentful, No-code Development, Bubble, Web Design, Serverless, Hugo, Mobile Architecture, Strapi, Payment APIs, Amazon API Gateway, Caching, Redis, Amazon ElastiCache, Software Design, GitHub, Bitbucket, Generative Pre-trained Transformers (GPT), Git, Agile, GitLab, Google Cloud Functions, Algolia, Back-end, Retool, D3.js, React Apollo, Web 3.0, Web3, Single-page Applications (SPAs), Expo, Google Maps API, Responsive Design, React Flow, Software Architecture, Technical Leadership, Forms, Cryptocurrency, Chakra UI, 3D Visualization, Three.js, CSS Animations, Scripted Animation (JavaScript), Data Security, Google Play Store, Mobile App Development
React Native Developer
2023 - 2023
Keeepr Labs
- Developed a group chat application leveraging React Native. The project was centered around creating a seamless communication platform with personalized chat components, utilizing the Stream platform (getstream.io).
- Designed and implemented personalized prebuilt components from Stream to meet the client's specific needs, ensuring an intuitive and visually appealing user experience.
- Collaborated with the client to assess whether to extend the existing app or build a new one from scratch, ultimately delivering a solution aligned with their vision.
- Integrated a back-end crypto wallet feature, contributing to the app's unique functionality while ensuring smooth performance.
- Delivered a fully functional and optimized React Native app, adhering to the best practices for mobile app development and user experience design.
Technologies: React Native, User Experience (UX), Blockchain, Crypto, Cryptocurrency Wallets, Chatbox, Streaming, Mobile Development, React Query, 3D Visualization, Google Play Store, Mobile App Development
Team Lead | React Native & TypeScript Developer
2022 - 2023
Turkois Design LLC
- Led a development team at a digital agency to create a cutting-edge React Native mobile app. I defined project structures, established best practices, conducted comprehensive code reviews, and made critical architectural decisions.
- Collaborated closely with product managers, translating business objectives into actionable technical requirements and overseeing app releases across iOS and Android platforms.
- Worked closely with back-end teams to ensure seamless API integration and implemented robust CI/CD pipelines for efficient deployment, including automated unit testing workflows.
Technologies: React Native, TypeScript, Leadership, CI/CD Pipelines, Automated UI Testing, Code Review, Architecture, Mobile Development, 3D Visualization, Mobile App Development
Design/UI Engineer
2021 - 2022
Refractor Labs LLC
- Contributed to a blockchain startup, delivering a seamless user experience through intuitive and custom-designed interfaces.
- Collaborated with a designer to transform Figma mockups into functional, high-quality React components, ensuring clean, scalable, and maintainable code.
- Built fundamental components and custom styling from scratch, avoiding reliance on libraries like Material UI, to achieve a unique and brand-consistent design system.
- Adhered to best coding practices in JavaScript, React, and CSS to deliver robust, efficient, and responsive UI components.
Technologies: React, JavaScript, CSS, Figma, User Interface (UI), UI Design, UX Design, Forms, Fabric.js, Design
Full-stack Software Engineer | Web Developer
2021 - 2022
Reputation X
- Developed a web app where people can get insights on how to improve their ranking on google in different selected locations. This was backed by a complex graph-based algorithm to ensure the user is guided through different scenarios for better SEO.
- Created the front end using Next.js to incorporate server-side rendering (SSR) for better website SEO.
- Wrote and ran tests with more than 20 scenarios to ensure the system worked as intended for different combinations.
Technologies: Node.js, HTML5, CSS, JavaScript, React, Bootstrap 4, Technical Documentation, Documentation, Amazon Web Services (AWS), HTML, Full-stack, Front-end, Front-end Development, Redux, Prisma, Next.js, iOS, Java, Web Development, C#.NET, Angular, Web MVC, CI/CD Pipelines, User Experience (UX), User Interface (UI), Tailwind CSS, Vue, Nuxt.js, API Development, Firebase, Full-stack Development, Microservices Architecture, Hybrid Frameworks, Redux Toolkit, Unit Testing, Material UI, APIs, Twilio API, Web Applications, NestJS, Amazon DynamoDB, React Native for Web, Cloud Firestore, REST, REST APIs, POS, Architecture, Application State Management, Reusable Libraries, Stripe Payments, Stripe Checkout, Stripe API, Responsive Web Apps, Social Media Apps, eCommerce, Startups, Social Media, Online Dating, Business to Business (B2B), Optimization, React Redux, Databases, Dashboards, UI Testing, Heroku, Video Players, Contentful, Bubble, Web Design, Headless CMS, Software Design, GitHub, Back-end, Instant Messaging, Stripe Connect, Stripe Connect API, Electron, Shopify, OpenAI, Microservices, React Flow, Technical Leadership, Forms, Playwright, React Query, CSS Animations, Scripted Animation (JavaScript), Design
Full-stack Web Developer
2015 - 2017
Digital Art Solutions
- Provided supervision to the web development team at Digital Art Studios. One of the primary projects I led there was a freelancing platform that provided features for daily commercial services.
- Introduced Jira to our development team to track bugs and bugs reporting, helping speed up the process and accomplish goals that repeatedly got delayed.
- Spearheaded the launch of the freelancing platform and made sure it didn't crash when reaching a users base of more than 50,000 people.
Technologies: PHP, Laravel, HTML5, JavaScript, jQuery, CSS3, Node.js, Linux, SQL, CSS, HTML, Full-stack, Front-end, Front-end Development, Redux, iOS, Web Development, Angular, User Experience (UX), Nuxt.js, Mobile Apps, API Development, Firebase, Full-stack Development, Hybrid Frameworks, Unit Testing, Material UI, Twilio API, Web Applications, NestJS, Amazon DynamoDB, React Native for Web, Cloud Firestore, REST, REST APIs, Azure, Architecture, Shopify API, Stripe Payments, Responsive Web Apps, Startups, Social Media, Online Dating, BrainTree, UI Design, Databases, Bubble, Web Design, MySQL, Software Design, 3D, 3D Animation, Back-end, Stripe Connect API, Artificial Intelligence (AI), React Flow, Software Architecture, Front-end Architecture
Experience
Able Life | Health and Fitness
https://play.google.com/store/apps/details?id=com.ableAble integrates advanced social features within a health-focused mobile app, promoting community engagement and personal growth.
Able is an app that blends real-time health tracking with interactive social features. Built with React Native for a smooth, cross-platform experience, Node.js for real-time back-end services, and MongoDB for scalable data storage, Able delivers a responsive and user-focused experience.
Key technical features:
• Powered by WebSockets in Node.js, enabling instant updates on health metrics and social interactions without delays.
• A custom native module connects with the device health APIs, tracking metrics like steps and heart rate directly within the app.
• Utilizing Amazon S3 and CloudFront CDN for efficient media storage and delivery, providing a fast and seamless experience for sharing photos and updates.
• Firebase Cloud Messaging (FCM) delivers tailored reminders to keep users engaged and on track with their health goals.
• Firebase authentication and real-time database data protection rules ensure secure sessions and data privacy.
Able is an app that blends real-time health tracking with interactive social features. Built with React Native for a smooth, cross-platform experience, Node.js for real-time back-end services, and MongoDB for scalable data storage, Able delivers a responsive and user-focused experience.
Key technical features:
• Powered by WebSockets in Node.js, enabling instant updates on health metrics and social interactions without delays.
• A custom native module connects with the device health APIs, tracking metrics like steps and heart rate directly within the app.
• Utilizing Amazon S3 and CloudFront CDN for efficient media storage and delivery, providing a fast and seamless experience for sharing photos and updates.
• Firebase Cloud Messaging (FCM) delivers tailored reminders to keep users engaged and on track with their health goals.
• Firebase authentication and real-time database data protection rules ensure secure sessions and data privacy.
Maalgari | Digitizing and Simplifying Logistics
https://maalgari.com.pk/A full-stack mobile Android, iOS, and web application. I was the team lead and senior developer. Maalgari is a logistics and transportation platform designed to streamline operations with real-time shipment tracking, user management, and seamless integration with third-party services, including payment gateways and logistics providers. Users can view interactive maps with route planning and manage accounts efficiently. Maalgari incorporates robust data security and scalable cloud infrastructure.
Mobile app tech stack:
• React Native powers the responsive and intuitive user interface for logistics coordination.
• Google Maps API enables real-time location tracking, geolocation, and route planning for improved logistics visibility.
Web app tech stack:
• Node.js and manages the back end with modular, RESTful APIs to handle logistics data, user accounts, and integrations with third-party services.
• React, HTML, CSS for interactive front end.
• MongoDB stores and manages logistics and shipment data, supporting efficient data retrieval.
• Uses Azure App Services and Blob Storage for deployment, ensuring reliable data handling, low downtime, and smooth performance.
Mobile app tech stack:
• React Native powers the responsive and intuitive user interface for logistics coordination.
• Google Maps API enables real-time location tracking, geolocation, and route planning for improved logistics visibility.
Web app tech stack:
• Node.js and manages the back end with modular, RESTful APIs to handle logistics data, user accounts, and integrations with third-party services.
• React, HTML, CSS for interactive front end.
• MongoDB stores and manages logistics and shipment data, supporting efficient data retrieval.
• Uses Azure App Services and Blob Storage for deployment, ensuring reliable data handling, low downtime, and smooth performance.
HexaHiring - Platform to Test Applications for a Job
https://hiringhash.comHexaHiring is a SaaS-based virtual HR platform built using MERN to simplify the hiring process by enabling organizations to create assessment tests, track candidate progress, and manage hiring outcomes. My role was of a team lead.
• Nest.js powers the back end with modular APIs to manage candidate tracking, user authentication, and role-based access, ensuring that users only access data relevant to their roles.
• Next.js and React provide a fast, responsive front end with server-side rendering (SSR) and dynamic routing, improving load times and search engine visibility. The platform’s modular interface enables smooth user navigation and ensures consistency across devices.
• D3.js and Recharts were used to create dynamic admin dashboards, providing visual insights into candidate progress, test completion rates, and overall analytics. These tools allow administrators to filter data, generate reports, and monitor activity in real time.
• MongoDB manages data storage for user accounts, test results, and job postings, supporting efficient data retrieval and handling large volumes of data.
• APIs are designed to handle real-time data updates, ensuring that users see immediate changes in candidate progress and results.
• Nest.js powers the back end with modular APIs to manage candidate tracking, user authentication, and role-based access, ensuring that users only access data relevant to their roles.
• Next.js and React provide a fast, responsive front end with server-side rendering (SSR) and dynamic routing, improving load times and search engine visibility. The platform’s modular interface enables smooth user navigation and ensures consistency across devices.
• D3.js and Recharts were used to create dynamic admin dashboards, providing visual insights into candidate progress, test completion rates, and overall analytics. These tools allow administrators to filter data, generate reports, and monitor activity in real time.
• MongoDB manages data storage for user accounts, test results, and job postings, supporting efficient data retrieval and handling large volumes of data.
• APIs are designed to handle real-time data updates, ensuring that users see immediate changes in candidate progress and results.
SenpAI
https://play.google.com/store/apps/details?id=com.senpalSenpAI is an innovative score-tracking and performance analysis app tailored for gamers. Built on React Native, SenpAI offers a responsive, real-time scorecard experience with cross-platform compatibility, optimized for both Android and iOS.
• SenpAI utilizes Redux to manage game state efficiently, enabling real-time score updates and tracking multiple in-game stats simultaneously.
• The app includes a fully customizable scorecard interface built with React Native’s custom components. Using React Native’s Animated API, SenpAI adds smooth transitions and animations, enhancing user engagement by making interactions visually dynamic and responsive.
• The app ensures that UI components and performance metrics remain optimized across different screen sizes and operating systems, reaching a broad audience of gamers.
• For tracking player stats over time, SenpAI employs AsyncStorage to maintain user performance data locally on the device. This enables gamers to view historical data and analyze trends in their performance, even offline.
• SenpAI integrates Firebase Cloud Messaging (FCM) to send personalized notifications to users for upcoming game events, score updates, or achievements.
• SenpAI utilizes Redux to manage game state efficiently, enabling real-time score updates and tracking multiple in-game stats simultaneously.
• The app includes a fully customizable scorecard interface built with React Native’s custom components. Using React Native’s Animated API, SenpAI adds smooth transitions and animations, enhancing user engagement by making interactions visually dynamic and responsive.
• The app ensures that UI components and performance metrics remain optimized across different screen sizes and operating systems, reaching a broad audience of gamers.
• For tracking player stats over time, SenpAI employs AsyncStorage to maintain user performance data locally on the device. This enables gamers to view historical data and analyze trends in their performance, even offline.
• SenpAI integrates Firebase Cloud Messaging (FCM) to send personalized notifications to users for upcoming game events, score updates, or achievements.
Tribez
https://tribez-marketplace.web.app/Tribez is a blockchain-based NFT marketplace built with the MERN stack. It is designed to provide users with a seamless, intuitive platform for buying and selling NFTs.
• Material UI components help achieve a consistent and professional design, while React ensures the app remains responsive and accessible across devices.
• Figma designs were translated into React components, maintaining pixel-perfect accuracy for a seamless user experience.
• Blockchain APIs facilitate NFT minting, listing, and trading, providing users with real-time updates and verifiable ownership records, essential for a marketplace.
• MongoDB is utilized for data storage, allowing efficient management of user data, transaction history, and NFT metadata.
• Node.js and Express.js power the back end, handling API requests to manage transactions, user accounts, and interactions with the blockchain.
• React’s Context API is used for efficient state management, it ensures that users always have access to the latest information, making the marketplace dynamic and engaging.
• Google Analytics is integrated to track user activity, enabling insights into platform usage and user preferences.
• Material UI components help achieve a consistent and professional design, while React ensures the app remains responsive and accessible across devices.
• Figma designs were translated into React components, maintaining pixel-perfect accuracy for a seamless user experience.
• Blockchain APIs facilitate NFT minting, listing, and trading, providing users with real-time updates and verifiable ownership records, essential for a marketplace.
• MongoDB is utilized for data storage, allowing efficient management of user data, transaction history, and NFT metadata.
• Node.js and Express.js power the back end, handling API requests to manage transactions, user accounts, and interactions with the blockchain.
• React’s Context API is used for efficient state management, it ensures that users always have access to the latest information, making the marketplace dynamic and engaging.
• Google Analytics is integrated to track user activity, enabling insights into platform usage and user preferences.
DealZone App
https://apps.apple.com/us/app/dealzone/DealZone is an eCommerce platform designed to help users discover and purchase a wide variety of consumer goods. Built with React Native for cross-platform functionality and AWS for reliable back-end support.
• AWS Lambda for back-end processing, the app dynamically loads and filters products, providing users with relevant options based on their interests and past interactions.
• Using Amazon DynamoDB for database management, DealZone handles real-time updates on product availability and inventory levels. AWS Lambda functions are triggered to manage and updates on stock changes efficiently.
• DealZone utilizes Amazon S3 for storing high-quality product images and videos, with CloudFront CDN delivering this media content quickly to users worldwide.
• To keep users updated on deals, discounts, and new arrivals, DealZone integrates Amazon SNS for push notifications.
• DealZone provides secure payment processing by using Stripe integration to manage transactions.
• User authentication and data protection are handled through Amazon Cognito, which provides secure sign-in and sign-up options, while HTTPS encryption protects data in transit.
• AWS Lambda for back-end processing, the app dynamically loads and filters products, providing users with relevant options based on their interests and past interactions.
• Using Amazon DynamoDB for database management, DealZone handles real-time updates on product availability and inventory levels. AWS Lambda functions are triggered to manage and updates on stock changes efficiently.
• DealZone utilizes Amazon S3 for storing high-quality product images and videos, with CloudFront CDN delivering this media content quickly to users worldwide.
• To keep users updated on deals, discounts, and new arrivals, DealZone integrates Amazon SNS for push notifications.
• DealZone provides secure payment processing by using Stripe integration to manage transactions.
• User authentication and data protection are handled through Amazon Cognito, which provides secure sign-in and sign-up options, while HTTPS encryption protects data in transit.
Recall
https://www.getrecall.ai/Recall is a SaaS-based knowledge management and documentation platform that enables users to organize and access information efficiently.
• React enables a highly interactive, modular UI that allows users to navigate, edit, and organize information easily.
• React’s Context API manages state efficiently, providing real-time updates as users make changes to documents or knowledge entries.
• React’s flexible components adjust layouts, typography, and other UI elements based on screen size, ensuring that users have a seamless experience no matter the device.
• React’s built-in caching ensures frequently accessed documents and resources load quickly, reducing data consumption and improving app performance.
• Recall’s structure enables users to categorize and organize documents using customizable tags and folders.
• By combining optimized state management like Redux with React’s efficient rendering, Recall delivers instant search results, enabling users to find relevant information without delay.
• The platform was integrated with OAuth, ensuring that user data is protected during access. React’s secure handling of user sessions ensures that only authorized users have access to sensitive information.
• React enables a highly interactive, modular UI that allows users to navigate, edit, and organize information easily.
• React’s Context API manages state efficiently, providing real-time updates as users make changes to documents or knowledge entries.
• React’s flexible components adjust layouts, typography, and other UI elements based on screen size, ensuring that users have a seamless experience no matter the device.
• React’s built-in caching ensures frequently accessed documents and resources load quickly, reducing data consumption and improving app performance.
• Recall’s structure enables users to categorize and organize documents using customizable tags and folders.
• By combining optimized state management like Redux with React’s efficient rendering, Recall delivers instant search results, enabling users to find relevant information without delay.
• The platform was integrated with OAuth, ensuring that user data is protected during access. React’s secure handling of user sessions ensures that only authorized users have access to sensitive information.
UPayments
https://upayments-reactjs.web.app/UPayments is a SaaS platform that manages complex financial transactions, user accounts, and subscription services.
• Node.js and Temporal handle secure financial transactions and subscription workflows. Temporal organizes payment processes, automating tasks like transaction validation, retries for failed operations, confirmations, and recurring payment handling, which improves transaction speed by 30%.
• Next.js and React power a dynamic, modular UI that handles complex interactions smoothly. By utilizing SSR and SSG, the platform benefits from faster load times, enhanced SEO, and a responsive experience across devices.
• React and TypeScript were used to develop highly interactive interfaces, with complex states managed by React’s Context API to keep the platform responsive and smooth.
• React components were translated from Figma layouts to ensure a pixel-perfect UI.
• REST APIs created to handle payments, user interactions, and real-time communication. MongoDB queries were optimized to ensure fast, reliable data processing, maintaining high performance even with large transaction volumes.
• Google Analytics tracks user activity, engagement rates, and feature usage.
• Node.js and Temporal handle secure financial transactions and subscription workflows. Temporal organizes payment processes, automating tasks like transaction validation, retries for failed operations, confirmations, and recurring payment handling, which improves transaction speed by 30%.
• Next.js and React power a dynamic, modular UI that handles complex interactions smoothly. By utilizing SSR and SSG, the platform benefits from faster load times, enhanced SEO, and a responsive experience across devices.
• React and TypeScript were used to develop highly interactive interfaces, with complex states managed by React’s Context API to keep the platform responsive and smooth.
• React components were translated from Figma layouts to ensure a pixel-perfect UI.
• REST APIs created to handle payments, user interactions, and real-time communication. MongoDB queries were optimized to ensure fast, reliable data processing, maintaining high performance even with large transaction volumes.
• Google Analytics tracks user activity, engagement rates, and feature usage.
Social App
https://social-app-25d6f.web.app/Social App is a dynamic social platform that enhances user engagement through AI-powered content suggestions and chat interactions.
• OpenAI API powers automated content recommendations and chat features, helping users discover new content and providing AI-generated responses during interactions.
• React’s Context API supports efficient state management, ensuring smooth data flow across components.
• React enables the creation of reusable, modular components, providing a consistent and responsive interface across devices. The modular structure allows for easy scalability, with each component handling specific tasks.
• Custom REST APIs connect with OpenAI’s services to handle real-time requests for content suggestions and chat responses. These APIs are optimized for high performance.
• JWT Authentication was used to secure user sessions, ensuring that all interactions and data remain private. The back end also implements HTTPS encryption to protect data in transit.
• Google Analytics API monitors user engagement metrics such as time spent on the platform, interaction rates, and content preferences. This data provides insights into user behavior, allowing for continuous improvement of content recommendations.
• OpenAI API powers automated content recommendations and chat features, helping users discover new content and providing AI-generated responses during interactions.
• React’s Context API supports efficient state management, ensuring smooth data flow across components.
• React enables the creation of reusable, modular components, providing a consistent and responsive interface across devices. The modular structure allows for easy scalability, with each component handling specific tasks.
• Custom REST APIs connect with OpenAI’s services to handle real-time requests for content suggestions and chat responses. These APIs are optimized for high performance.
• JWT Authentication was used to secure user sessions, ensuring that all interactions and data remain private. The back end also implements HTTPS encryption to protect data in transit.
• Google Analytics API monitors user engagement metrics such as time spent on the platform, interaction rates, and content preferences. This data provides insights into user behavior, allowing for continuous improvement of content recommendations.
Sit (PWA)
https://sit-pwa-c8b4f.web.app/SIT is a progressive web app (PWA) designed to provide a native-like, responsive experience on the web. SIT combines capabilities, fast load times, and reliable data handling.
• React powers the front end with modular, reusable components, ensuring a consistent and responsive UI across devices.
• Express.js manages back-end operations, including fast data requests, API routing, and handling user interactions.
• MongoDB stores user data and other dynamic content, supporting quick data retrieval and efficient storage for a seamless user experience.
• Service Workers enable the app’s offline functionality, caching essential assets and data. This feature allows users to access the app even without an internet connection.
• The combination of React’s built-in caching and PWA data caching enables SIT to load frequently used resources quickly, reducing load times and data consumption.
• React’s Context API manages state across the app, allowing for real-time data updates without excessive re-renders.
• JWT Authentication is implemented on the back end to manage secure user sessions, ensuring that user data remains protected. HTTPS encryption is used to protect data in transit, providing a secure experience.
• React powers the front end with modular, reusable components, ensuring a consistent and responsive UI across devices.
• Express.js manages back-end operations, including fast data requests, API routing, and handling user interactions.
• MongoDB stores user data and other dynamic content, supporting quick data retrieval and efficient storage for a seamless user experience.
• Service Workers enable the app’s offline functionality, caching essential assets and data. This feature allows users to access the app even without an internet connection.
• The combination of React’s built-in caching and PWA data caching enables SIT to load frequently used resources quickly, reducing load times and data consumption.
• React’s Context API manages state across the app, allowing for real-time data updates without excessive re-renders.
• JWT Authentication is implemented on the back end to manage secure user sessions, ensuring that user data remains protected. HTTPS encryption is used to protect data in transit, providing a secure experience.
Rezeptrechner
https://rezeptrechner-54f98.web.app/Rezeptrechner is a dynamic recipe calculator platform that allows users to calculate nutritional values for recipes, perform real-time calculations, and generate custom reports. Rezeptrechner is optimized for a smooth and responsive user experience.
• Solidstart manages dynamic data input and processing, enabling real-time calculations and instant result display as users input or modify recipe data.
• React and TypeScript were used to build reusable components that handle complex data inputs, ensuring a seamless and consistent experience across devices.
• Next.js API routes support dynamic routing and real-time data integration, allowing users to input nutritional information, retrieve instant results, and generate custom reports.
• Google Cloud API stores and manages large volumes of recipe data, with scalable architecture that handles significant user input efficiently, ensuring the platform remains responsive.
• REST APIs integrate real-time data inputs, facilitating on-the-fly calculations that improve user engagement.
• Rezeptrechner combines responsive UI design, real-time calculations, and scalable API architecture, providing users with a data-driven recipe calculator that performs seamlessly across devices.
• Solidstart manages dynamic data input and processing, enabling real-time calculations and instant result display as users input or modify recipe data.
• React and TypeScript were used to build reusable components that handle complex data inputs, ensuring a seamless and consistent experience across devices.
• Next.js API routes support dynamic routing and real-time data integration, allowing users to input nutritional information, retrieve instant results, and generate custom reports.
• Google Cloud API stores and manages large volumes of recipe data, with scalable architecture that handles significant user input efficiently, ensuring the platform remains responsive.
• REST APIs integrate real-time data inputs, facilitating on-the-fly calculations that improve user engagement.
• Rezeptrechner combines responsive UI design, real-time calculations, and scalable API architecture, providing users with a data-driven recipe calculator that performs seamlessly across devices.
Rishtaauntie
https://rishtaauntie.app/Rishtaauntie is a social and dating platform designed to connect individuals through personalized matchmaking and interactive communication.
• OpenAI API powers personalized match suggestions based on user profiles and enables automated, engaging conversations to improve initial user interactions.
• Node.js and Express.js handle core functionalities such as user authentication, matchmaking, and profile management, ensuring smooth performance.
• MongoDB supports efficient storage and retrieval of user profiles, preferences, and chat logs, ensuring quick data access.
• Socket.IO provides live updates for new matches and chat notifications, while Firebase Cloud Messaging (FCM) keeps users informed of messages and profile interactions, improving engagement without needing page refreshes.
• React and Styled Components create a dynamic, user-friendly interface that adapts seamlessly across devices, providing a cohesive and attractive experience for all users.
• JWT Authentication and HTTPS safeguard user sessions and data, while rate limiting on the back end protects against potential security threats.
• Google Analytics API tracks user behavior and engagement metrics, enabling insights that help refine the matchmaking algorithms.
• OpenAI API powers personalized match suggestions based on user profiles and enables automated, engaging conversations to improve initial user interactions.
• Node.js and Express.js handle core functionalities such as user authentication, matchmaking, and profile management, ensuring smooth performance.
• MongoDB supports efficient storage and retrieval of user profiles, preferences, and chat logs, ensuring quick data access.
• Socket.IO provides live updates for new matches and chat notifications, while Firebase Cloud Messaging (FCM) keeps users informed of messages and profile interactions, improving engagement without needing page refreshes.
• React and Styled Components create a dynamic, user-friendly interface that adapts seamlessly across devices, providing a cohesive and attractive experience for all users.
• JWT Authentication and HTTPS safeguard user sessions and data, while rate limiting on the back end protects against potential security threats.
• Google Analytics API tracks user behavior and engagement metrics, enabling insights that help refine the matchmaking algorithms.
Emotion Note
https://apps.apple.com/us/app/emotion-note/id1545565261Emotion Note is an interactive social cross-platform app designed to help users express and share emotions through text, audio, and chat features.
• Socket.IO with Node.js supports real-time chat and emotion-sharing, allowing users to connect and communicate instantly.
• React Native Audio Libraries power the app’s audio-sharing feature, enabling high-quality voice recordings and playback within chat.
• MongoDB with GridFS is used for storing chat logs, emotional statuses, and audio messages, efficiently managing large files.
• Expertise in React Native Animations is applied to create smooth sidebar transitions, status changes, and other interactive elements.
• Emotion Note includes a robust UI that integrates seamlessly with back-end services. Close collaboration with back-end developers ensures that front-end elements function effectively.
• The app’s design includes customizable themes and color palettes, reflecting the user’s mood through React Native Custom Components for a personalized, experience.
• Firebase Cloud Messaging (FCM) enables real-time notifications for new messages and updates.
• JWT Authentication and HTTPS ensure that user conversations and data are secure, maintaining user trust.
• Socket.IO with Node.js supports real-time chat and emotion-sharing, allowing users to connect and communicate instantly.
• React Native Audio Libraries power the app’s audio-sharing feature, enabling high-quality voice recordings and playback within chat.
• MongoDB with GridFS is used for storing chat logs, emotional statuses, and audio messages, efficiently managing large files.
• Expertise in React Native Animations is applied to create smooth sidebar transitions, status changes, and other interactive elements.
• Emotion Note includes a robust UI that integrates seamlessly with back-end services. Close collaboration with back-end developers ensures that front-end elements function effectively.
• The app’s design includes customizable themes and color palettes, reflecting the user’s mood through React Native Custom Components for a personalized, experience.
• Firebase Cloud Messaging (FCM) enables real-time notifications for new messages and updates.
• JWT Authentication and HTTPS ensure that user conversations and data are secure, maintaining user trust.
Filtairs
https://apps.apple.com/pk/app/filtairs/id1546049017Filtairs is a reminder and task management app designed to help users organize and stay on top of their daily tasks efficiently.
• Built with React Native, Filtairs provides a uniform, responsive UI across platforms. Custom React Native components allow users to create, view, and manage their tasks in an intuitive layout, while animations and transitions enhance the user experience.
• Filtairs integrates FCM with Node.js to deliver timely, customizable reminders for tasks and events.
• MongoDB allows Filtairs to store task details, deadlines, and reminder settings. With MongoDB’s dynamic schema capabilities, the app can adapt to different types of task information and scale effortlessly as users add more reminders.
• Filtairs includes an advanced scheduling feature that supports recurring reminders, powered by Node.js. This back-end scheduling system automatically triggers reminders for tasks set to repeat daily, weekly, or monthly, reducing the need for manual input.
• User data is secured with JWT authentication, ensuring that all task information and reminders remain private. Additionally, HTTPS encryption protects data in transit, ensuring secure communication between the client and server.
• Built with React Native, Filtairs provides a uniform, responsive UI across platforms. Custom React Native components allow users to create, view, and manage their tasks in an intuitive layout, while animations and transitions enhance the user experience.
• Filtairs integrates FCM with Node.js to deliver timely, customizable reminders for tasks and events.
• MongoDB allows Filtairs to store task details, deadlines, and reminder settings. With MongoDB’s dynamic schema capabilities, the app can adapt to different types of task information and scale effortlessly as users add more reminders.
• Filtairs includes an advanced scheduling feature that supports recurring reminders, powered by Node.js. This back-end scheduling system automatically triggers reminders for tasks set to repeat daily, weekly, or monthly, reducing the need for manual input.
• User data is secured with JWT authentication, ensuring that all task information and reminders remain private. Additionally, HTTPS encryption protects data in transit, ensuring secure communication between the client and server.
Mesh
https://apps.apple.com/gb/app/mesh-collective/id1538208298Mesh is a social platform built for meaningful connections and community engagement developed using React Native.
• Mesh leverages Socket.IO with Node.js to provide real-time updates on the social feed and messaging, enabling users to interact instantly.
• Utilizing Expo, Mesh streamlines development and deployment across iOS and Android, providing a consistent and optimized user experience on both platforms. Expo’s integration also simplifies app updates and maintenance.
• Mesh uses MongoDB’s document-based storage to handle a high volume of data efficiently, allowing users to share content freely without performance issues, even as the user base grows.
• Mesh integrates Cloudinary to manage media uploads, optimizing images and videos for faster loading and delivery. This integration ensures that photos, videos, and other media appear quickly and clearly on users’ feeds.
• Expo’s built-in push notification service enables Mesh to send real-time alerts for new messages, friend requests, and updates, keeping users engaged and informed.
• Mesh employs JWT for secure user authentication and encrypted HTTPS connections, ensuring that user data and communications remain private.
• Mesh leverages Socket.IO with Node.js to provide real-time updates on the social feed and messaging, enabling users to interact instantly.
• Utilizing Expo, Mesh streamlines development and deployment across iOS and Android, providing a consistent and optimized user experience on both platforms. Expo’s integration also simplifies app updates and maintenance.
• Mesh uses MongoDB’s document-based storage to handle a high volume of data efficiently, allowing users to share content freely without performance issues, even as the user base grows.
• Mesh integrates Cloudinary to manage media uploads, optimizing images and videos for faster loading and delivery. This integration ensures that photos, videos, and other media appear quickly and clearly on users’ feeds.
• Expo’s built-in push notification service enables Mesh to send real-time alerts for new messages, friend requests, and updates, keeping users engaged and informed.
• Mesh employs JWT for secure user authentication and encrypted HTTPS connections, ensuring that user data and communications remain private.
MyLPG
https://apps.apple.com/si/app/mylpg-eu/id869329648MyLPG is a React Native application designed to help users easily locate the nearest gas stations, featuring a sleek and intuitive UI/UX that enhances the user journey.
• Leveraging the Google Maps API, MyLPG provides users with precise location tracking, allowing them to identify nearby gas stations with ease. Real-time GPS integration enables accurate user positioning, guiding them to the nearest gas stations through an interactive map interface.
• With React Native Maps and Google Places API, MyLPG dynamically displays markers representing gas stations, updating them based on the user’s current location.
• Interactive and Intuitive Map Interface MyLPG’s map interface features an exceptional UI/UX design with custom React Native components. The map interactions are smooth and user-friendly, with intuitive gestures for zooming, panning, and viewing gas station details.
• Optimized for cross-platform performance built with React Native, MyLPG delivers a consistent user experience across both iOS and Android devices.
• MyLPG uses HTTPS encryption for secure data transmission and adheres to location permissions best practices, ensuring users can control how and when their location data is shared with the app.
• Leveraging the Google Maps API, MyLPG provides users with precise location tracking, allowing them to identify nearby gas stations with ease. Real-time GPS integration enables accurate user positioning, guiding them to the nearest gas stations through an interactive map interface.
• With React Native Maps and Google Places API, MyLPG dynamically displays markers representing gas stations, updating them based on the user’s current location.
• Interactive and Intuitive Map Interface MyLPG’s map interface features an exceptional UI/UX design with custom React Native components. The map interactions are smooth and user-friendly, with intuitive gestures for zooming, panning, and viewing gas station details.
• Optimized for cross-platform performance built with React Native, MyLPG delivers a consistent user experience across both iOS and Android devices.
• MyLPG uses HTTPS encryption for secure data transmission and adheres to location permissions best practices, ensuring users can control how and when their location data is shared with the app.
Wasfaty
https://wasfaty.sa/Wasfaty is a doctor appointment and health services platform designed to link patients with hospitals and healthcare centers. It allows patients to locate the nearest facility or pharmacy and schedule appointments easily.
• Utilizing React and TypeScript, Wasfaty delivers a responsive and consistent user experience across devices. The front-end components are optimized for clarity and ease of navigation. TypeScript's strong typing enforces code consistency and reliability.
• Solidstart and Node.js, enhanced by Temporal, manage complex workflows like appointment booking, confirmations, rescheduling, and automated notifications, ensuring reliability with retries for failed operations.
• PostgreSQL, combined with Temporal's workflow management, handles user appointments and medical records efficiently, achieving a 25% improvement in data processing.
• Google Cloud Platform hosts Wasfaty, leveraging Google APIs to support real-time data processing and secure storage for sensitive health records.
• The platform integrates Google Maps API to help users locate nearby healthcare facilities and pharmacies in real time.
• Wasfaty implements HTTPS encryption and JWT authentication for secure access and data transmission.
• Utilizing React and TypeScript, Wasfaty delivers a responsive and consistent user experience across devices. The front-end components are optimized for clarity and ease of navigation. TypeScript's strong typing enforces code consistency and reliability.
• Solidstart and Node.js, enhanced by Temporal, manage complex workflows like appointment booking, confirmations, rescheduling, and automated notifications, ensuring reliability with retries for failed operations.
• PostgreSQL, combined with Temporal's workflow management, handles user appointments and medical records efficiently, achieving a 25% improvement in data processing.
• Google Cloud Platform hosts Wasfaty, leveraging Google APIs to support real-time data processing and secure storage for sensitive health records.
• The platform integrates Google Maps API to help users locate nearby healthcare facilities and pharmacies in real time.
• Wasfaty implements HTTPS encryption and JWT authentication for secure access and data transmission.
Storyx
https://apps.apple.com/us/app/storyx-chat-fiction/id1530789397Storyx is an innovative interactive storytelling platform available as both a web and mobile app, empowering content creators to craft and explore visually captivating narrative-driven stories.
• Built with Next.js and React using TypeScript, Storyx offers a responsive, SEO-optimized interface with features like Incremental Static Regeneration (ISR) for real-time content updates.
• Integrated with Firebase services (Authentication, Realtime Database, Cloud Storage, and Cloud Functions), the platform enables secure, real-time story creation and sharing.
• Node.js and MongoDB ensures seamless data flow and scalable REST APIs for handling high volumes of user activity.
• D3.js enhances storytelling with interactive visual elements like dynamic graphs, allowing users to explore story structures through zooming, panning, and filtering.
• Using server-side rendering (SSR), the platform delivers fast load times and strong SEO performance.
• Google Analytics API integration tracks metrics such as page views and user behavior, offering insights for refinement.
• Figma designs are translated into a polished UI using HTML, CSS, and Next.js, ensuring reusable and visually consistent components.
• Built with Next.js and React using TypeScript, Storyx offers a responsive, SEO-optimized interface with features like Incremental Static Regeneration (ISR) for real-time content updates.
• Integrated with Firebase services (Authentication, Realtime Database, Cloud Storage, and Cloud Functions), the platform enables secure, real-time story creation and sharing.
• Node.js and MongoDB ensures seamless data flow and scalable REST APIs for handling high volumes of user activity.
• D3.js enhances storytelling with interactive visual elements like dynamic graphs, allowing users to explore story structures through zooming, panning, and filtering.
• Using server-side rendering (SSR), the platform delivers fast load times and strong SEO performance.
• Google Analytics API integration tracks metrics such as page views and user behavior, offering insights for refinement.
• Figma designs are translated into a polished UI using HTML, CSS, and Next.js, ensuring reusable and visually consistent components.
Education
2015 - 2019
Bachelor's Degree in Software Engineering
University of Management and Technology - Lahore, Pakistan
Certifications
NOVEMBER 2021 - PRESENT
Cyber Security and Ethical Hacking
NIAIS
Skills
Libraries/APIs
React, Node.js, Stripe, Web3.js, API Development, React Native for Web, REST APIs, Stripe API, React Redux, Three.js, Stripe Connect, Stripe Connect API, Google Maps API, Trello API, React Flow, React Testing Library, Playwright, React Query, Fabric.js, MobX, Shopify API, D3.js, jQuery, Vue, Twilio API, WebGL, Google Analytics API, Context API, Nativo API, Google Cloud API, Google Routes API, SolidJS, Socket.IO, GridFS, Custom APIs, Google Places API, Google APIs
Tools
Figma, Prisma, Redux Toolkit, Stripe Checkout, Retool, Expo, GitHub, Bubble, Amazon ElastiCache, Bitbucket, Git, GitLab, React Apollo, Trello, Jira, AWS ELB, Remix IDE, Amazon CloudFront CDN, Firebase Cloud Messaging (FCM), Firebase Authentication, Amazon Simple Notification Service (SNS), Amazon Cognito, Seos, Chatbox, Cloud Dataflow, Zoom, Figma to HTML
Languages
HTML5, JavaScript, CSS3, TypeScript, GraphQL, CSS, HTML, Google Apps Script, SQL, Python, Swift, Java, C#.NET, Hugo, PHP, DYNAMO
Frameworks
React Native, Express.js, Next.js, Redux, Tailwind CSS, Material UI, Jest, Cypress, Laravel, Flutter, Nuxt.js, NestJS, Video.js, Ionic, Angular, Electron, Docusaurus, Realtime, JSON Web Tokens (JWT)
Paradigms
UI Design, Unit Testing, REST, Mobile Development, B2C, Microservices Architecture, Low-code Development, Agile, Microservices, UX Design, Responsive, Objectives & Key Results (OKRs), Incremental Development
Platforms
Blockchain, Android, iOS, Amazon Web Services (AWS), Google Cloud Platform (GCP), Firebase, Azure, Contentful, Vercel, Linux, Docker, AWS Lambda, Mobile, Heroku, Video Platforms, Algolia, Shopify, Web, Temporal Cloud
Storage
MongoDB, MySQL, Cloud Firestore, NoSQL, Redis, Amazon S3 (AWS S3), Google Cloud, PostgreSQL, Amazon DynamoDB, Databases, Firebase Realtime Database, Google Cloud Storage
Industry Expertise
Social Media, Web Design
Other
Software Development, Web Development, API Integration, MERN Stack, Team Leadership, Full-stack, Front-end, Front-end Development, Axios, Storybook, Web MVC, Mobile Apps, Full-stack Development, Hybrid Frameworks, APIs, Pixel Perfect, Web Applications, Progressive Web Applications (PWAs), Android POS, Architecture, CTO, Reusable Libraries, Stripe Payments, Responsive Web Apps, Social Media Apps, eCommerce, Startups, Online Dating, Dashboards, Strapi, Software Design, 3D Animation, Back-end, Cryptocurrency, OpenAI, Responsive Design, Software Architecture, Technical Leadership, Front-end Architecture, Shipping, Logistics, Mobile First, Forms, TradingView, Chakra UI, Multitenancy, 3D Visualization, CSS Animations, Scripted Animation (JavaScript), PWA, Tailwind UI, Data Security, Back-end Development, App Store, Google Play Store, Mobile App Development, Design, Cloud Computing, User Interface (UI), Ethers.js, User Experience (UX), WebSockets, Apollo, Gatsby, CI/CD Pipelines, Chrome Extensions, Leadership, Push Notifications, POS, Application State Management, Data Visualization, Business to Business (B2B), Charts, Tables, Optimization, Low Code, IT Project Management, IT, QA Testing, UI Testing, Integration Testing, Streaming, Video Streaming, Video Players, No-code Development, Serverless, Mobile Architecture, Headless CMS, Payment APIs, Amazon API Gateway, Caching, Headless Commerce, 3D, Generative Pre-trained Transformers (GPT), Google Cloud Functions, Web 3.0, Web3, Single-page Applications (SPAs), Instant Messaging, Artificial Intelligence (AI), Large Language Models (LLMs), Web Security, Cloud, Bootstrap 4, Technical Documentation, Documentation, Reporting, Encryption, BrainTree, GetStream.io, AsyncAPI, Animated GIFs, NFT Design, Data Listing, Figma to React, Blob Storage, API Gateways, Amazon RDS, HTTPS, Cloud Infrastructure, OAuth, Search, Categorization, Organization, Tags, Performance, Layout, Typography, Modular, Interactive UX, Navigation, Web UX, Server-side Rendering (SSR), SSG, Third-party APIs, Large Data Sets, Metrics, User Roles, Authentication, Dynamic Loading, Service Workers, UI Components, Optimistic UI, NativeBase, Calculators, Nutrition & Supplements, Reports, Data Handling, Custom Reports, Devices, Matching Systems, Dynamic Data, Styled-components, Web Push Notifications, User Authentication, Audio Chat, Texting, react native audio, Audio, Voice Recognition, Collaboration, App UI, Custom Themes, Color Palettes, SSIS Custom Components, Scheduling, Reminders, Triggers, Task Flows, Transitions, Cloudinary, Media, Integration, Development, Deployment, Location Services, Smooth Streaming, React Native Navigation, User Experience Design, Mapping, Location Tracking, Interactive Maps, GPS Tracker, GPS, Views, SEO Tools, Digital Filters, Crypto, Cryptocurrency Wallets, Automated UI Testing, Code Review
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