Projects

React Multi-Variants Selectors

Shopify custom block created with React: Multi-variants, multi-quantity ‘Add to Cart’ streamlines complex product purchases for better UX. The functionality is particularly beneficial for specialized products

Features:

• Combining multi-variant and quantity selection into a single control.
• Supporting custom bundles via metafields, unifying media display of 2 products!
• Using a dynamically injected entry point to add all selected items to the cart in one Shopify AJAX call

Technology:

• React, Redux, React-router
• Pub/Sub: Sync React+vanilla JS
• TailwindCSS, Framer-motion
• Vite

Links:

• Video Demo
• Preview Theme Store password: 1234
• Code

Custom React/Shopify App

Leveraging React, Redux, and Router to build custom app that fetch shopify store data using Admin/Storefront GraphQL APIs

Features:

• Fetch bestsellers with Shopify Storefront APIs
• Fetch customers with Shopify Admin APIs
• Customer contact directory

Technology:

• React, Redux, React-router
• Tailwindcss, Framer-motion
• Vite, Typescript

Links:

• Video Demo
• Preview Theme Store Password: 1234
• Code

Custom Storefronts with Headless Framework

Decoupled react landing page (hosted separately) interacts with the Shopify Storefront API for data retrieval.

Features:

• Utilizing Shopify Storefront API for order processing
• Custom-built front-end touchpoints
• Real-time products updates with Web hooks
• Secure payment processing through Shopify Payments
• Hosted on Netlify

Technology:

• React, React-router
• Tailwindcss, chakra-ui
• Shopify-buy SDK

Links:

• Video Demo
• Preview Theme
• Code

Warehouse Management System (react/firebase)

Manage & track warehouse packing/shipping tasks in order to streamline the operation for online orders.

Features:

• Track workers task duration
• Realtime inspection by supervisor
• Realtime inventory alert
• Worker efficiency report

Technology:

• React, Redux
• Materialize: Mobile-first layout
• Firebase: User accounts & authentication
• Firestore: NoSQL Database

Links:

• Video Demo
• Code