2026 · case study
KnowledgeNexus
A help centre that stays fast and findable as the article count grows.
01 Overview
React and Tailwind help-centre UI. A small set of reusable primitives — Card, Modal, Sidebar, Form — renders a data-driven article catalogue with search and sidebar navigation.
02 The problem
Documentation sites tend to start clean and rot fast — every new article is a new bespoke page, and the layout drifts.
03 What I built
A component system, not a pile of pages. Six reusable primitives (Button, Card, Form, Header, Modal, Sidebar) compose every screen, and articles live in a single data file so adding content never touches layout code.
04 Key features
Reusable primitive components across the whole UI Data-driven article catalogue (articles.js) Search over article content Persistent sidebar navigation Modal detail view Custom hooks and shared layouts Responsive from phone to desktop
05 Technologies
- React
- JavaScript
- Tailwind CSS
- Responsive design
- State & data flow
- Accessibility
06 Engineering decisions
Content as data
Articles are a typed array, not JSX. The catalogue, search and detail views all read the same source, so the site scales by editing one file.
Layout / page / component split
layouts hold the shell, pages compose sections, components stay generic. Nothing reaches across that boundary, which keeps each piece swappable.
07 What I took from it
- A documentation site lives or dies by its information architecture, not its styling.
- Six good primitives beat sixty one-off components.