Zakaria Mofaddel

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.

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.

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.

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