Datagran

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.js and Highcharts for 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.