Ali is available for hire

Ali Sanad

Verified Expert in Engineering

Front-end Software Engineer and Developer

Ismailia, Ismailia Governorate, Egypt

Toptal member since October 21, 2024

Expertise

Front End JavaScript TypeScript Git React.js HTML5 Next.js GraphQL Code Review SSO Engineering Full-stack GitHub Redux Agile Development Tailwind CSS

Bio

Ali is a senior front-end software engineer focused on building high-quality, performant websites. Proficient in React, Next.js, JavaScript (ECMAScript 6+), and TypeScript, he specializes in creating responsive, accessible, and cross-browser compatible applications. Ali also has a strong background in unit testing, automation, and debugging, with experience in both startup and large-scale enterprises—always emphasizing collaboration and delivering impactful results.

Portfolio

Tap Payments

Agile, TypeScript, React, Next.js, APIs, JavaScript, Material UI...

Toptal Core Team

JavaScript, TypeScript, Tailwind CSS, Jest, React Testing Library, Cypress...

Toptal Core Team

Agile, Jira, Figma, React, TypeScript, Docker, Styled-components, Sass...

Experience

Git - 5 years
JavaScript - 5 years
TypeScript - 5 years
React - 5 years
CSS3 - 5 years
HTML5 - 5 years
Next.js - 4 years
Testing - 4 years

Preferred Environment

React, TypeScript, Windows, Windows Subsystem for Linux (WSL), Cursor AI, MacOS, Next.js, Docker, GitHub, Agile

The most amazing...

...work I've done involved contributing to large-scale applications and building scalable solutions that improved user experience and system performance at Toptal.

Work Experience

Senior Front-end Engineer

2025 - PRESENT

Tap Payments

Participated in transitioning a monolithic front end to a microfrontend architecture (Module Federation/Vite), contributing to modular deployments and improved scalability.
Collaborated on cloud integrations, including AWS services, supporting front-end hosting, API communication, and secure data workflows.
Contributed to modern UI delivery by integrating REST APIs, Figma-based designs, and tested components (Vitest and Storybook), improving front-end stability and design fidelity.
Contributed to front-end quality using AI-assisted engineering (Cursor AI for code contribution, MCP integrations for design-to-code support) and Chrome DevTools MCP for performance profiling, debugging, and network/client-side analysis.

Technologies: Agile, TypeScript, React, Next.js, APIs, JavaScript, Material UI, Styled-components, Cursor AI, Model Context Protocol (MCP), Tailwind CSS, Virtualization, Website Performance, Web Security, Amazon S3 (AWS S3), Microfrontends, Monorepos, Nx, Vite, Webpack Module Federation, Webpack, Node.js, Express.js, MongoDB, WebSockets, Amazon Web Services (AWS), React Hook Form, Server-side Rendering (SSR), Single Sign-on (SSO)

Front-end Engineer | Client Retention

2023 - 2024

Toptal Core Team

Collaborated within a cross-functional Agile team to deliver solutions for internal applications and address key business needs.
Developed and maintained product initiatives related to the team's domain to improve client experience. Participated in technical initiatives to improve the codebase and reduce technical debits.
Worked closely with product managers and architects, providing open-minded input to deliver high-quality solutions, and actively participated in team-driven discussions.
Participated actively in Agile processes, contributing to daily standups and retrospectives, and offered feedback to improve the development process.
Provided and received constructive code review feedback, ensuring high-quality standards and fostering continuous improvement within the team.
Contributed to micro front-end and monolithic architectures using React, TypeScript, GraphQL, Jest, React Testing Library, Cypress, and Storybook.

Technologies: JavaScript, TypeScript, Tailwind CSS, Jest, React Testing Library, Cypress, Code Review, Git, GitHub, Jira, Confluence, Communication, React, Storybook, Agile, Ajax, API Integration, Apollo Client, Best Practices, CI/CD Pipelines, Complex Problem Solving, CSS3, Debugging, Docker, HTML5, Material UI, Full-stack Development, Presentations, React Hooks, Redux, Remote Work, REST APIs, Sass, Slack, Styled-components, Teamwork, Test-driven Development (TDD), Time Management, User Interface (UI), Visual Studio Code (VS Code), Webpack, Website Performance, Windows, Windows Subsystem for Linux (WSL), Zoom, Zustand, GraphQL, Figma, HTML, CSS, Front-end, SCSS, Chrome Extensions, Code Refactoring, ECMAScript (ES6), GitHub Actions, WebSockets, Responsive Design, Server-side Rendering (SSR), Single Sign-on (SSO)

