
Zakaria Mofaddel
Verified Expert in Engineering
Front-end Developer
Vilnius, Vilnius County, Lithuania
Toptal member since August 17, 2022
Zakaria is a front-end software engineer specializing in eCommerce, SaaS, and Shopify development. He has extensive experience as a full-stack TypeScript developer, using technologies such as Node.js, GraphQL, tRPC, and Next.js to build solutions for startups quickly. Zakaria has considerable experience building Shopify applications using React and its large ecosystem of packages. He fluently speaks English, Italian, and Moroccan Arabic.
Portfolio
Experience
- JavaScript - 4 years
- Next.js - 3 years
- TypeScript - 3 years
- React - 3 years
- GraphQL - 2 years
- Node.js - 2 years
- React Apollo - 2 years
- Relay - 2 years
Availability
Preferred Environment
Visual Studio Code (VS Code), MacOS, Docker, Amazon Web Services (AWS), Linux
The most amazing...
...project I have built is SnapArt, a Shopify plugin that allows customers to generate designs directly in the storefront by leveraging generative AI.
Work Experience
Shopify Developer | Founder
Beehive Apps
- Created two Shopify apps that serve more than 200 merchants and are growing!
- Developed a Shopify app template that uses Next.js API routes and deployed it to Vercel to leverage automatic conversion to serverless functions.
- Integrated with the Shopify OAuth 2.0 system to make the merchant's experience seamless while installing the application.
- Created a CLI tool that, with the help of webpack, allows me to quickly develop Shopify theme app extensions that use the rich React ecosystem.
- Implemented a token system for image generations and integrated Stripe to allow the purchase of said tokens. This allows us to limit spam calls to our servers and limit costs with external APIs (stability AI).
- Ensured our performance metrics were up to standard and followed Shopify requirements for web vitals (LCP, FID, and CLS).
Senior Full-stack Developer
EightBit Labs, LLC
- Introduced the Prisma Migrate CLI to an existing PostgreSQL database with millions of records. Allowing us to cleanly keep track of our migration history and avoid corruption in our data.
- Made sure to keep code quality standards across the team high and took care of refactoring old parts of our code that did not uphold our standards.
- Modeled our database schema to facilitate the implementation of complex functionalities.
- Implemented and deployed API endpoints as serverless functions on Vercel using Next.js as a full-stack solution.
- Analyzed and improved slow raw SQL queries making use of tools like DataGrip.
- Implemented styled components and Tailwind CSS following the Figma designs given by our designer.
Front-end Engineer
1stdibs
- Implemented complex solutions to solve bugs related to time-zone discrepancies.
- Participated in code reviews and wrote unit tests to help ensure code maintainability.
- Implemented algorithms to optimize page speed and solve unwanted re-rendering in our components.
- Helped implement solutions to improve the developer experience in their local environment using Docker.
- Created GraphQL resolvers to accommodate complex front-end features.
Full-stack Engineer
Faedy
- Developed a Shopify app single-handedly. It allows displaying and selling NFTs on a Shopify online store 2.0.
- Created a framework to develop and ship React applications to Shopify templates and automatically generate liquid code.
- Used webpack features and plugins to optimize bundle size and keep merchants' stores as performant as possible while delivering complex functionalities.
- Created an interface allowing buyers to connect their MetaMask wallets to any Shopify store with the plugin installed.
- Implemented a Redis store to manage and retrieve session data obtained from the OAuth process.
- Used Prisma ORM to design and query the PostgreSQL database, which allowed me to extend the Shopify API and create custom functionalities based on the users' subscription tier.
Front-end Engineer
Ziticity
- Migrated the existing landing pages from Django server-side-rendered to Next.js-based.
- Integrated Storyblok CMS to allow quick content changes.
- Used the incremental static regeneration feature of Next.js to optimize performance and costs.
- Developed an npm package to generate TypeScript types for Storyblok CMS.
- Hosted classes for the marketing team to help get up to speed with the usage of the new CMS.
Full-stack Developer
Furnibay, UAB
- Built the entire platform's front end using Next.js and Apollo GraphQL and used both for data fetching and state management.
- Implemented the back-end and front-end logic for a secure checkout system.
- Came up with and implemented a performant and predictable algorithm to solve the adjacent product variations issue that most eCommerce ventures face when displaying product lists.
- Used Next.js hybrid features like SSG, SSR, ISR, and CSR to make pages highly performant based on the context.
- Implemented localization to launch in four different countries.
- Helped refine and improve our relational database schema.
Experience
Bazaart
I used the Rarible SDK, a TypeScript abstraction over the smart contracts used at Rarible.com, to implement the core logic of the plugin and allow NFT display and trading. Due to the big bundle size of the SDK, I ensured all complex logic happened inside lazy-loaded components to maintain the store pages quick and snappy.
Furthermore, I utilized Preact for its small bundle size to render multiple React applications to the dom as Shopify template sections. These React app sections managed their scoped state through React Context API and shared the same state through Jotai atoms, for example, crypto wallet connection. I used DigitalOcean as a cloud provider to deploy the PostgreSQL database and the Next.js app.
Artisan Keycaps Marketplace
I chose to build the server using Node.js and Apollo-server-express, exposing a GraphQL endpoint secured by combining Nexus and GraphQL Shield to allow for fine-grained control over which types and resolvers were required to be behind auth rules.
Thanks to the nature of GraphQL, I was able to generate all the basic CRUD resolvers (TypeScript) using Pal.js, which has great support for Prisma Client.
Prisma, with its simple-to-understand schema language, also allowed me to design a complex database (PostgreSQL) schema to suit all the business requirements for our MVP and to be able to easily manage migrations.
The client was built using Next.js, Tailwind CSS, and Headless UI.
I used a catch-all API route dedicated to this purpose, and I built a custom next-auth Adapter that used Prisma Client to create and retrieve users directly from the database.
Apollo Client was the choice to run queries and mutations and manage local states in a clean manner using its in-memory cache.
Furniture eCommerce
I utilized the Next.js Incremental Static Regeneration (ISR) feature to generate build-time static pages, such as the homepage and the first page of each category, to have extremely low TTFB. This step dramatically improved SEO ratings, which were tested using lighthouse development tools.
The UI was developed using MUI and customizing its prebuilt components to fit the requirements. I applied a predictable and performant algorithm to solve the adjacent variation issue. The most complex part was developing a secure checkout system, which I managed autonomously. I went from the front end, where Apollo GraphQL helped with data fetching and state management, to the back end, integrating the payment gateway and implementing all the logic to ensure data integrity.
In addition, I implemented database schema changes through the Prisma Client to accommodate complex GraphQL resolvers on the back end, such as the checkout system. I helped to develop a custom CMS to handle order fulfillment and define the homepage layout and basic shop settings.
Ziticity
I researched and tested multiple headless CMS solutions and ran a quick demo for the CTO. I chose Storyblok CMS as the only one with a visual editor that offered the best quality-to-price ratio. Further, I developed a types generator package to pair with the Storyblok SDK, entirely written in JavaScript and exposed to no types at the time. This way, I could confidently use the data returned from their API, avoid basic bugs, and ensure maintainable code.
Additionally, I implemented reusable components and simplified Grid and Flex systems for the marketing team to build full pages with minimal technical support. I also ran Zoom classes for the marketing team to get them up to speed using the CMS and the available components.
SnapArt: Personalized eCommerce with Generative AI
https://snapart.shop/The plugin leverages React Konva for an intuitive admin panel and customer-facing customizer, allowing merchants to define printable product areas. SnapArt employs a PostgreSQL schema designed with Prisma for reliable data management. Lazy loading of components ensures optimal product page performance, while a custom session handling system integrated with Shopify's OAuth2 guarantees secure user authentication.
Visit SnapArt at snapart.shop for a demo of the plugin.
Skills
Libraries/APIs
React, Node.js, Shopify API, REST APIs, Liquid, Google Maps, Google API, Google Analytics API, Apollo Client, AWS Amplify, React Query, Stripe API
Tools
React Apollo, Prisma, GitHub, Webpack, Git, GitLab, Jira, Google Analytics, pgAdmin, Figma, Amazon Cognito, Stripe Checkout
Languages
GraphQL, TypeScript, JavaScript, HTML5, CSS, Shopify Liquid, HTML, Liquid Template, SCSS
Frameworks
Next.js, Relay, Material UI, Tailwind CSS, Redux, Express.js, Jest, tRPC
Platforms
Shopify, DigitalOcean, MacOS, Docker, Storyblok, Linux, Nexus, Amazon Web Services (AWS), Visual Studio Code (VS Code), Vercel
Storage
PostgreSQL, JSON, Amazon S3 (AWS S3), Redis
Paradigms
REST, Automation, Unit Testing
Other
ESLint, User Experience (UX), Front-end, Front-end Development, Shopify Theme, Web Development, Apollo, APIs, Back-end, Custom Shopify Apps, Shopify Customizations, Widgets, Styled-components, Apollo Server, Full-stack, Content Management Systems (CMS), UI Animation, User Interface (UI), API Integration, eCommerce, Headless Software, Monorepos, Non-fungible Tokens (NFT), Axios, Prisma Client, Rarible Protocol, Application State Management, Shopify Polaris, i18n, Shopify Design, Cryptocurrency, Architecture, Online Ordering, Headless UI, NextAuth.js, Artificial Intelligence (AI), Webhooks, Amazon RDS
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
Choose your talent
Start your risk-free talent trial
Top talent is in high demand.
Start hiring