I’m Hassan, aNext.js Developer

Project Overview

Rate Runner is a smart, cost-efficient shipping platform built to help individuals, e-commerce stores, and small businesses save on shipping expenses. It automatically compares real-time rates from FedEx to identify the most affordable and reliable shipping options. With a focus on simplicity and performance, Rate Runner offers users a clean dashboard to manage shipments, access full tracking details, and ensure faster delivery times — all in one streamlined platform.

Problem & Goal of the project

Many individuals and small businesses struggle with high and unpredictable shipping costs, often manually comparing rates from multiple sources. This process not only wastes time but also leads to missed opportunities for better deals and faster delivery options.
The goal behind Rate Runner was to simplify this experience by creating a centralized platform that automatically compares real-time shipping rates from FedEx. I aimed to help users make data-driven decisions, reduce costs, and streamline their shipping workflow through automation and a user-friendly dashboard.

Project execution

The development of Rate Runner Shipping focused on delivering a fast, scalable, and intuitive experience for users managing their shipping needs. I started by architecting the platform with Next.js, utilizing Server-Side Rendering (SSR), Client Components,Server Actions, and API Routes to build a seamless, high-performance interface. Each workflow — from fetching rates to generating shipments — was designed to be reactive and efficient, ensuring minimal latency and smooth user interaction.

To maintain data integrity and security, I implemented comprehensive validation pipelines using Zod, covering API requests, input handling, and database operations. The platform’s UI was developed using ShadCN UI styled and optimized withTailwind CSS, providing a clean, modern, and fully responsive design that adapts across all devices.

For backend services, I integrated Supabase as the primary database and authentication layer, combining it with Prisma ORM for structured and type-safe data management. This setup enabled efficient queries, relational consistency, and smooth integration with user accounts, shipment data, and transaction records.

The logistics core of the platform was powered by the FedEx APIs, which handled real-time rate comparisons, label generation, and shipment tracking. This allowed users to instantly compare costs, choose the best courier option, and generate shipping labels directly within the dashboard — all without leaving the platform.

Finally, Stripe was integrated to handle secure payment processing, linking each transaction directly to corresponding shipment records. I also implemented webhooks to listen for payment events, ensuring that the application remains in sync with the latest transaction statuses. I also added the ability to "Charge Later" which allows admins to capture payments for rate differences at a later time. This ensured a frictionless checkout flow and complete transparency across all shipping operations.

Throughout development, I emphasized scalability and modularity, making it easy to extend the system with additional carriers, new payment gateways, or advanced analytics in future iterations.

Project results

The launch of Rate Runner resulted in a faster, more transparent, and cost-efficient shipping experience for its users. By consolidating rate comparisons, shipment creation, and payments into a single dashboard, the platform eliminated the need for users to switch between multiple carrier tools or websites.
Through optimized Next.js rendering and efficient API handling, the app achieved smooth performance with reduced load times, even during real-time rate fetching from the external FedEx API. The integration of Supabase and Prisma provided a robust data structure and secure authentication system, ensuring reliability at every stage of the workflow.
Users benefited from automated rate optimization, which helped them make smarter shipping decisions and reduce manual effort. Additionally, the FedEx API integration streamlined label creation and tracking, cutting down on repetitive administrative tasks.
Overall, Rate Runner successfully demonstrated how automation and modern web technologies can simplify logistics, improve efficiency, and empower small businesses and individual users to save both time and money on shipping.

Project Overview

FCC Container Builder is an interactive, drag-and-drop web application developed for First Choice Containers (FCC) — the leading U.S. platform for purchasing new and used shipping containers. The platform allows users to visually design and customize container layouts, calculate real-time costs, and generate detailed PDF quotes instantly.
This project empowers customers to explore container modification ideas for storage, housing, retail, or office spaces — all through an intuitive, visual interface that brings their concepts to life.

Problem & Goal of the project

FCC wanted to offer its users a way to go beyond static listings — to visually design containers in real-time, understand modification costs instantly, and request professional quotes directly online.
Traditionally, buyers had to contact sales teams, share drawings, and wait for manual estimates. This process was time-consuming and limited creativity.
The goal of this project was to create a self-service container builderthat bridges this gap — combining visual design, cost calculation, and automated quote generation into one streamlined experience.

