Making Meetup

Meetup Hacks: Introducing Meetloaf!

Each quarter, Meetup holds a two-day internal hackathon. Engineers work on hacks ranging from launchable features, to internal tools, to the downright ridiculous. Meetup Hacks is a new feature focusing on these projects. 

Caroline is a Core Software Engineer who recently graduated from Tufts University. When she’s not hacking, she listens to last.fm while working on Meetup notifications.

Being new on the job and wanting to contribute with something practical, I was all set to build something that might actually get pushed to production.  I spent the week before the hackathon tossing around a lot of ideas, mostly relating to a big project I’m about to start.

Then, as I was sitting at my desk blasting some tunes and hunkering down on a tough bug, an incredibly random idea for a project came to me: what if I allowed our members to hook up to their last.fm accounts?  

I’m the kind of person who loves data, and loves music, so when it comes to a combination of those two things, I swoon, just a little. I put feelers out into our dev hipchat channel to see if there were any other last.fm users around so that I could possibly justify doing this hack, but I only got two responses. Turns out, most people ditched last.fm a few years ago.  

But, the more I talked to my friends about it, the more I wanted to do it.  It’d be something fun and I’d get to learn about the authentication process.

And come, on what’s better than music?

Answer: nothing.

When we got around to presenting our ideas at the hackathon kickoff, it turned out that two of our Data Team engineers (Brian and Evan) had a similar idea.  But, they wanted to use the Facebook “Like” data that we have from some of our members to generate a concept of the music taste profile for a group.  At that point, I was pretty set on last.fm, so we decided to get together at the end of day 1 and see what we could do about combining our projects.

The Hack

So, then it was time for me to dig into the last.fm api.  I explored a little bit and implemented calls to a few of the artist specific methods just to get comfortable before diving into user auth.  

While the api is great on the whole, the one thing that might be frustrating to some developers is that they’ve developed their own authentication system. It’s incredibly similar to OAuth, but not enough so that I could use the framework that Meetup already has for linking to OAuth services like LinkedIn and Facebook. Some would groan, but I know next to nothing about authentication protocols, so I took this as an opportunity to get familiar with them.

There are a few different ways to authenticate with last.fm, but I chose the desktop application route so that I wouldn’t have to allow last.fm to make calls to our development environment.  From there, it’s a relatively simple process: you get a token from last.fm, have the user request authorization using that token, and then you can fetch a session (and corresponding key) with last.fm. The somewhat difficult part comes from deciding how to store intermediary data (like the token) and how to proceed through all the stages I mentioned.

Because this was a hackathon, I took the hacky way out, and passed the token through the whole process, and kept track of the user’s state by monitoring the window I had opened for them to authenticate with last.fm (so that I would know when to trigger a request for a session key). Kids, don’t try this in production.

Despite all the hackiness, I got to learn something: for the first time, I got to play with our internal Ajax method library in the process to make the links between what was happening in the browser and storing the account tie in the DB.

Once I had authentication, I could actually start doing fun things with user data.  As per Murphy’s law, the api call I was hoping to use was deprecated, and ended doing a bunch of fun set operations to develop a playlist for a meetup group based of the last.fm stylings of anyone authenticated in that group. Everything was fine and dandy, until I realized that I only had two Meetup HQers authenticated, and didn’t have enough data to make good playlists.  

Luckily, Brian and Evan, who were working on the facebook side of things, let me dig into some of what they had built and I got to embark on the process of using the echonest api to convert between facebook’s identifier and musicbrainz ids, which is what last.fm uses.  So, after all this work, anyone authenticated with last.fm could click a button to create a last.fm playlist for any group they were in.

Combining Forces

