Stop Hard-Coding: A Case for Config-Driven UIs in Startups

In early-stage startups, the pressure to ship is immense. The temptation is always to hard-code the feature, ship it, and worry about the mess later.

But "later" usually means "never," and technical debt kills velocity.

The Factory Pattern

In our recent work on Atlantis, we faced a challenge: We needed to render completely different UI layouts based on the type of research data the AI discovered (e.g., a Financial Report looks different than a News Article).

Instead of a massive chain of if-else statements inside our components, we adopted a Config-Driven Architecture.

We treat our UI as a render engine. The backend sends not just data, but the shape of the data. Our frontend uses a Factory Pattern to dynamically select the correct component strategy.

// A simplified example of our Factory Pattern
const ComponentFactory = ({ type, data }) => {
  const strategies = {
    'financial_report': FinancialCard,
    'news_article': NewsGrid,
    'market_signal': SignalRow
  };
  
  const SelectedComponent = strategies[type] || DefaultCard;
  return <SelectedComponent {...data} />;
};

This approach allowed us to add new data types without touching the core rendering logic. It slowed us down for day one, but sped us up by 10x for week two.