Link AI Data Merging Platform

  • TypeScript
  • Vue
  • Pinia
  • Vite
  • Vuetify
  • Storybook

AI-driven web application allowing upload & merging of two excel datasets

Timeline

March 2023 - November 2023

Company

One Data

Team

Cross functional team of 8

Client & Project Details

One Data, a leading software company based in Germany, is revolutionizing data management with their flagship product, One Data—an AI-powered Data Product Builder. Among their latest innovations is Link AI.

An AI-driven web application designed for seamless merging and analysis of two Excel datasets

My Role

As the lead frontend developer on this greenfield project, I spearheaded various aspects of development:

  • Evaluated frontend technologies and contributed to architectural design.
  • Actively participated in sprint planning sessions, refining user stories for optimal implementation.
  • Organized user stories into manageable tasks, facilitating smooth collaboration between frontend and backend teams.
  • Reviewed and provided feedback on merge requests from team members.
  • Implemented and delivered user stories, ensuring adherence to project timelines.
  • Presented project demos to upper management for progress updates.

Implementation Details

A new component library

  • Developed a component library based on a new Design System, utilizing design tokens exported from Figma
  • Leveraged Storybook for rapid prototyping & review cycles, for quick collaboration with designers.

Project setup

Set up the project environment with essential tools like ESLint, Prettier, and Husky for enhanced collaboration among developers.

Main product features

  • Implemented authentication functionalities such as account creation, login, and password management using AWS Cognito, along with custom email verification templates via AWS Lambda.
  • Integrated features like multi-file upload with drag-and-drop support, AI-suggested column merging, and lazy loading of rows using AG Grid for efficient data management.

Main app demo

  • Developed user settings including password management and theme customization (Light, Dark, Auto mode).

User Menu with theme preference

Making it robust

  • Defined a comprehensive testing strategy to ensure robustness and reliability.
  • Utilized Vitest for unit tests, Vue Testing Library for component tests and Playwright for end-to-end tests.

Challenges

As we kicked off development, the main challenge we encountered was that the backend required more effort and took longer to complete compared to frontend.

To make frontend development asynchronous from backend:

  • I introduced API contracts at the beginning of each sprint cycle.
  • After agreeing on the API specifications, the backend team would generate a work-in-progress OpenAPI specification.
  • Using that, I generated TS types and implemented frontend features using mock data.
  • To enable merging of frontend code asynchronously, I implemented feature flags, and hid particular features until the backend was ready.

Outcomes

Link AI was one-of-a-kind technical PoC at One Data with complete autonomy. Despite evolving requirements, the team successfully delivered the MVP ahead of schedule, while using state-of-the-art technologies, embracing cloud architecture and developing a new component library, with a focus on performance & accessibility.

Personal Achievements

  • While leading the frontend development initiatives, I encouraged seamless collaboration among team members, maintaining a steadfast focus on delivering top-tier quality.
  • I gained project management skills by breaking down large user stories into small actionable tasks.