FMG Dropshipping - Projects - Rory Bourdon | Web Developer & Visual Artist

B2B Jamstack E-commerce Website

The dropshipit.college landing page. The design focused on minimalism, thin lines, a limited palette and heavy use of animation.

Forbes Marketing Group, a promotional product distributor, contracted me to build them a custom business-to-business e-commerce website. Their existing website was visually dated, slow, and lacked functionality they needed. I was responsible for all design and development and work was done primaily in Adobe Illustrator and Visual Studio Code.

Viewing a custom box and one of it's products.

Our goal was to build a site where we could use FMG's experience to curate products from ASI's massive product catalog and then create our own inventory consisting of collections of those products attached with additional features, services and custom made products.

The standard search page is statically generated along with all of our curated products. When no results are found we transition to a server-side-rendered page using SWR to fetch data directly from the API.

With the ASI Smartlink API I had access to hundreds of thousands of products, but I only wanted to have a small set of these on the site. I needed a user-friendly way to store references to our curated set of products and organize them into all new products for our inventory, while also attaching our own metadata.

Searching our pre-made kits.

I chose to build this site with Next.js for it's speed, developer experience, and ability to mix static site generation and server side rendering. I also made extensive use of their API routes to serve as a backend between the application and ASI Smartlink. I selected GraphCMS to serve as a headless CMS for all inventory management and content creation. I use their web hooks to automatically rebuild the site when content updates are made.

The quoting process.

Due to the nature of their business direct ordering wasn't something the client wated, instead opting for a simple quote form that emulated an ordering process. I integrated Sendgrid for this, and used a Next.js API route to send emails to the customer and client using their dynamic template system.

Seamless page transitions throughout.

I made extensive use of Framer Motion's layout system and advanced animation tools to achieve seamless page transitions and smooth animation throughout the site. Styled-components provided a convenient CSS-in-JS solution that helped with theming.

Smooth dark mode toggle, respects system preference.

Building this site was an excellent learning experience for me and we were successful in what we set out to do. I'm happy with my choice of frameworks, libraries and tooling and plan to continue to use them in future projects. I think a good maker never feels totally satisfied with their creation and this project is no exception but I'm proud of what I achieved and the client is very happy.