<aside> 💡

Role: Lead Architect & Full-stack Developer Business Impact: 83% Reduction in processing time

Tech Stack Breakdown:

• Full-Stack Framework: Remix (React & Node.js)
• Platform Integration: Shopify App Bridge, Polaris UI, GraphQL API
• Cloud Infrastructure: AWS SES (Transactional Emails)
• Database: Prisma ORM / Drizzle ORM
• Key Features:
  • PDF Engine: jsPDF & html2canvas (Client-side PDF generation)
  • Rich Text: SunEditor (For email template editing) </aside>

1. System Architecture

This is a dual-interface ecosystem designed to bridge the gap between customers and the sales team. It consists of two synchronized applications:

1. Customer-Facing Storefront: A seamless quoting experience embedded in the website.
2. Internal Admin Dashboard: A power-tool for employees to manage, generate, and track quotes.

2. Part I: The Storefront Experience (User Facing)

Goal: To capture customer intent with minimal friction.

• Decoupled "Quote Cart" Architecture:
  • I engineered a standalone Quote Cart system independent of the standard Shopify shopping cart.
  • Why? This allows customers to browse for regular purchases and B2B bulk quotes simultaneously without state conflicts.
  • Feature: Users can add products via a custom "Request Quote" button, managing their quote items (Add/Remove/Update Qty) in a dedicated React-based drawer.
• Smart Inquiry Form:
  • Dynamic form validation ensures all necessary personal and company information is captured upfront, reducing back-and-forth emails.
• Review & Submit Workflow:
  • Implemented a "Review Page" where users can verify their product selection and details before submission.
  • UX Detail: Designed for editability—users can jump back to modify items or contact info instantly before the final commit.

3. Part II: The Admin Dashboard (Employee Facing)

Goal: To empower sales reps to process quotes in seconds, not minutes.

A. Advanced Quote Management

• Manual Quote Creation:
  • Sales reps can manually build quotes for phone/email orders.
  • Ad-hoc Product Support: I implemented a feature allowing staff to add "Custom Products" (items not yet in the Shopify database) with manual pricing, solving a major edge case for special orders.
  • Dynamic Calculation: Real-time calculation of Subtotal, Tax, and Total based on custom inventory rules.
• Search & Filtering Hub:
  • Built a high-performance table with sorting and filtering. Staff can instantly locate quotes by ID, Name, Email, Status, or Date.
  • Assignee System: Allows managers to assign specific quotes to different sales reps to prevent overlapping work.

B. The "Quote Detail" Command Center

This is the core workspace where 80% of the workflow happens.