Datagran
Led the front-end modernization of an AI martech platform, cutting bugs by 30% while moving the product from jQuery to a scalable React and TypeScript architecture.
Role
Front-End Lead
Timeline
Dec 1, 2018 - Jan 1, 2020
Duration
1 yr 2 mo
Stack
29 technologies
Project snapshot
Datagran · Front-End Lead
Why this shape
Architecture, delivery leadership, and product quality under real constraints.
Work notes
A closer look at the delivery decisions, technical tradeoffs, and product constraints behind this work.
Problem
The product could not pause for a rewrite — a jQuery-heavy martech surface had to keep shipping while engineering raised quality and velocity.
Approach
Gradual migration to React and TypeScript with shared components, testing discipline, and tight collaboration with backend and data teams on complex dashboards.
Outcome
A more maintainable UI layer that supported campaign tooling, reporting, and ML-driven workflows without blocking roadmap delivery.
Metrics
Roughly 30% fewer defects after typed components and clearer boundaries; sustained delivery for brands such as Rappi, Subway, and Telefonica on the platform.
Modernizing Datagran’s front-end architecture
At Datagran, I led the front-end modernization of an AI-powered martech platform used by brands such as Rappi, Subway, and Telefonica. The core challenge was evolving a jQuery-heavy product into a React and TypeScript system that the team could extend without slowing delivery.
⚠️ Core challenge
Datagran could not pause product work just because the front-end needed a better foundation. The migration had to happen while dashboards, campaign tools, and customer-facing workflows kept moving, which meant improving architecture without introducing delivery drag.
🎯 What I led
- A gradual migration from jQuery to React and TypeScript, keeping product work moving while replacing fragile legacy patterns with a more maintainable component architecture.
- Reusable UI foundations, including shared components, cleaner front-end conventions, and styling patterns that made future features easier to ship.
- Data-heavy dashboards and visualizations built with
D3.jsandHighchartsfor campaign analysis, reporting, and ML-driven marketing workflows. - Cross-functional collaboration with backend and data teams so the interface could keep pace with the complexity of the platform underneath it.
📈 Key outcomes
- 30% fewer bugs after introducing typed components, modular front-end boundaries, and better UI consistency.
- A more scalable product surface through reusable component patterns and shared front-end structure.
- More useful analytics experiences by building dashboards that turned complex campaign and customer data into clearer day-to-day workflows.
🧠 Product context
Datagran sat at the intersection of marketing automation, data unification, and machine-learning-driven optimization. That meant the front-end work was not just about polish. It had to translate complicated business logic, campaign performance data, and automation flows into interfaces that real teams could trust and move through quickly.
🛠️ Tech stack
- Frontend:
React.js,TypeScript,Redux,Redux Sagas,Styled Components,React Router - Visualization and forms:
D3.js,Highcharts,Formik,Yup - Quality and delivery:
Jest,Cypress,ESLint,Storybook,Sentry,CI/CD
🤝 Why it mattered
Datagran was one of the first places where I had to think beyond feature work and focus on system health. It sharpened how I approach migrations, dashboard-heavy interfaces, and front-end leadership inside a fast-moving product team.
