Inspiration

Sometimes you need to send some kind of cards to some people. Maybe you own a store and you need to send some promotional ad to your customers. Creating all of this images could take some time if it is not automated.

What it does

Scenify allows users to create templates. The templates can contain variables, which, should be provided at image rendering time, either using Rest API or locally, using the editor.

For example, template can contain:

  • Text variables: Hi {{firstname}}, we have something for you.
  • Image variables: {{image_url}}
  • QR Code: {{url}}

At rendering time, user will need to provide: firstname, image_url, qr_url, these values will be used for the renderer engine to create the final image.

This way, you can generate any number of images you want, just providing a template and an array of customers information.

How we built it

I have used React, Typescript, NodeJS, FabricJS, Express.

  • For images, currently using pixabay provider
  • For vectors, currently using icounscout provider

Challenges we ran into

  • Generating images in server side matching user design
  • Editing SVGs

Accomplishments that we're proud of

  • Successfully generated images on server side accepting variables
  • Successfully created and SDK for creating design editors like this
  • Successfully implemented modules for importing templates from PSD, AI SVG.

What we learned

  • Generating images in the server side
  • Create design editors for images and video

What's next for scenify

  • Currently, improving the implementation. Hope in the future I can get some investment to move the project to the next level.
Share this project:

Updates