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
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.