Front-end Engineer | Top Academy

2022 - 2023

Toptal Core Team

Completed a challenging six-month internship for front-end engineering with React and TypeScript in five months due to exceptional performance.
Worked on the migration of legacy pages for an internal platform to follow the company micro front-end system design guidelines to improve UI/UX consistency across the platform, test coverage, and performance metrics.
Managed A/B testing and feature flag rollouts, enabling data-driven decisions that improved conversion rates and user engagement.
Contributed to an internal eCommerce platform from scratch, implementing the checkout steps validations and ensuring every step was covered with meaningful tests.

Technologies: Agile, Jira, Figma, React, TypeScript, Docker, Styled-components, Sass, Storybook, Jest, Cypress, React Testing Library, GitHub, GitHub Actions, HTML, HTML5, CSS, CSS3, JavaScript, ECMAScript (ES6), React Hooks, Code Review, Code Refactoring, API Integration, Apollo Client, Best Practices, Ajax, CI/CD Pipelines, Communication, Complex Problem Solving, Confluence, Debugging, Front-end, Responsive UI, User Interface (UI), eCommerce, Stripe, Responsive Design, Single Sign-on (SSO)

Front-end Engineer

2021 - 2022

Servicekee (now Passboard)

Developed and maintained front-end applications using React, Next.js, TypeScript, Redux, Material UI, and Rest APIs.
Translated UI/UX designs into fully responsive, dynamic web applications.
Collaborated actively with designers and engineers to ensure seamless feature implementation and smooth user experiences, showcasing a strong team-oriented approach.

Technologies: JavaScript, TypeScript, Next.js, Redux, Jira, Confluence, Git, GitLab, Code Review, React, Agile, Ajax, API Integration, Best Practices, Communication, CI/CD Pipelines, Debugging, CSS3, Complex Problem Solving, Docker, Full-stack Development, HTML5, Material UI, Postman, React Hooks, Presentations, REST APIs, Slack, Styled-components, Swagger, Teamwork, Time Management, User Interface (UI), Visual Studio Code (VS Code), Windows, Zoom, HTML, CSS, Front-end, Lazy Loading, Formik, Yup, React Redux, Multitenancy, Responsive Design, Server-side Rendering (SSR), Single Sign-on (SSO)

Freelance Front-end Engineer

2021 - 2021

Self-employed

Built web applications with React, JavaScript, HTML, and CSS.
Delivered projects focused on client requirements while ensuring scalability and performance.
Contributed to a healthcare project using React and TypeScript within a micro-frontend application managed by Lerna, ensuring efficient code sharing and modularity.

Technologies: React, TypeScript, Monorepos, Lerna, Ant Design, Node.js, Bitbucket, REST APIs, GraphQL, HTML, HTML5, CSS, CSS3, JavaScript, GitHub, Responsive Design, Server-side Rendering (SSR), Single Sign-on (SSO)

Experience

AI-powered Survey Generator

https://ai.theysaid.io/survey/free-survey/import

• Built a production-grade AI survey platform with three core creation flows: AI prompt-based generation, external link imports, and file uploads, enabling users to create surveys in seconds.
• Architected the front end using React, TypeScript, Next.js, GraphQL, and TailwindCSS within an Nx monorepo, emphasizing scalability, code reuse, and type safety.
• Delivered a fast, intuitive user experience through well-structured workflows, optimized data fetching, and a maintainable component architecture.

AI Forms

https://ai.theysaid.io/survey/project/2a7d4b7b-509d-44b9-975f-0d715da0a8c4

• Owned the front-end architecture of an AI-powered forms platform featuring speech-to-text via ElevenLabs, voice-driven answer selection and navigation, and dual AI-assisted and traditional form experiences.
• Designed a schema-first form system using React Hook Form and Zod to enable dynamic field rendering, type-safe validation, and extensibility across complex, multi-step flows.
• Scaled the application using React, TypeScript, Next.js, GraphQL, and TailwindCSS within an Nx monorepo, making deliberate trade-offs around performance, accessibility, and long-term maintainability to optimize data collection quality.

AI-powered Chrome Extension

I led an initiative related to adding new features to an existing AI-powered Chrome extension, including managing the technical scoping and breaking down tasks for this complex project. I worked closely with product managers, designers, and other engineers, aligning technical solutions with business goals. I facilitated collaboration across teams, ensuring a smooth and timely delivery within our Agile environment.

Passboard

https://passboard.net/

