Due to the rise of illegal trafficking and bootlegged merchandise in Costa Rica, the American Chamber of Commerce in Costa Rica (AMCHAM) partnered with the Treasury Ministry of Costa Rica to create a solution where citizens can report places where the illegal trafficking is taking place. The webapp tool This session will go through the process we used to build a headless Drupal that uses Google Maps API along with AngularJS to create a fast loading, fully responsive platform. The solution, mercadoilegal.com, has a lot of features implemented from contrib modules as well as custom created functionality: Restful API. Single page app, with Google Maps as well as recent articles, news and comments. User generated content through the frontend, feeding drupal with georeferenced nodes with images, tags and comments. SEO friendly frontend with AngularJS and shareable content. OG modules to create multiples sites on a single drupal installation. Custom domain or subdomain per OG site. Personalization features per site, like country selection, language, colors, logos, and others. A heavily modified backend with a personalized interaction to enhance the administrative user experience. Georeferenced spreadsheet reports and content exports for the relevant authorities. Cool frontend features to filter, preview, and transition through reports and content on the map. Crowdsourcing reports The platform empowers citizens to contribute on the fight of illegal trafficking of goods, potentially harmful to the population. Also, with the agreement of the Treasury Ministry, the citizens contribute to the reduction of tax evasion which in 2012 accounted for about 7.7% of the GDP. This webapp is continually being used by the citizens, showing successful use of open source technology in developing countries.

1. Mercadoilegal.com
A crowdsourced
reporting web app
based on a Headless
Drupal

2. Alberto Rojas
Partner, co-founder
@betovarg
www.estudiomanati.com

3. @cienvaras
www.estudiomanati.com
Andrés Díaz
PM, Front end dev

4. Web Agency

7. Context

8. Case Study Video
https://www.youtube.com/watch?
v=UJjD6F8ss6g

10. The Project

11. Challenges

12. Customizable sites, different domains
Decoupled responsive front end on a
different server
Drupal as a back end for multiple,
multilingual sites
Architecture

13. Shareable content
Easy to use front end
Maps
Others
Easy customizations from the backend

14. Very specific interactions
Heavily modified back end
Surprises

15. Backend customization

17. Inline editing

18. Dialog boxes

19. “Undo”

20. How does the site work?

24. Expansion to Latin
America

26. Headless
technology
appreciations

27. Speed
#yolo

28. The workflow of a
decoupled front end is
VERY REFRESHING
[Insert very refreshing image here]

29. When you go mobile first
you go speed first.

30. Data download:
642 KB

31. Team members
flexibility

32. Rely on non drupal
developers

33. Distribution platform

34. Publish anywhere with
web services!
API

35. Having fun on the
front end

36. Grunt
Libsass
Yeoman
… in a non drupalized way!

37. A site that builds itself

38. One application to rule
them all

39. Parameters
{
"logo": "http://admin.mercadoilegal.com/sites/
default/files/styles/site_logo/public/
logomer.png",
"color": "#ed1c24",
"language": "es",
"country": "Costa Rica",
"countryCode": "CR",
"shareFacebook": 1
...
}

43. Enhancements on
user interaction

44. ng-animate
(https://docs.angularjs.org/guide/animations)

45. angular-google-maps
(http://angular-ui.github.io/angular-google-maps/)

46. angular-moment
(https://github.com/urish/angular-moment)

47. angucomplete-alt
(https://github.com/ghiden/angucomplete-alt)

48. angular-translate
(https://github.com/angular-translate/angular-translate)

50. Social sharing
mini reverse proxy,
without cache
php

51. Lessons learned

52. Would preferred to use
OpenStreetMap but a lot of research
would be needed.
Adding content inside the map is not
trivial.
Crazy AJAX is crazy.
Google maps does not support windows
touch events, for Internet Explorer on
mobile.

53. Should you go
headless?

54. You need heavy front end interaction.
You need to have a publishing platform
(more apps, more platforms).
You want more flexibility with the
front end architecture.
You should if

55. Final thoughts

56. The things you’re used to will
work only on the backend

57. Your front end is still going to
have an overhead if it’s
complex

58. Performance still needs a
plan on both ends

59. • Further reading:
Manatí & Mercado Ilegal: Contraband Reporting on a
Decoupled Site
https://pantheon.io/resources/manati-mercado-ilegal-
decoupled-drupal-case-study

60. 15
D
R
U
P A L C A M
P
C
R
29 al 31 de julio
Universidad de Costa Rica

61. ¡Gracias!
@betovarg
@cienvaras
www.estudiomanati.com
Feedback:
www.bit.ly/manatidrupalconla