Hey you know what? This is a fun little application

A javascript application I built to create shareable fact cards in seconds.

Role: Creator, designer, coder

Url: Try it out

TL;DR

"Hey" is a little utitlity I built to help anyone share insights in a digestable format. It takes all the complexity away and lets you type anything and save it as an image, easily shareable on any social media or chat app. The size of the window defines the shape of your image, making it super easy for anyone to produce the format they want.

Origin

As part of my personal devlopment one growth area was communication of insights. Improving communication channels across my team and different areas of the business in order to promote our user behaviours and sensibilise departments to user experience.

Observation

Insights are usually hard to process. If you are not used to consuming them it never is as impactful as they should be. Usually shared as part of a doc or slides. The format imposes you to want to dive into or to have someone present it needing you

undefined

"All new menu bar icons fit for Big Sure"

Initial ideas

I started looking at the tools I was using the most and realised a lot of the things we remember and share to others are GIF files. They convey an idea, a feeling or sentiment. So I started building a figma template that would allow anyone to generate their own fact card to share via their own channels, but although Figma is free for personal use there was still too much friction in the accessibiltiy of the tool. Not everyone uses FIGMA for a first. Then the time spent getting the template, adding your text, sttyling it to your need and exporting it it felt like it still had too much friction.

So I started building it as a proof of concept mini webapp.

The app

Altough the FIGMA template would have been perfect for my own needs I thought it would be better to do something that everybody ( even my mother...) could use it for their own needs.

Technology

I know my way in several areas of code, from SwiftUI to Python, and for the sake of my learning and the simplicity of what this app should be I decided to do a pure HTML, CSS & JS app. A serverless application that would only require a browser to run it and allow maximum reachability. Using Netlify I would host the application on my domain. Here

Breaking down the app features

Making the app as simple as possible is key. For one I don't want to get lost. I should do one thing and that thing very well. The feature set I had choosen and prioritised.

  1. Allow user to input text and export it to an image
  2. Allow user to style their text
  3. Allow the user to use their brother window to resize the canva

Appraoch for styling

  1. A button will trigger a JS function
  2. The function will randomly choose a font based on a defined list

Building the client

This is the app in action

Learnings

  1. Throughout this little project I managed to understand how simply manipulate DOM elements.
  2. Writing vanila JS functions to update dynamically DOM elements
    3.I can now create simple applications using JS