Zakaria Mofaddel, Developer in Vilnius, Vilnius County, Lithuania
Zakaria is available for hire
Hire Zakaria

Zakaria Mofaddel

Verified Expert  in Engineering

Front-end Developer

Location
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

Beehive Apps
Shopify, Shopify API, Node.js, Next.js, Prisma, PostgreSQL, Webpack...
EightBit Labs, LLC
Next.js, PostgreSQL, TypeScript, JavaScript, APIs, CSS, Tailwind CSS, Prisma...
1stdibs
React, Relay, GraphQL, Node.js, Docker, Jest, TypeScript, Amazon S3 (AWS S3)...

Experience

Availability

Part-time

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

2023 - PRESENT
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).
Technologies: Shopify, Shopify API, Node.js, Next.js, Prisma, PostgreSQL, Webpack, Tailwind CSS, DigitalOcean, Vercel, Back-end, Liquid Template, Monorepos, Custom Shopify Apps, Shopify Customizations

Senior Full-stack Developer

2022 - 2023
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.
Technologies: Next.js, PostgreSQL, TypeScript, JavaScript, APIs, CSS, Tailwind CSS, Prisma, Amazon S3 (AWS S3), API Integration, Artificial Intelligence (AI), Back-end

Front-end Engineer

2022 - 2023
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.
Technologies: React, Relay, GraphQL, Node.js, Docker, Jest, TypeScript, Amazon S3 (AWS S3), Redux, SCSS, ESLint, Git, Linux, Jira, HTML5, CSS, HTML, UI Animation, User Experience (UX), Front-end, User Interface (UI), Front-end Development, REST APIs, Web Development, eCommerce, APIs, GitHub, JSON, Back-end, Monorepos, Unit Testing, Amazon RDS

Full-stack Engineer

2021 - 2022
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.
Technologies: TypeScript, Node.js, Express.js, Prisma Client, PostgreSQL, React Apollo, Shopify API, Shopify, Rarible Protocol, Non-fungible Tokens (NFT), Next.js, Liquid Template, Webpack, Styled-components, Full-stack, HTML5, CSS, Tailwind CSS, Prisma, Apollo Server, HTML, User Experience (UX), Shopify Design, Front-end, User Interface (UI), Front-end Development, REST APIs, Cryptocurrency, Shopify Theme, Web Development, Apollo, Architecture, API Integration, eCommerce, Automation, APIs, Liquid, Redis, GitHub, JSON, Headless Software, Back-end, Custom Shopify Apps, Shopify Customizations

Front-end Engineer

2021 - 2022
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.
Technologies: JavaScript, React, Next.js, TypeScript, Storyblok, Redux, REST, Axios, Google API, Git, GitLab, Styled-components, Content Management Systems (CMS), HTML5, CSS, HTML, UI Animation, User Experience (UX), Front-end, Figma, User Interface (UI), Front-end Development, REST APIs, Web Development, API Integration, Online Ordering, APIs, GitHub, JSON, Google Maps, Headless Software, Unit Testing

Full-stack Developer

2020 - 2021
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.
Technologies: JavaScript, React, Next.js, Node.js, GraphQL, Apollo, PostgreSQL, Webpack, Amazon S3 (AWS S3), TypeScript, Full-stack, HTML5, CSS, Material UI, Prisma, Apollo Server, HTML, UI Animation, User Experience (UX), Front-end, User Interface (UI), Front-end Development, REST APIs, Web Development, Architecture, API Integration, eCommerce, APIs, GitHub, JSON, Google Maps, Back-end

Bazaart

Developed a Shopify plugin to allow merchants to display and sell NFTs on their own Shopify online shop 2.0 template. I created a Next.js app served by a custom Node.js (Express.js) server. This server exposed two GraphQL endpoints, one to interface with the Shopify API and another with our PostgreSQL database. For the integration with Shopify OAuth, I followed best practices, ensured security, and used the Prisma Client to retrieve, validate, and store user sessions and custom subscription data.

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

Built the MVP, a monolithic application, for a multi-tenant platform that would allow artisans (sellers) to list their custom-built keyboard keycaps.

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

Developed a complete furniture eCommerce web application with custom functionalities tailored for the furniture industry. Created the front-end with Next.js with TypeScript.

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

In this project, I built the landing pages for the startup and chose a suitable CMS. My first choice was Next.js. Considering the website was primarily static and only needed to refresh when new content was pushed through the CMS, it was a perfect case for ISR paired with the Next.js preview mode feature.

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/
SnapArt is a Shopify plugin that offers unique shopping experiences through user-driven product customization and integrated generative AI. Developed with a custom CLI that integrates with Shopify CLI, the plugin eases the creation of theme app extensions with React. The plugin's architecture transitioned from Next.js' custom server to API routes for easy scalability and rapid server functionality implementation using tools like tRPC.

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.

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

Frameworks

Next.js, Relay, Material UI, Tailwind CSS, Redux, Express.js, Jest, tRPC

Languages

GraphQL, TypeScript, JavaScript, HTML5, CSS, HTML, Liquid Template, Shopify Liquid, SCSS

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

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