Valentines mobile app for my girlfriend
In the past, my passion for building stuff naturally made its way into my love life. Since meeting my girlfriend 2 and a half years ago I've made her things like a dreamcatcher made from a wine barrel with her birthstone in the middle, and a little wooden stool. Yes she wanted a stool for doing her makeup in front of the mirror, who am I to judge? For this valentines though, I thought I'd switch it up and move away from hardware and into software, and make her an app for her phone with just the right functionality to make her laugh :)
At this point I'm obliged (by herself) to point out that no matter how it might appear, she's definitely not a weirdo, the behaviour and incidents featured in the app are totally normal and not hilariously odd. Disclaimer done ✔️ 😁
View the web app here - mobile only for the moment. Also, here's the github repo if you'd like to borrow the code and make it your own
I build things like this a lot, if you'd like to see what's next and more info on how I build things, subscribe over here for updates. (max 1-2 emails a month)
Despite my experience with Ionic and putting apps on the Google Play store like MyDeliveryPal (an app for fast food delivery drivers), I've never actually published one to the Apple App store. And since time was a little of the essence, I decided that it'd be quicker and easier to go the route of a web application that she can install to her homescreen. That way I can host it on GitHub and update (patch horrific bugs) as needed.
What does it do?
I knew the app had to be personal to Erin. She's totally normal and not weird at all, so I wanted to add 3 features that I hoped she'd use (some more than others, though)
- Play songs from around the time that we started going out that reminded her of me.
- Play recordings of me talking about the ridiculous carry on that she gets up to (talking in her sleep, drunken maggot-acting etc - I record them all in a text file for times such as this).
- Have a button she can hit when the "shit's hitting the fan", so to speak. A button that let me know she needs a call ASAP.
HTML5 <audio> to the rescue
I always knew this element existed, but never had a reason to use it before. It's actually a fantastic little element that did exactly what I needed it to. I just plug in the sources and away she goes.
I made the player controls from SVG elements built in Sketch, and some jQuery logic to pause/play the media when they're tapped. Simples.
The audio element could handle the first two features perfectly. Tapping the "songs" or "funny times" buttons would swap out the src of the element and pressing play would start playback.
The "Shit hit the fan" button would require something else, though.
Pushbullet API to the rescue
I've used Pushbullet for years. It's a fantastic little service for sharing anything from my phone to my desktop (browser) or even to friends. It's also extensible via the API, which is nice!
Using the API I can use the create-push feature to send my phone a push notification with a simple http request. I can even customise the title and body text, sweet.
Works like a charm!
Final touches - floating hearts
It wouldn't be a valentines app without some floaty hearts all over the screen. A quick Google turned up a really nice codepen from Lisa Folkerson, a frontend developer at Indog. The Codepen in question and she's @lisafolkerson on Twitter. All credit for the animations go to her.
Overall I'm fairly happy with the result, mainly because she's happy, and she tells me it makes her smile :)
One last thing, a special mention to my good friend Ciarán Maguire for his help in the design and development stages 👍👍. We're a good team, check out our chrome extension for managing chrome extensions and profiles Custom Chrome.
