Creating a crowdsourced contraband reporting web app with a headless Drupal
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.
![The workflow of a
decoupled front end is
VERY REFRESHING
[Insert very refreshing image here]](https://image.slidesharecdn.com/drupalcon-pdf-150514214403-lva1-app6892/85/Creating-a-crowdsourced-contraband-reporting-web-app-with-a-headless-Drupal-28-320.jpg)
![[HKDUG] #20151017 - BarCamp 2015 - Drupal 8 is Coming! Are You Ready?](https://cdn.slidesharecdn.com/ss_thumbnails/hkdug20151017-barcamp2015-drupal8iscomingareyouready-151017054334-lva1-app6891-thumbnail.jpg?width=560&fit=bounds)
More Related Content
What's hot (14)
Similar to Creating a crowdsourced contraband reporting web app with a headless Drupal (20)
Recently uploaded (20)
Creating a crowdsourced contraband reporting web app with a headless Drupal
- 1. Mercadoilegal.com A crowdsourced reporting web app based on a Headless Drupal
- 4. Web Agency
- 7. Context
- 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
- 17. Inline editing
- 18. Dialog boxes
- 19. “Undo”
- 20. How does the site work?
- 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.
- 32. Rely on non drupal developers
- 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 ... }
- 45. angular-google-maps (http://angular-ui.github.io/angular-google-maps/)
- 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.
- 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