Copec Remittances
Projects | | Links: Visit site
An Angular landing site for CopecPay that lets users simulate international transfers and funnels them to download the Copec mobile app.
Copec Remittances is the public-facing web product for the international money transfer feature of App Copec, one of Chile’s largest consumer platforms. The site lets users simulate a transfer — select a destination country, see live exchange rates, and compare payment modalities — then directs them to download the Copec mobile app to actually send the money. The transfer itself happens entirely in the app. I worked as tech lead alongside one other developer to design and build this Angular site, while Copec’s own engineering team owned and operated the backend.
Context and problem
Copec has millions of customers and a well-established digital ecosystem through CopecPay. Adding international transfers meant building a product that had to meet the reliability and security expectations of one of the country’s most recognized brands — and integrating with a backend architecture that was already mature and had strict requirements for how external clients could connect to it.
The web app needed to handle a high-traffic, public-facing use case: a live exchange rate simulator that shows real rates, supported countries, delivery times, and transfer modalities — and converts that interest into app downloads. The actual transfer happens in the Copec mobile app; the site’s job is to be trustworthy, fast, and clear enough that users make it that far.
How it works
The app is an Angular SPA that uses prerendering to serve static HTML on first load. This was important for a public-facing corporate site: prerendered pages load instantly, are indexable by search engines without needing JavaScript to execute, and reduce the time-to-interactive for first-time visitors arriving from search or social. Once the app hydrates in the browser, it behaves as a standard SPA with dynamic data fetched from the backend.
Users land on the site, interact with a live simulator — selecting a destination country, seeing the converted amount at current exchange rates, and comparing modalities like bank account deposit or cash pickup — and are then directed to download the Copec app to complete the transfer. The combination of prerendering and dynamic hydration meant the static shell was always fast, while the live data came in cleanly once the app was active.
Challenges
Building for a high-traffic corporate platform. Copec isn’t a startup. The site would be accessed by thousands of users who already trusted the brand, which meant there was no tolerance for visible bugs, inconsistent states, or unreliable flows. Performance and correctness were non-negotiable from the start.
Integrating with a security-hardened backend. Copec’s backend had a robust security layer that required careful coordination between our team and theirs. API contracts were defined and reviewed by the backend team, and any integration issue had to go through a structured communication process. Managing that relationship — aligning timelines, clarifying contracts, and handling changes from the backend side — was a significant part of the work that didn’t show up in the code.
Bringing a developer up to speed on Angular. The other developer on the project had strong general development skills but hadn’t worked in Angular before. Part of my role as tech lead was teaching Angular concepts in parallel with active development — component architecture, services, reactive forms, HTTP client patterns — while keeping the project moving. That balance between mentoring and delivery shaped how I organized the work throughout the project.
Key decisions and trade-offs
Early on, I established clear ownership boundaries: we were responsible for the frontend experience and the integration layer, and Copec’s team was responsible for the backend contract. That separation helped us avoid scope creep and gave both sides clarity about where decisions lived.
For the integration work, I pushed for a well-defined API contract before writing any of the dependent UI. This slowed the start but made the integration phase more predictable and less prone to rework.
| Decision | Trade-off |
|---|---|
| Angular SPA with prerendering | Fast initial load and SEO without giving up client-side interactivity; requires careful handling of hydration and avoiding browser-only APIs in prerendered code |
| API contract agreed before integration development | Fewer integration surprises, but required upfront coordination time with Copec’s team |
| Structured client communication process | Kept the integration predictable and professionally managed, but added process overhead to every cross-team change |
| Mentoring the developer in parallel with delivery | Built long-term team capability, at the cost of some velocity in the first weeks |
What I learned
Working inside another company’s infrastructure is different from building a standalone product. The technical challenge is real, but managing the external dependency — respecting the security model, communicating across teams, and keeping the integration stable when the backend can change without your control — is where most of the risk actually lives.
I also learned more about mentoring through delivery rather than aside from it. Teaching Angular to someone actively building the product meant explaining concepts at exactly the moment they were relevant, which turned out to be more effective than any upfront training would have been.
Tech stack
- Angular SPA with prerendering (Angular Prerender) for fast load times and SEO
- Copec’s backend API (managed externally) for transactions, exchange rates, and user authentication
- CopecPay infrastructure for account management and payment execution
Closing reflection
Copec Remittances was the kind of project where the technical work was well-defined but the organizational constraints made it complex. Coordinating with a large company’s backend team, building a product to their brand standards, and growing a developer on the team at the same time — that combination is where the real challenge was. The final site worked, held up under real traffic, and became the public entry point for tens of thousands of users discovering Copec’s remittances product.
