Overview
Skylead is a LinkedIn automation SaaS used by sales teams to run personalised outreach campaigns at scale. As a medior frontend developer, the work centred on three significant refactoring initiatives: a build pipeline overhaul, a full theme system rebuild, and React Flow algorithm development for the campaign editor.
The Problem
Skylead offered white-labeled instances for multiple clients, each requiring its own branded build. As the product grew, the pipeline compiled separate bundles per client - a process that ballooned to hours and grew with every new customer. The app also lacked a dark theme, and the campaign flow editor built on React Flow was producing cluttered, unreadable layouts as users created increasingly complex automation sequences.
What I Built
Three focused refactoring initiatives delivered measurable improvements. The build system was redesigned to compile once and inject per client brand colours as CSS custom properties at runtime, eliminating per client compilation entirely. The entire app theme was rebuilt using HSL based CSS variables, enabling mathematically consistent dark and light modes from a single token system. A set of layout algorithms was written to auto arrange React Flow campaign nodes, producing clean, readable graphs regardless of sequence complexity.
Tech Stack
- Frontend: React, Redux, TypeScript
- Styling: CSS Custom Properties, HSL colour variables, dark/light theming
Key Features
- Single build whitelabeling - one compiled bundle serves all clients; brand colours are injected as CSS variables at load time, cutting build time from hours to minutes
- HSL based dark theme - full dark mode built on HSL colour tokens that maintain perceptual consistency across tints and shades without doubling stylesheet maintenance
- React Flow campaign optimiser - layout algorithm that automatically arranges campaign step nodes for readability across arbitrarily complex sequences
Results & Impact
Whitelabel build time dropped from several hours to minutes by moving brand configuration from compile time to runtime CSS injection. The HSL theme system enabled the team to ship a fully consistent dark mode without parallel stylesheets. The React Flow optimiser made large, branching campaign sequences manageable in the visual editor.