Using Contentful and React.js to Build Modular Web Pages

In this presentation, we go over how we use Contentful (a headless content management system) together with our very own React components library to empower our marketing teams to create entire web pages very quickly from scratch.

Transcript

1. A story of how Contentful + React makes Segment very happy
4. Public Site https://www.segment.com
6. Our Goal Separate design and content from the site so that each part can be managed independently of each other CONTENT SITE DESIGN
8. Overview Data from contentful is transformed into a page composed of React Components
9. Interpret Evaluate
10. Content Model From Contentful Component From Marketing Components
11. 2.Contentful 3.React 4.Module 1.Contentful
12. = = Hero Module
13. Independently functional and responsive modules!
14. Hero Module Call To Action Module Gallery Module = ? + +
15. Use Case #1 New Pages Brand new pages can be build in minutes, with consistent seo tags, accessibility
16. Use Case #2 Navigation Controlled using Navigation content model in Contentful, based on JSON.
17. Use Case #3 Prototyping and Testing Varied prototypes built within minutes, ready for testing
18. New Pages Content Navigation Layout Prototypes User Testing Key Take-Aways Contentful can be used for more than just content curation!
19. Opportunities for Improvement 1:1 mapping of Contentful content models to React components is fragile Use Contentful’s content management SDK to automate Content Type + Component creation.
20. + Marketing/Business
21. + Developers
22. Everyone +