Finally, I got together with Brian and Evan to set up the beautiful integration of our projects.  They had pulled all the facebook info and associated pairs of meetup groups and music artists with a numeric score. I supplied them with a way to look up the music taste for a member (since last.fm is more detailed than facebook on a per member basis), and Evan adjusted his beautiful group recommendation algorithm to recommend meetup groups to a member based on their music preferences.  While the recommended groups were not ones that I might be interested in, it definitely knew me. I got recommended a couple Meetups in Urbana, Illinois (thanks, Elsinore), and though I was unaware that my music taste so heavily reflected my gender, I was recommended a lot of female focused groups.

While I was right in my assessment that this is not going to make it into production, I had a great time, got to know some other MEME teamers a little bit better, and most importantly, I now have a playlist on last.fm reflecting our collective music taste.

Special thanks to the guys for coming up with the ultimate name for the ultimate project: Meetloaf.

Introducing Attendance on Mobile Web!

Each year, we invite exceptional Computer Science students to intern at Meetup. They work on product teams alongside full time engineers, as well as complete an end-to-end project related to the Meetup platform. This year, our interns tackled a feature our members have been asking for: an attendance tool on mobile web.

The Interns:

Casey Caruso, UI Engineering intern and rising Senior at Lehigh University

Emily Eng, UI Engineering Intern and rising Senior at Tufts University

Selecting a project:

While brainstorming ideas for our summer intern project, it was important to us that we implement a feature that would truly improve members’ experience with Meetup. We looked closer at the role of Meetup organizers and reevaluated the tools we were giving them to manage their Meetups. In doing so, we discussed the reality that many organizers are interested in tracking member attendance. Taking attendance allows them to distinguish loyal members, lets them better anticipate the turnout at future Meetups, and enables them to run a more successful Meetup group overall. Although Meetup had an attendance management tool on desktop, there was no mobile web feature, leaving organizers unable to take attendance on their phones at the most sensible time: as people walk in to their Meetup. We wanted to provide organizers with the ability to take attendance conveniently on-site of a Meetup on their mobile devices. Out of all the ideas that came out of our brainstorm, this was a clear winner since a mobile attendance tool is a feature that organizers have specifically requested in the past.

The Development Process

The initial design of the mobile attendance tool was simple. It had a list of members with corresponding checkboxes, the members being anyone who had RSVP’d yes to the Meetup, and above the list was the current count of how many people were marked as attended. In the nav bar, there was an X button on the left to return to the event page and a magnifying glass icon on the right that revealed a search bar so that organizers could search for a member in their group if he or she showed up to the Meetup without RSVPing.

A technical challenge that we faced while building this tool was making sure that we were coding smartly, reusing existing code where possible. So, for the search portion of the attendance tool, we decided it would be a good idea to reuse some of the code that had already been implemented for the search tool in Messages. This task involved factoring out a generic search view from the existing Messages search plugin and making it able to be used anywhere on the Meetup site.  As a result, this generic search tool will also be able to replace a bunch of places where we have been using jQuery UI Autocomplete.

Usability Testing

After finishing the first version of the project, we ran it through usability testing to see what we could improve. Interestingly, we found that some organizers were confused about the permanence of their actions on the page. To make the actions more clear, we decided that it would be a good idea to pivot from our initial design. Instead of updating a member’s attendance in our database on click of a member’s corresponding checkbox, it would be better to include an explicit “Save” button in the nav bar. This way, if organizers were just curious to see what the attendance tool was, they could poke around without the fear of inadvertently changing their Meetup’s attendance. Additionally, we saw that some organizers did not understand what the magnifying glass search icon meant. To address this problem, we moved the search bar out of the nav bar and, instead, placed it right above the attendance count. We also added “Mark All” and “Unmark All” buttons to make taking attendance easier for organizers of larger groups. Some additional features that are currently in the works for version 2 are ways to mark members as “no-shows” and ways to mark members’ payment statuses.

The Final Product

Overall, working on this intern project was great; it was both fun and challenging, and we have definitely learned a lot from it. Many thanks to everyone who helped us along the way, and we hope that Meetup organizers will enjoy this new feature!

Interested in interning at Meetup? Contact recruitment at jobs@meetup.com