Tinder Message Generator Pt 3

Max Ehnert
4 min readOct 29, 2017

--

Over a year later, I finally finished this thing. tindermaker.com

desktop look

A lot has happened over the last year and well I kind of forgot about this project. I still get about a hundred views a week on my previous posts about this which I have a feeling is from people searching for a tool such as this because I have no idea why people would still be reading those old posts. If you’d like to go back and see how things have progresses check out part 1 and part 2.

So what is this? It’s a web client to make tinder conversations. You create your own match and you can write out a fake conversation with your match. It then generates an image of the conversation which you can share.

Why tho? Because it’s a fun idea that’s why. It was inspired by all the people on /r/tinder who post funny/sad/cringy/etc conversations from tinder. Now you don’t have to wait for a match to try out your new one liner. You can reap that karma from your fake conversation lol.

The UI has undergone huge changes since the last post I made. Not only has the Tinder UI changed, my UI was pretty rough looking and only now going back and looking at the screen shots from part 2 do I realize how bad it was. I think it looks a lot cleaner now, but the UI is still pretty sloppy and could be simplified and organized a lot better than it is. I really just wanted to get it into a ‘good enough’ state though to actually launch it and see if anyone hits the site. If people actually like it and use it I’ll keep working on it. There’s a whole roadmap of features that would make it better which I’ll discuss below.

Since the last post I also found a fix on the github repo for html2canvas which a user of the package made a fix for the poor resolution which made it much clearer. Unfortunately that repo seems to be a bit of a mess and those changes have still not been pulled into the library so they have to be made in my code. That was however the biggest hurdle to overcome with this project and is what initially killed off my motivation.

Image result https://imgur.com/6zFnkKW

I also ran into issues later of what to do with the image. I eventually settled on just utilizing the imgur API to post the image there because when you generate an image from a canvas element you end up with a data url in base64 which you can’t really do shit with if you’re trying to copy paste it anywhere online. The only solution to this seemed to be push it to an S3 bucket to generate a real url for it, but I don’t want it to persist anywhere because of cost and security. Using the imgur API is a good compromise though as it’s the defacto place to upload images now anyways.

Making it mobile friendly was important because I figure a lot of people will use it on their phones, however I also didn’t really put any time into that besides basic responsiveness so I need to spend more time making sure everything is useable and accessible on mobile.

When I was ready to launch suddenly I realized I needed to actually give this damn thing a name so I could buy a domain. I settled on tindermaker.com because it’s short and unlike some names I thought of, it was still the generic .com price, that’s basically it. I’m not that creative so if someone has a better suggestion and it’s available for cheap I’m open to changing the name.

For the roadmap of ideas, if people actually use this thing, there’s a few items I can think of right now that would be good to add. Making the top bar of the phone (carrier, time, battery) configurable would be important. Improving mobile UX will be important for not pissing off users. Possibly making an android version, but that’s not too important right now just because it doesn’t really make the customer experience any better (I’m on android now myself but sorry I just don’t see it as being that crucial). I also would like to add support for emojis. I started working on this feature last year but stopped because it wasn’t really that important for initial launch. Because of how common they are it would be a nice add, however it’s quite complicated because of all the different emoji packages that phones use. I also think adding support for images in the messages would be a nice add and would be an easy win so I will try and spend some time thinking about how to implement that.

As far the technical details go, when I picked this project back up I really just started hacking away at it so there’s a lot of clean up that needs to be done. The code is very obviously not in a maintainable state. I’m planning to also rework it to use flow typing because I want to use that more and switching an existing project over will be beneficial to my real work. I should probably also test some this, I’ve heard that’s important.

Checkout the repo here https://github.com/maxehnert/tinder-message-template

Website here http://tindermaker.com/

--

--