Knowledge Base – Strapi 5 + TanStack Start

A simple content-driven knowledge base built with Strapi 5 as CMS and TanStack Start as the frontend framework.

This project demonstrates how to model and fetch data from Strapi, render it statically through TanStack route loaders, and display rich text content in React.

---

Learning Goals

• Model Article and Category in Strapi
• Fetch Strapi data in TanStack route loaders (no client fetch)
• Create dynamic pages:
  • /articles → List of all articles
  • /articles/$slug → Single article page
• Render Strapi Rich Text content in React

---

Tech Stack

Layer	Technology
CMS	Strapi 5
Frontend	TanStack Start
Styling	Tailwind CSS + Typography plugin
Rich Text Renderer	@strapi/blocks-react-renderer

---

This repository contains two independent sub-projects:

• knowledge-cms — Strapi backend (content models, API, admin)
• knowledge-hub — TanStack Start frontend (React, route loaders, static rendering)

---

Quick start

Prerequisites

• Node.js 18 — 22 (the Strapi package.json requires Node >=18)
• npm (or yarn/pnpm)

Open two terminals (one for backend, one for frontend). In PowerShell you can run the following commands.

Backend (Strapi)

cd knowledge-cms
npm install
npm run develop

Frontend (TanStack Start)

cd knowledge-hub
npm install
npm run dev

Then open the frontend at http://localhost:3000 and the Strapi admin at http://localhost:1337/admin