Kiddo SDUI Assignment

Overview

This project is a Server-Driven UI (SDUI) homepage renderer built using React Native, TypeScript, FlashList, and Zustand.

The goal of this assignment was to simulate the architecture used by modern quick-commerce applications where the homepage is completely controlled by backend-delivered JSON payloads without requiring new App Store or Play Store releases.

The application dynamically parses a JSON layout payload, resolves component types through a registry pattern, injects campaign themes at runtime, handles actions through a centralized dispatcher, and optimizes rendering performance using virtualization and isolated state subscriptions.

---

Tech Stack

Framework

• React Native (Expo)

Language

• TypeScript (Strict Mode)

List Rendering

• @shopify/flash-list

State Management

• Zustand

Architecture

• Server Driven UI (SDUI)
• Component Registry Pattern
• Runtime Theme Injection
• Campaign Engine

Reliability

• Runtime Payload Validation
• Error Boundaries
• Unknown Component Resilience

---

Features

Dynamic JSON-Driven Rendering

The homepage is generated entirely from a JSON payload.

Example:

{
  "id": "hero-1",
  "type": "BANNER_HERO"
}

The renderer dynamically resolves the component through a registry and renders the corresponding UI.

---

Component Registry (Factory Pattern)

The application avoids switch statements and uses a scalable registry pattern.

JSON Payload
      ↓
BlockRenderer
      ↓
Component Registry
      ↓
React Component

Benefits:

• Easily extensible
• Open/Closed Principle
• Runtime component resolution
• Simplified onboarding for new block types

---

Unknown Component Resilience

Unsupported components are safely ignored.

Example:

{
  "type": "NEW_COMPONENT_V2"
}

The renderer logs the issue and skips rendering without crashing the application.

---

Dynamic Collections

Supports horizontally scrollable collections rendered inside a vertically virtualized feed.

Examples:

• Summer Essentials
• Snacks Under ₹99
• Back To School

---

Universal Action Dispatcher

All user interactions flow through a centralized dispatcher.

Supported Actions:

• ADD_TO_CART
• DEEP_LINK
• APPLY_MYSTERY_GIFT_COUPON

Architecture:

UI Component
      ↓
handleAction()
      ↓
Business Logic
      ↓
State Update

This keeps presentation components completely decoupled from business logic.

---

OTA Runtime Theming

Themes are injected dynamically without application updates.

Example:

{
  "primary": "#FF9933",
  "background": "#FFF5E6"
}

Theme updates automatically propagate throughout the application using React Context.

---

Campaign Engine

Supports dynamic campaign activation.

Implemented Campaigns:

• Back To School
• Summer Playhouse
• Mystery Gift Carnival

Campaigns can:

• Inject custom themes
• Add campaign-specific blocks
• Configure overlays
• Modify homepage content at runtime

---

Cart State Management

Implemented using Zustand.

Benefits:

• Lightweight
• External state store
• Fine-grained subscriptions
• No unnecessary global rerenders

---

Render Isolation Strategy

One of the core requirements was ensuring that cart updates do not rerender unrelated UI blocks.

Implemented using:

• Zustand selectors
• React.memo
• Stable component boundaries

Example:

ADD_TO_CART
      ↓
Cart Store Update
      ↓
Only ProductCard A rerenders
      ↓
CartCounter rerenders

The following components remain unaffected:

• HomeScreen
• FlashList
• ProductGrid2x2
• DynamicCollection
• Other ProductCards

---

Runtime Payload Validation

The renderer validates incoming payloads before rendering.

Validation Examples:

• Missing product arrays
• Invalid block structures
• Corrupted payload fields
• Unsupported component types

Invalid payloads are skipped safely.

---

Error Boundary Architecture

Each block is wrapped inside a dedicated Error Boundary.

Benefits:

• Isolates rendering failures
• Prevents homepage-wide crashes
• Provides graceful degradation

Block Crash
     ↓
Error Boundary
     ↓
Fallback UI
     ↓
Remaining Homepage Continues

---

Architecture Diagram

JSON Payload
      ↓
Payload Validator
      ↓
Block Renderer
      ↓
Component Registry
      ↓
React Components
      ↓
FlashList

---

State Management Flow

ProductCard
      ↓
Action Dispatcher
      ↓
Zustand Store
      ↓
Subscribers
      ↓
UI Updates

---

Campaign Flow

Campaign Store
      ↓
Active Campaign
      ↓
Theme Context
      ↓
Campaign Blocks
      ↓
Overlay Controller

---

Performance Optimizations

FlashList Virtualization

• Efficient rendering
• Cell recycling
• Large feed support

React.memo

Applied across layout blocks to prevent unnecessary rerenders.

Zustand Selectors

Components subscribe only to the state they need.

Stable Keys

keyExtractor={(item) => item.id}

Ensures predictable list behavior.

---

Project Structure

src
│
├── components
├── context
├── dispatcher
├── mock
├── registry
├── renderer
├── screens
├── store
├── types
└── utils

---

Running Locally

Install dependencies:

npm install

Start Expo:

npm start

Start Web:

npm run web

---

Future Improvements

• Remote API integration
• Lottie campaign overlays
• Remote configuration service
• Asset caching layer
• Analytics instrumentation
• Sentry integration
• A/B testing support

---

Author

Naval Chandra Mishra

B.Tech CSE, IIIT Agartala

GitHub: navalmishra (Naval Chandra Mishra)