Manatí & Mercado Ilegal: Contraband Reporting on a Decoupled Site

Content to help you work smarter and faster

Summary

Mercado Ilegal is an initiative of the AMCHAM (Costa Rican - American Chamber of Commerce) with support from the Ministerio de Hacienda (Costa Rican Ministry of Finance). Developed by Manatí, this decoupled drupal web app lets the authorities crowdsource the reporting of contraband goods distribution.

Due to the ever-improving usability of Javascript UI frameworks, decoupled site building has recently gained momentum in the Drupal community. So when the Costa Rican American Chamber of Commerce approached UX designer Gabriel Golcher with a set of unique requirements that required a headless site, he turned to Manatí. CEO and Co-Founder Alberto Rojas was up to the challenge. His team trusted Pantheon to run their backend.

Using Pantheon wasn’t a question—we knew it was the best fit for the backend, and that not having to manage infrastructure would help us meet our deadline.

Alberto Rojas, CEO & Co-Founder

Manatí Meets Mercado Ilegal

Founded in 2011, Manatí is a Costa Rican web agency that specializes in Drupal projects. Comprised of 12 team members with backgrounds ranging from design, to art, to electrical engineering, Manatí seeks to make the web a better place by focusing on political transparency. So when the Costa Rican American Chamber of Commerce needed an experienced agency to build a crowdsourced contraband reporting app, they turned to Manatí CEO and Co-founder Alberto Rojas.

“We were thrilled to learn of their project,” Rojas said. “We were to build a site that would empower citizens to share information about trafficking. We were eager to help in this movement.”

The project's UX designer, Gabriel Golcher, brought them the project—with a strict set of requirements that called for a decoupled build and an aggressive timeline of just two months. Rojas and his team were able to start with some assumptions from previous projects, but ultimately this would be their first headless project, and therefore a bit risky. The project called for an incredibly responsive, fast site integrated with maps and multiple languages, that could easily facilitate user-generated content.

“The first thing we think about with sites like these is that it’s fun to work freely on the fronted without php templates,” Rojas said. “But it is also important to keep in mind that this is a more challenging build, and AngularJS calls for extra work and custom code.”

The Architecture

After syncing up with the project's UX designer, the Manatí team ("Manateam") determined the architecture for the site:

  • A Drupal backend and single database on Pantheon

  • A single codebase that easily creates customizable sites with different domains

  • A decoupled, responsive AngularJS frontend served from a different server  

Building Mercado Ilegal

Alberto and his team knew this project would come with a specific set of requirements, each with its own challenges:

  • A single Drupal instance would need to serve many sites

  • Integrating maps would involve using an adaptive, robust Maps API that could interact with AngularJS

  • Shareable content would require finding the appropriate metadata (not always easy with AngularJS)

  • The team would need to build an easy, intuitive UI to help users contribute content

  • They would also have to create easy customizations from the backend to simplify cloning

“We evaluated each of these potential challenges and did our best to prepare,” Rojas said. “There were two challenges that did surprise us—the heavily modified backend and the very specific interactions.”

On the backend, the Manatí team had to create a very detailed and specific administration interface, quite different from Drupal’s normal backend. They also had to deal with multiple sites with different domains. They did this on Pantheon with a single Drupal instance, using Organic Groups to organize content, users and permissions. Drupal was configured such that when a new site is created, the administrator can assign a new custom domain for it.

Rojas’ team originally wanted to use CORS (Cross-Origin Resource Sharing) but at the time couldn’t do so, so they ended up using JSONP to overcome browser restrictions. Because Pantheon now supports CORS, they look forward to using it on future decoupled projects.

Launching Successfully with Expansion in Mind

Manatí completed the project on time—in just two months—and AMCHAM has been thrilled with the results. AMCHAM will now use the data crowdsourced in the app to provide a monthly report to government authorities. They also published a video to show the depth of the initiative.

The ability to easily create multiple new sites from the platform has allowed AMCHAM to focus on expanding the crowdsourced contraband reporting movement throughout Latin America. Currently, two sites run on the codebase: mercadoilegal.com (Costa Rica) and comercioilegal.gt (Guatemala).

“We’re happy to help citizens keep their government accountable,” Rojas said. “AMCHAM hopes to deploy in Colombia, Mexico and Argentina and add more complex features. This is a big deal for taxes. Costa Rica is processing their first batch of data and figuring out how to report the results.”

Rojas and his team have also noticed that building the site with mobile in mind resulted in incredible site speeds on both web and mobile, supported by Pantheon. Because the app itself requires a very small data download (642KB), the site is very quick to load for users. “Mobile first equals speed first,” Rojas said. “This is especially important in Latin America where broadband speeds aren’t very high.”

“Now that we have an API, the application has become agnostic,” Rojas continued. “We cannot only serve decoupled websites, but we can think of better reporting tools (created from or integrated with our API), direct communication with government platforms, data visualization from crowdsourced reports, etc. We can also start thinking about the potential of “publishing anywhere” with Drupal and a solid, state of the art infrastructure from Pantheon that supports development over infrastructure maintenance.”

Lessons Learned

A successful launch of their first headless site was not the end of the journey for Manatí. “It was a fun build,” Rojas said. “And we made sure to take note of what we learned along the way so that we can improve the next time a project like this comes along.”

Rojas noted some specific lessons learned in relation to the Mercado Ilegal project:

  • Complex Ajax interactions with Drupal in the backend aren't easy—it’s important to know how far you want to go because it requires a lot of time and debugging.

  • Adding content within a map is not trivial—don’t reinvent the wheel if you don’t have to. Manatí needed to add their own functionality to the markers and infowindows features in Google Maps. They planned on applying the functionality by writing their own code, but after careful research found contributed Angular code that was ready to use. They saved a ton of time by looking into their options before moving forward.

  • Google Maps doesn’t support Windows touch events for Internet Explorer on mobile—be aware of how your project will perform across all browsers and devices so that it doesn’t come back to surprise you.

Should You Go Headless?

If you’re considering whether a decoupled build is the right approach for your next project, Rojas suggests doing a lot of research and choosing a good fit. “If you want a lot of flexibility, then yes, a decoupled site will give you that,” Rojas said. “A decoupled site would also work well if you need heavy frontend interaction or a publishing platform. But it is important to remember that it is a challenging project and you’ll only have the usual Drupal functionality in the backend. Your frontend is still going to have overhead if it’s complex, and performance still needs a plan on both ends.”

Pantheon Through it All

Decoupled or not, Manatí has standardized on Pantheon for all of their client projects. The platform has saved them both time and money, and the ability to develop sites for free before pushing live has also been a huge benefit.

“We’ve had client meetings where the client has a specific question and we can spin up a site in a matter of minutes on Pantheon to show them how it would work in a real way,” Rojas said. “This speeds up the project kickoff process and allows us to focus on planning the app instead of planning the infrastructure. We are saving at least 20 hours per environment setup, and monthly maintenance as well.”

Rojas also likes that he and his team don’t have to worry about DDoS or performance on the server level. “We have not yet had the need to call support for any performance-related reasons, other than to clarify what we need on our end in code,” Rojas said.

Perhaps the most important benefit is the knowledge that they can easily scale as use of the app expands. “We can ramp up with just a few clicks when the time comes,” Rojas said. “And the flexibility of billing lets us easily manage this with the client.”


Manatí presented a session on this project at DrupalCon LA—watch the video

Benefits

  • A completed headless site in just two months

  • Time and money saved through standardization

  • A single codebase for the backend on Pantheon

  • The ability to create an infinite amount of sites with different domains

  • Fast website performance, on both web and mobile

Let’s get in touch

855-927-9387