As part of the front-end team, I contributed to the MVP and initial phase of Passboard's event management system. I collaborated closely with designers to ensure the UI was user-centric, worked with product managers to align features with business goals, and partnered with back-end engineers to integrate APIs. I used React, TypeScript, Next.js, Redux, and Material UI to build scalable, user-friendly features, ensuring smooth workflows for event organizers.

Refactoring for Design System Adoption

I contributed to refactoring the team's domain to follow the design system guidelines, enhancing UI/ UX consistency, improving maintainability and cross-browser compatibility, and streamlining development processes.

I refactored legacy React HOC components to modern React hooks for improved performance. I collaborated closely with the team to improve unit and component tests by writing meaningful tests with React Testing Library and Cypress.

I participated in extracting the team's domain into micro-frontend packages, improving maintainability, reducing cross-team code reviews, and speeding up the development process.

Education

2020 - 2021

9-Month Postgraduate Professional Training Program in Full-stack Web Development

Information Technology Institute (ITI) - Ismailia, Egypt

2012 - 2017

Bachelor's Degree in Petroleum Engineering

Al-Azhar University - Cairo, Egypt

Certifications

DECEMBER 2024 - PRESENT

React: Software Architecture

LinkedIn Learning

DECEMBER 2024 - PRESENT

React: Design Patterns

LinkedIn Learning

NOVEMBER 2024 - PRESENT

React: Building Progressive Web Apps (PWAs)

LinkedIn Learning

JANUARY 2024 - PRESENT

React Testing Library and Jest: The Complete Guide

Udemy

JANUARY 2024 - PRESENT

Cypress End-to-End Testing - Getting Started

Udemy

OCTOBER 2022 - PRESENT

Time Management: Working from Home

LinkedIn Learning

MAY 2022 - PRESENT

DevOps Foundations: Continuous Delivery/Continuous Integration

LinkedIn Learning

MAY 2022 - PRESENT

React TestDome Certificate | Ranked in the Top 10%

TestDome

MAY 2022 - PRESENT

React: Using TypeScript

LinkedIn Learning

APRIL 2022 - PRESENT

Developing for Web Performance

LinkedIn Learning

MAY 2021 - PRESENT

Docker for Developers

LinkedIn Learning

MAY 2021 - PRESENT

React: Server-Side Rendering

LinkedIn Learning

APRIL 2021 - PRESENT

React Hooks

LinkedIn Learning

APRIL 2021 - PRESENT

Building Modern Projects with React

LinkedIn Learning

Skills

Libraries/APIs

React, Apollo Client, React Testing Library, Node.js, REST APIs, React Hook Form, Picasso, Stripe, Formik, Yup, React Redux, Zod

Tools

Git, GitHub, Figma, Slack, Zoom, Jira, Confluence, GitLab, Webpack, Postman, Trello, Lerna, Bitbucket, Nx, Webpack Module Federation

Languages

JavaScript, TypeScript, HTML5, CSS3, GraphQL, HTML, CSS, Sass, SCSS, ECMAScript (ES6)

Frameworks

Next.js, Tailwind CSS, Jest, Cypress, Redux, Material UI, Express.js, Swagger, Ant Design

Paradigms

Testing, Agile, Test-driven Development (TDD), Best Practices, Web Performance Optimization (WPO), Code Refactoring, Model Context Protocol (MCP), Microfrontends, WACG 2

Platforms

Visual Studio Code (VS Code), Docker, Windows, MacOS, Amazon Web Services (AWS)

Storage

Amazon S3 (AWS S3), MongoDB, Google Cloud

Other

React Hooks, Storybook, User Interface (UI), Front-end, Figma to React, Server-side Rendering (SSR), Code Review, Complex Problem Solving, Full-stack Development, Time Management, Remote Work, API Integration, Ajax, Styled-components, Debugging, Full-stack, Responsive Design, Agentic AI, Single Sign-on (SSO), Communication, Teamwork, Presentations, Volunteering, Website Performance, CI/CD Pipelines, Windows Subsystem for Linux (WSL), Zustand, Lazy Loading, Monorepos, GitHub Actions, GRAPH, Chrome Extensions, Responsive UI, eCommerce, WebSockets, Multitenancy, Progressive Web Applications (PWAs), PWA, Cursor AI, APIs, Virtualization, Web Security, Vite, Radix UI, Speech-to-Text (STT)

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.

Share your needs

Discuss your requirements and refine your scope in a call with a Toptal domain expert.

Choose your talent

Get a short list of expertly matched talent within 24 hours to review, interview, and choose from.

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