Wikantik Reader UI - Implementation Plan

A modern, Medium-inspired reading experience built with React.

Overview

Build a standalone React SPA that consumes Wikantik's existing REST API, providing a modern reading experience while the traditional JSP templates handle editing/administration.

Architecture

Core Concept

• Standalone React SPA
• Consumes Wikantik REST API (/api/)
• Clean separation of concerns between presentation and storage.

Technology Stack

Layer	Choice	Rationale
Framework	React 18	Industry standard, large ecosystem
Build	Vite	Fast HMR, modern defaults
Language	TypeScript	Type safety, better DX
State	Zustand	Lightweight, simple API
Data Fetching	TanStack Query	Caching, background refetch
Styling	Vanilla CSS	No runtime cost, maximum flexibility

---

Component Design

Header (responsive)

• Transparent initially, solid on scroll.
• Hides when scrolling down, reveals on scroll up.
• Progress bar along bottom edge.

Article Header

• Title (h1) and Subtitle.
• Metadata: Author, Reading Time, and Update Date.
• Full-width Hero Image.

---

Wiki Content Processing

To bridge the gap between static HTML and a dynamic React app, the parser must:

1. Transform Links: Convert standard wiki links to React Router internal links.
2. Lazy Load: Automatically add loading="lazy" to all images.
3. Horizontal Scroll: Wrap tables in a scrollable div container for mobile responsiveness.

---

See Also:

• REST API Reference
• McpIntegration — For the agent-grade tool layer.