Barcelona Startup Map

Barcelona Startup Map is a web application displaying the current state of the Barcelona entrepreneurial ecosystem on a map. Through Barcelona Startup Map, you can find, geolocate and add startups, investors, accelerators/incubators, big corporations, talent centers, and venues providing services to entrepreneurs.

In March 2014, we agreed with Barcelona Activa to develop a startup map for our favourite city. We had been using the startup maps of other cities for many different reasons, and we could not understand why Barcelona had none yet.

The proposal was very well received, and no later than a month later we started working on it, in order to design & develop a beautiful and intuitive web application that would help to map the entire Barcelona startup ecosystem. The application should take the best practices of the other cities' maps, plus a good-looking and easy-to-use look & feel.

The goal of the project was to collect as many startups and related companies as possible in a short amount of time, as the map would be publicly disclosed in the BizBarcelona 2014 congress - as we explained in our blog post Barcelona Startup Map (Part 1). We launched a week before the congress and we got over 50 signups in a week and a half.

Given the tight schedule, using our techstack was critical to ensure the success of the project by meeting the deadlines. Only using Ruby on Rails & AngularJS we would be able to develop the application in time. In fact, we became the first specialised Ruby on Rails provider for the Barcelona City Council and their department Barcelona Activa, and the first ones to access the production stages from outside their premises, because we are a remote working company. The trust we generated, even as a starting company, was enough to make them change these policies to ensure the success of the project.

The Barcelona Startup Map allows the users to register their companies through a very simple signup workflow that requires a backoffice validation by the platform administrators. When approved, the newly registered company will appear on the map.

The application also allows the user to explore the map and to learn more about Barcelona and its ecosystem through infographics, statistics and charts.

On the frontend side, we developed a Single Page Application (SPA). When we started conceptualising the application, we decided that we wanted the map to be the central part. We wanted the user to have a smooth interaction with the map and we were horrified with the idea of the browser reloading every time the user navigated between different page sections.

Choosing AngularJS as the frontend framework was critical for the success of the project. With AngularJS we had a tool that greatly simplified the client-side data management by using 2-way databinding. Thanks to the incredible open source community built around the framework, we were able to use 3rd party libraries that helped us to implement some of the most critical features of the application. Angular Google Maps helped us to manage the Google Maps integration with built-in support for clusters, Angular Translate opened the door to better manage multilanguage (I18n) and UI-Router helped us to manage the different application routes as states.

We developed the backend using Ruby on Rails. We implemented an Active Admin based Admin Panel and an API REST in charge of providing all the data to the frontend application. One of the most challenging parts of the backend was ensuring that the application server was capable of managing hundreds of concurrent requests after the project’s public presentation. Luckily, Ruby on Rails and the advanced cache systems we implemented on top of it ensured that the application was capable of maintaining an average response time lower than 100ms, even during an intensive PR campaign in the online press & media.

The main challenges of developing the Barcelona Startup Map were three: meeting the tight schedule, providing a solid base to develop the application further, and designing an intuitive interface.

As mentioned above, our techstack permitted us to meet the strict deadlines and be able to present in the BizBarcelona congress, but also our fluid communication with the client, using a combination of Basecamp and Trello, allowed us to iterate and meet all the required changes in time.

Because we knew this project was going to become a long-term project, we applied best practices to make it maintainable over time, as Barcelona Activa maintains all the projects in-house, once their development has been completed. We also provided them with both technical and functional documentation and a technical training on-site for their personnel.