ShopifyHub

ShopifyHub is a MERN stack admin dashboard built for Shopify store owners who need more than the default admin experience. It consolidates catalog and order management, courier workflows, and operational analytics into a single, fast interface so teams can run inventory, fulfillment, and reporting without constantly switching tools.

The product is structured around a clear sidebar-driven layout: dashboard overview, product and order modules, shipment creation and tracking tied to Leopard Courier, downloadable delivery reports, and admin settings (profile, security, and theme).

Growing Shopify merchants often manage products and orders in Shopify while booking and tracking shipments in a separate courier system. That split creates friction: stale statuses, manual copy-paste, and weak visibility into what is delivered, pending, or refunded.

ShopifyHub addresses that by giving owners one control surface synced with Shopify’s Admin API for catalog and orders, and integrated with Leopard’s API for real-world logistics. The goal is straightforward operations: see performance at a glance, act on orders, book and trace shipments, and export reports when finance or support needs them.

Operations & navigation

• Dashboard: snapshot of sales, orders, and key performance indicators.
• Products: full CRUD for listings with pagination and filtering.
• Orders: handle pending, fulfilled, and cancelled states in one pipeline.
• Create shipment: book shipments through the Leopard Courier API.
• Shipment tracking: follow deliveries with up-to-date logistics context.
• Delivery reports: export views for delivered, pending, and refunded orders.
• Settings: admin profile, password updates, and dark/light mode with preference persistence.

Experience

• Responsive UI across mobile, tablet, and desktop.
• React Router for smooth in-app navigation without full reloads.
• State management tuned for performance, with fewer unnecessary re-renders on data-heavy views.

Frontend: React with Tailwind CSS for a responsive, maintainable UI; React Router for routing; analytics and charts aligned with the dashboard experience (e.g. Chart.js where visual reporting is required).

Backend: Node.js and Express.js with MongoDB and Mongoose for structured data and reliable persistence.

Security & auth: JWT-based authentication, bcrypt password hashing, and OTP email verification via Nodemailer for safer onboarding.

Integrations: Shopify Admin API for syncing products and orders; Leopard Courier API for booking and tracking shipments.

Quality: endpoints exercised in Postman before wiring the UI; manual UI testing for responsiveness and cross-browser behavior; centralized error-handling middleware for consistent API responses.

The hardest problems were keeping Shopify data, local records, and courier state aligned, especially when an admin edits a product or order and downstream status codes need to advance in a predictable way (e.g. stepped transitions that reflect the real workflow).

I also had to balance third-party rate limits and failure modes with a UI that still feels responsive, and to make OTP and email delivery dependable without complicating the sign-up path. Finally, pagination and filtering across large product and order lists had to stay fast as datasets grew.

I treated the API as the contract: every route was validated in Postman (happy paths, errors, edge cases) before the React layer depended on it. On the server, CRUD flows include pagination and filtering, and a deliberate status update flow so edits to products or orders propagate consistent state transitions instead of ad hoc patches.

Unified error-handling middleware keeps responses predictable for the frontend and easier to debug. For integrations, I focused on clear mapping between Shopify fields, internal models, and Leopard booking/tracking payloads so ops staff see one story in the dashboard. On the client, careful state structure reduced redundant renders on list and dashboard screens.

ShopifyHub is a full-stack operations product, not a toy admin: it combines MERN fundamentals with real third-party APIs (Shopify + Leopard), auth hardening, and a shipping-aware order lifecycle. It showcases how I approach integration-heavy systems: validate APIs early, model status and data carefully, and ship an admin experience that store owners can actually run day to day.