Modular Pages!!!

This demo showcases the use of the headless CMS Contentful to create modular pages. Contentful content models are mapped to React components, so that the CMS has control over which components are being rendered on a page.

Show Content Models

Step 1

Define content models in contentful. These models are all the data needed to render the individual "building blocks" that can make up a page. Another way to think of this content is the props that get passed to the React components that make up the sections of a page.

Step 2

Build the React components for your pages. Ideally the components are built in a flexible, modular way, so that any component can sit on top of any other and still look good.

Step 3

After querying the page data from contentful, the frontend code will look at the type of content models (e.g. "Hero") used on the page and render the matching React components.