Tinder Message Generator Pt 1
See the final product tindermaker.com
--
I thought of a fun idea the other day for a simple app that would allow me to try a few new things. I was blowing off steam browsing through reddit r/all and saw a lot of posts for tinder. All of them were witty conversations with guys who have nailed the pick up line shtick. It made me think about all the witty guys and gals that aren’t so attractive who aren’t getting matching to try out that wit. Also, I thought it could be more fun to just make bs conversations up than waste peoples time. So I came up with the idea to build a duplicate of the Tinder messenger UI and allow you to create a match profile and build a dialog between the two.
After a short search I found another site that has already executed this wonderfully. I didn’t really expect to be the first, Tinder isn’t exactly a new site. However their interface looked a little dated so a new polished version will be more applicable to people who want to use it.
I got a lot of inspiration from that site and another one that allows people to create fake CNN news headlines and send the image to social media.
It’s very simple looking at first, but grew slightly complicated while I figured out the data structure for dynamically creating messages, storing the person match information, phone type information, and storing all the messages together. I also wanted the text boxes to be draggable so they can be rearranged without deleting and starting over. Finally I need a way to export this information out of my app.
I haven’t completed it yet, but I’ve made pretty good progress so far. I’ve spent far too much time creating things like a round cornered chevron and spent a lot of time, before backburning, creating the little drop triangle in the message corners. I’m about 60–70% done with the logic and styling however. Overcoming the understanding of the data structure for the logic was the hardest part. It’s all just putting the pieces together from here.
So far it has been a lot of fun. I really enjoy working in react and am still learning new things every time I start a new project. For this project I used a different drag and drop library than Dan Abromov’s DnD library which was fun to use but more complicated and larger than I needed for this project.
Things still TODO:
- create canvas image of conversation, then convert to Base64
- AJAX calls to imgur/twitter/fb/download etc to export the image to social media
- buttons for those calls
- add delete function to messages
- need to create the Android interface
- fix issue with profile image needing to be clicked every time
- allow users to add their own images
- add an emoji picker
- style the form
- lastly, buy a real domain for this
You can check the progress here: https://github.com/maxehnert/tinder-message-template
Part 2: https://medium.com/@ehnertm/tinder-message-generator-pt-2-f5eabecad812
Part 3: https://medium.com/@ehnertm/tinder-message-generator-pt-3-b4ca32eddb0e
