Planner customisation tool
Overview
The planner customisation tool is a web app I'm in the process of building with Remix for my business PLANNER.STUDIO. Once live, it will allow customers to create custom planners by selecting a preferred date range and choosing from over 80 unique page layouts. When the customer finishes customising their planner, a compiled PDF will be generated and made available to me for printing.
Project Purpose and Goal
The idea for this tool came about to solve an inefficiency in my existing business workflow. Up until now, the planner customisation process has been entirely manual: I have face-to-face meetings with customers where they can browse layouts and let me know what they'd like to include. I then manually compile the pages into a PDF before printing and binding. The tool is being built so customers can make their choices autonomously and free up my time, delivering a better, more streamlined experience for everyone involved.
Web Stack and Explanation
I'm building this project using Shopify's Hydrogen headless framework, which uses Remix as its foundation and hooks into Shopify's GraphQL Admin API for Shopify-specific data (orders, customer informatione etc), as well as my custom MongoDB database for page layout and customer planner design data.
Challenges and Process
The most technically challenging aspect of this project has been implementing the logic to compile pages for to the outputted PDF in the right sequence. Customers can choose from a range of dated layout types (e.g., monthly, weekly, daily) and the ordering logic can vary depending on the selections made (for example, if a customer selects both a weekly and daily layout, they will alterate a week at a time). I've had to learn about ISO weeks and think through complex logic to ensure the planner's page order makes sense, while also accommodating miscellaneous undated layouts in an order defined by the customer. It's been a process that's required lots of planning and experimentation to get right.
Lessons Learned
This project has provided a great learning opportunity to deepen my understanding of React, including hooks and component management. It's also forcing me to think deeply about user experience: ensuring the planner creation process is simple and intuitive. Additionally, learning to work with Shopify’s API and understanding its data points has been challenging but rewarding.