Flyer Generator Web App

Screenshot

A JSON powered PDF flyer generator. Templates are defined in JSON with spots designated as dynamic content using predefined components. Users can interact with those components to supply data. Both the template JSON and user supplied data are sent to a web server where an identical PDF is generated and made available for download.

Overview

Realtors need a lot of flyers and marketing material. Oddly enough, they often ask the Loan Officers they partner with to create that material for them. They offload the work, but it’s often an opportunity for the Loan Officer to “Co-Brand” and establish a relationship with the would be borrower.

Features

  • JSON powered templates with dynamic content sections
  • Markdown support with predefined styles
  • Predefined components / content blocks for special dynamic content
    • Canvas image upload, resize, and crop component
    • Dynamic text component
  • POST’ing the JSON data + JSON template to the WebAPI generates an identical PDF
  • Store all submissions and submission data for compliance reasons (and for easy template history)
  • Save “rolledex” of Realtors for easy insertion into template “contact blocks”

The true power behind this is that you can now create any number of templates by creating a new layout in JSON. Each layout supports dynamic content by way of “Canvas Image Component” and the “Dynamic Text Editor Component”. To extend the application, one would only need to add new dynamic components and map how they’re rendered to the output PDF generated by the PDFsharp library.

Canvas Image Component:

It’s rough, but it works. You can see an early version of its source code on this pen.

Canvas Image Widget

Dynamic Text Component:

This was fun. Any text can be rendered as “Dynamic Text” by wrapping it in backticks. The npm package marked allows us to hook into how it renders different markdown content. Normally, backticks wrap “code”, but for us they wrap dynamic content.

Dynamic Text Editor

Content Template Component:

Users were able to save a “rollodex” of contacts. Switching the target contact would update the contact data for the template, changing any template sections that were bound to that data.

Content Template Section

  • You can see an album of app images: HERE

Technology Used

  • Gulp, WebPack, NPM
  • HTML5, SCSS, and Canvas Element
  • Vue approachable, versatile, performant js view framework.
  • marked A full-featured markdown parser and compiler, written in JavaScript.
  • AWS S3 For remote file storage
  • PDFsharp + MigraDoc to turn that raw JSON into a printable PDF
  • C# ASP.NET CORE WebAPI, and MS SQL to power the backend

Note: Canvas is Powerful and Fun

Working with the Canvas element is not as straightforward as traditional web development, but it is incredibly powerful. After this project, I played around with it on CodePen and created the pen below. Wave your mouse over it. Click around.

See the Pen Canvas Paint by Tracing by Danny Brown (@dannyrb) on CodePen.

And that’s just scratching the surface. Take a look at Phaser.io or Pixi.js – Both well respected and maintained game engine frameworks for HTML5 game development with Canvas!


Other Projects

Thumbnail

Homeside Pro Mobile App

Hybrid mobile app used by realty partners to view their consumers’ loan statuses.

Thumbnail

Consumer Web Portal

Mobile friendly SPA that offers document upload, document signing, and account management.


© 2017. All rights reserved.