TechHub Flex Member Check-in System

At TechHub, we know how important it is to meet the right people, but meeting the right people can take time, effort and a great deal of talking about the weather� which is fine, but sometimes you just want to find the right people, and quickly.

We decided that we needed to have a way to allow our members to quickly find people who are working on similar projects, using the same tools, or have the same interests and may be able to chat through any problems and issues they were facing, right then, that moment.

We also wanted to create a way for TechHub and Campus staff to easily locate startups for last-minute opportunities, introductions, and facetime with VIPs (and finding out member�s tea and coffee preferences so that the team can make them a brew).

Introducing the new �TechHub Member Check-in System�. Here�s Mattia, our front-end developer on how we went from white-board to beautiful digital check-in system in a couple of weeks.

Why?

We started with a whiteboard where people could put their names or business card but we found that this was a bit cumbersome and we needed something online, besides, our whiteboard pens kept going missing...

How we built a MVP

I personally use Yeoman: Grunt + Bower + Yo a lot.
You can start a new project with all that you need in a matter of seconds!

Yo creates scaffolding for your project, allowing you to choos Yo is scaffolding for your project, creating the package.json, bower.json and the directory structure... but you can do more with it.

Grunt is a task runner and is doing stuff like minification, image compression, file rev, livereloading, build the project and deploy it on gh-pages� and other useful stuff.

Bower is a front-end dependencies manager, you can easy add a package to your project, for example we added font-awesome to expand the standard Bootstrap icons and Animate.css to do some cool animations and transition.

The first step was to build the maps, both to choose the seat and show the checkins, and we made it using Bootstrap 3.

We started from the less source to add the new media query breakpoint for the huge viewport (> 1900px) because we are projecting the map on the TV screen.

Then we created the layout adding some css rules to make the map look more like the real floor.

Then we needed something to record the data and then we decided to use Firebase.

Firebase is a powerful API to store and sync data in realtime.
It's based on websockets communication and it's amazing to build MVPs because you don't need to care about DB, back-end or servers.
You just focus on writing code and building your app.

How it works?

The data is stored and synced using Firebase.
A user fill in the information and chooses their seat, then the data is sent to Firebase (via the Javascript API) and in realtime the map on the screen is updated with data pushed from Firebase, using websockets.
This means that as soon as someone checks in, they appear on the map, with no need to reload the page or wait.

You can do this in a few lines of JS code:

flexDesk.on('child_added', function(snapshot) {
    var position = snapshot.name();
    flexDesk.child(snapshot.name()).on('value', function(snapshot) {

        // catch new data
        var memberName = snapshot.val().name,
            memberInterest = snapshot.val().interest || '',
            memberCompany = snapshot.val().company || '';

        // sanitize
        memberInterest = removeTags(memberInterest);
        memberName = removeTags(memberName);
        memberCompany = removeTags(memberCompany);

        // clear the seat
        $('#desk' + (position)).empty();

        // fill the seat with member's data
        $('#desk' + (position)).append(
            // some html
        );

    });
});

How can I checkin as a Flex Member?

You have 2 options to checkin:
- Going to www.imattechhub.com and filling in your details
- Use one of the tablets you can find near the Flex Member desks

Plans for the future?

We have had some feedback from our members and we would like to save your data so you don't have to fill in the information every time.
This is the downside of using Firebase - although it means you can build an MVP very quickly, you can�t use it so easily to record data.
Stay tuned!

We'd love to hear from you

Any suggestions are appreciated, like we said it's a MVP and we would like to re-iterate and make it better for our members.
Feel free to send your ideas to it@techhub.com