Project execution

The development of FCC Container Builder focused on performance, accuracy, and smooth interactivity. I built the application using Next.js with TypeScript, leveraging its server-side rendering and API routes to create a fast and scalable frontend architecture.

The interactive design experience was powered by Konva.js and HTML Canvas, enabling users to drag, resize, and customize container elements visually. Each action dynamically recalculated the total cost, ensuring an accurate, real-time quote generation workflow.

For backend services, I integrated Strapi as a headless CMS to manage container data, pricing configurations, and user submissions. Persistent storage and user data management were handled through MongoDB with Mongoose, ensuring flexibility and scalability.

Once a design was completed, the system automatically generated a detailed PDF quote using Puppeteer. This included container visuals, selected modifications, and dynamic pricing, giving users a professional document they could instantly download or share.

Throughout development, I emphasized modularity, clean state management, and performance optimization to ensure a seamless design experience — even with complex drag-and-drop interactions.

Project results

The launch of the FCC Container Builder transformed the way users interact with shipping container customization. Instead of static listings and manual quote requests, users can now design, visualize, and price their containers instantly.
This reduced inquiry time by over 60% and significantly increased customer engagement on the platform. The automated PDF quote generation also streamlined the company’s sales workflow, eliminating back-and-forth communication for standard pricing requests.
With an interactive interface, real-time pricing, and professional quote outputs, the FCC Container Builder helped First Choice Containersposition itself as a more innovative and customer-focused brand in the container sales industry.

Project Overview

The B2B Shopify Automation for Tag project involved building a complete automation and management platform for handling large-scale B2B orders through Shopify. Designed for multiple business clients, the system streamlined the entire workflow — from purchase order processing and inventory tracking to ASN (Advanced Shipping Notice) generation and automated reporting.
I developed a custom React + Express.js dashboard powered by the Shopify GraphQL API, providing real-time synchronization, secure access control, and automated background jobs for order and inventory operations.

Problem & Goal of the project

The client, Tag, managed multiple Shopify storefronts for B2B operations, relying heavily on manual order processing and purchase order imports. This led to slow response times, inconsistent data synchronization, and operational inefficiency.
The goal was to develop an automated, centralized platform that could handle large PO volumes, streamline ASN file generation, and provide a real-time dashboard for business users — ensuring speed, scalability, and security across multiple tenants.

Project execution

I architected the system with a React (Next.js) frontend and Express.js backend, leveraging Node.js for high-performance API orchestration. The Shopify GraphQL API was integrated for efficient, scalable access to orders, products, and fulfillment data, enabling complex queries and rapid data mutations.

To automate the PO workflow, I implemented robust file parsing for CSV, XML, JSON, and Excel formats, with routing logic based on client-specific business rules. This eliminated manual order entry and significantly reduced processing time.

The platform featured a secure authentication system using bcryptjs for password hashing, session-based login, and role-based access control. Security was further enhanced through Helmet.js for HTTP headers, CORS validation, and API key authentication for sensitive endpoints.

Advanced ASN automation was achieved through node-cron for background job scheduling — generating and emailing CSV reports for shipped orders automatically. A comprehensive inventory module was also implemented with threshold alerts, manual and automated report generation, and email delivery to business contacts.

Logging and monitoring were handled using Winston for centralized error tracking and system transparency. The entire platform was optimized for cloud deployment, ensuring reliability and scalability across multiple client instances.

Project results

The B2B Shopify Automation platform drastically improved operational efficiency and accuracy for Tag’s B2B operations. It automated the processing of over 1,000+ purchase orders and 500+ ASN files, while enabling secure, multi-tenant management for 5+ business partners.
The automation reduced manual order entry time by 90%, maintained 99.9% uptime, and provided real-time visibility into orders and inventory. As a result, Tag’s clients gained full transparency, accelerated fulfillment cycles, and minimized operational errors — leading to improved customer satisfaction and smoother B2B logistics.