BcnDevCon 2012 - Website

June 6, 2012 ยท 4 min read

about the project

BcnDevCon 2012 was a really interesting experience. We had a real success in 2011 where we reached >900 happy attendees in our very first edition, with no budget nor experience.

The second edition would either confirm we were doing things right or it was just a one-time thing (Spoiler alert it went great :)

Theme

The theme for the second edition was clear months ago, playing with the Mayan Calendar urban legend predicting the end of the world by 2012 we held the event during that date. And we announced the main tracks: Cloud, Mobile and Indie Game Development.

I designed the Mayan Calendar as a center piece of the main page. It was not static, each one of the rings was rotating at different speeds indicating that time cannot be stopped end the end of the world was approaching.

Website

I prefer working with Python than PHP, so for the second edition I didn't look for an external company to help us with the website and I build it myself from scratch. Drupal is a very interesting platform but sometimes I had the feeling that I was too tight. Django seemed like a lighter option, and it was.

Once the main page was finished I dedicated my time to the Backoffice. I wanted to create a codebase not only for 2012's edition but for other editions to come.

New Features

Tags Section

BcnDevCon 2012 Tags section where user can asks for session topics

Since I like to innovate in my projects this one was no different. In BcnDevCon 2012 I introduced the Tags section.

In BcnDevCon 2011 I learned that quite a few people were not sure to submit a paper because they didn't know if people would vote for that. The Tags section was created months ago before the conference and allowed attendees to ask for topics they wanted to learn about.

For example, they could submit tags like Android, Angular, Unity... etc. Once these tags were validated, registered users could vote adding a very interesting info to the people thinking of submitting papers, since they now knew if people was interested or not in a specific topic.

Each one of the Tags had social Twitter and Email buttons so they could promote their own tag and at the same time, the Conference.

Advanced Scheduling

BcnDevCon 2012 smart conference scheduling

Tags section wasn't the only new feature for 2012's edition. Another lesson I learned from BcnDevCon 2011 is that in a conference scheduling should always be accessible, downloadable and easy to update (if possible)

If you print a schedule and something changes or you have to reschedule some session (IT ALWAYS HAPPENS) it's really difficult to communicate this to all attendees only with social networks and scribbling over posters.

I added entities such as Room, Session, Speaker and all of them were bound to a given Edition. So, for example, you could create Room A, Room B and Room C for 2012's edition and have different ones in the next one.

On the frontend part I created a Javascript code that adapted the size of the columns to the number of tracks per day, so for example, if the second day of the conference there were only two rooms used each track would occupy 50% of the schedule. If three or more rooms, the schedule would be divided by the number of different rooms for that specific day.

But I added an interesting feature and yet another lesson learned from BcnDevCon 2011: Custom Schedulings.

Users were able to mark the sessions they were interested in, so they didn't have to look into the whole scheduling to remember what talks they decided to go to. Not only that, they could also sync to an iCal URL and have an updated and personalised version of the conference scheduling.

Oh, and of course you could share your custom scheduling to the social networks.

But there was even more into it, information is power!

When I created the backend I added the capacity attribute to the Room Entity, allowing me to describe how many people could we fit in each one per edition.

Since people were marking their favorite sessions I was able to forecast if a room was too small or too big for a given session, and then I only had to exchange the room. It was a very interesting feature that saved a lot of headaches.

Media & Press

Other small but important sections were Media & Press.

With this section Sponsors, Speakers, Media Partners (and motivated attendees) could help us promoting the event selecting which kind of banner they liked for their website and a code would be generated for them so they would only have to copy and paste into their HTML.

Press section was created to focus and coordinate the media to what we really wanted, we would release two or three press releases before the event with announcements like new Sponsorships, Master Sessions or deadlines.

In fact, most of the time I spend on the project was on the Backend side and I couldn't dedicate much on the Frontend or the Design. Some of the other implementations where:

Newsletter service

Allowed subscription / unsubscription, templates, preview and emailing to the subscribed users (In later editions we simplified this section using MailChimp)

Ticketing System

Built in invoice system with the possibility claim / generate a bill automatically. It basically was a cron task that synchronised users between Eventbrite and our platform. Once a user bought a ticket they received an email with a URL so they could claim for an invoice. This same cron also created a chart comparing the previous and current edition's ticket selling trend.

Volunteer Program

It was basically a form so we could have all the information organised in the system

Social Engagement

The Social Totems to help promote the event in the social networks.

Appwards

In 2012 edition you could not only submit papers but also your Mobile application or video game to win tickets to the conference

Solidarity

A Videogame to collect money for cancer research. Actually, the game connected to an API on the website storing who was the fastest player in solving all the puzzles.

Probably I am missing some other implementations I did for this edition but I'd say I mentioned the most important ones. The truth is that it was a big investment in time but it paid with a successful edition, not only because of this website but due to the hard work of the awesome team behind it.

image gallery

skills

  • Javascript (+8 years)
    Includes technologies such as JQuery, ECMAScript 6, WebGL, Node.js and Backbone. Also good experience with React and React Native
  • Adobe Photoshop (+6 years)
    Normally used for Web Design and Photo manipulation
  • Python (+5 years)
    Includes frameworks such as Django and developing apps. Also used for Cron System Scripts and Web Scrappers
  • Adobe Illustrator (+5 years)