Very user friendly interface
Front end and back end project
A front end a back end flyers and brochures creator built with React and Node.js
This tool generates print quality pdf documents from user's pictures and custom texts. It is used by a company in the real estate industry to create flyers and brochures for their listings. I designed the user interface to be very user friendly and intuitive, allowing users to easily upload their pictures or use the ones our photo agency delivered, customize their text and generate their pdf documents with just a few clicks. The tool also includes a variety of templates and customization options to allow users to create unique and professional looking flyers and brochures that stand out in the market.
Here is a video of me using the tool to create a flyer for a listing. I explain how this tool helps users to create professional looking flyers and brochures with ease, I also show some of the customization options available in the tool, such as different templates, and font choices, that allow users to create unique and eye-catching marketing materials for their listings.
This video is in french. Scroll down for English explanations.
A Real estate agent can create a flyer for a listing in less than 5 minutes with this tool. The user interface is designed to be very user friendly and intuitive, allowing users to easily upload their pictures or use the ones our photo agency delivered. The tool automatically adjusts the size and placement of the pictures to ensure that they are of high quality and properly aligned on the flyer while allowing high customization.
The main feature that allows this tool to create high quality pdf documents is the monitoring of picture resulting resolution and placement on the flyer. Errors and warnings maintained in a clickable list allow users to easily identify and fix any issues with their pictures, such as low resolution or incorrect placement, ensuring that the final pdf document is of high quality and ready for printing.
Every project starts with a template. Those are created by a designer using Adobe InDesign and include placeholders for pictures and texts. Themplates are saved in IDML format (InDesign Markup Language) and are parsed by the front end to extract the necessary information for the flyer creation process. IDML Objects are converted to fabric.js objects and rendered in a canvas where users can customize their flyer. Once the user is satisfied with their flyer, the front end recreates an IDML file with the customized information and sends it to the Node.js back end where it is converted to a PDF document. Converting IDML to web obects and then back to IDML is no easy task, you will not find a lot of information on this process online.
Before using my flyer editor, the company was using a very old and outdated software that was not user friendly at all. It was difficult for users to create flyers and brochures that looked professional, and the process was time consuming. It was slow as hell and costly ($50K us / year).
As we say in Québécois: "Les users étaient su'le cul" (they could not believe how good the new tool was). The new flyer editor has significantly improved the user experience and has allowed users to create high quality flyers and brochures with ease.