Flair

Inspiration

Visual communication via emojis, stickers, etc. had already been exploding before I learned about it when stickers were added to iMessages in iOS 10. The addition of a Xcode sticker pack template meant anyone with a developer license and a folder of pngs could make stickers. Slow, and still too big of a hurdle for most people, I was inspired to create a sticker design kit to enable people to quickly create, organize, and share their own stickers!

What it does

Flair creates custom stickers by combining simple design tools, a curated library of fonts and textures, Snapchat stickers, and a little SVG magic. Local and cloud based sticker pack organization makes it easy to save stickers and share them with friends.

How I built it

The Flair iOS and Android apps are built using Angular, Ionic, Typescript, HTML, and CSS for a bulk of the front end and Firebase for all authentication, cloud functions, and data storage. Custom Creative Kit and Sticker Kit Capacitor plugins were written in Swift for iOS and Java for Android to allow the web layer to natively send data to/receive data from Snapchat.

Challenges I ran into

Because Flair is a web app wrapped in native app shells, the Javascript version of graph requests I made initially would work in my browser tests but not when compiled to a device. Writing the Capacitor plugin to make a graphql request and then passing the deserialized response object back to the web app was straight forward enough other than needing to make a network interceptor for both platforms to add the authorization header.

Accomplishments that I'm proud of

Four years ago I made a native 'proof of concept' sticker maker iMessage extension and began dreaming about a proper 'photoshop for stickers' app. Researching, designing, and writing only for iOS — A year ago I started over and began writing the hybrid Angular/Ionic app. I'm very proud to be finally releasing to the app stores again.

For this hackathon specifically, I'm proud I was able to sort out writing custom GraphQL queries with variables on both platforms, being able to wrap it in a npm plugin, and being able to pass the data back to the web layer uniformly.

I'm also proud I was able to dynamically embed external image and font resources in an image.

What I learned

This was my first time 'requesting' data via GraphQL. I learned a lot about creating Capacitor plugins, embedding external dependencies in them, and passing data between the native and web layers.

What's next for Flair

• Building/curating the content library
• Additional layer types
• Animated stickers
• More sharing integrations.

Built With

• angular.js
• capacitor
• css
• firebase
• html
• ionic
• node.js
• svg
• typescript