Headless CMS - React

Prerequisite: Basic React (components, props, state) + JavaScript (ES6)

What you'll learn

• Understand the difference between traditional CMS and headless CMS
• Learn decoupled architecture (frontend + backend separation)
• Set up and use Strapi locally
• Explore cloud CMS using Contentful
• Design structured content models for real-world applications
• Work with REST APIs for content delivery
• Manage relationships between data (one-to-many, many-to-many)
• Handle media (images, files) in CMS
• Build scalable, API-driven content systems

This course includes:

• 1 Headless CMS Mini Project
• 12–16 Hours Live Classes
• Online / Onsite (Physical)
• API Testing & CMS Setup Guides
• Content Modeling Templates
• Certificate of Completion

Course Content

Headless CMS Concepts

• Traditional CMS vs Headless CMS
• Decoupled Architecture Explained
• Benefits:

• Omnichannel delivery
• Scalability
• Frontend flexibility (React, mobile apps)
  • Overview of:
• Strapi (Self-hosted)
• Contentful (Cloud-based)

Setting Up Strapi (Local CMS)

• Installing Strapi (Node.js required)
• Creating Admin User
• Navigating Admin Dashboard
• Creating First Content Type:

• Blog Post
• Fields: title, body, author, date
  • Managing Content Entries
  • Understanding API Endpoints:
• /api/posts

Content Modeling Deep Dive

• Designing Content Structures
• Relationships:

• One-to-Many
• Many-to-Many
  • Media Fields:
• Images
• Files
  • Components & Reusable Blocks
  • Dynamic Zones (Flexible Content Areas)
  • Populating and Managing Data
  • Accessing Data via REST API

Contentful (Cloud CMS Alternative)

• Setting up Contentful Account
• Creating Spaces & Content Models
• Using:

• Content Delivery API
• Preview API
  • Managing Content in Cloud
  • Comparing Strapi vs Contentful:
• Hosting
• Flexibility
• Pricing
• Use Cases

Mini Project (Real-World Practice)

Project: Portfolio Content System

Features:

• Content Types:

• Projects
• Skills
• Testimonials
  • Relationships between content
  • Media (images for projects)
  • API-based content delivery
  • CMS-managed dynamic content

Requirements

• Basic knowledge of JavaScript (ES6)
• Understanding of React fundamentals
• Node.js installed on computer

Description

This module introduces modern Headless CMS architecture, where the backend (content management) is separated from the frontend (React apps, mobile apps, etc.).

Students will learn how to structure data professionally and deliver content via APIs, preparing them for modern web development workflows.

Why Choose This Course?

• Modern Industry Approach (Headless CMS)
• API-Driven Development Skills
• Scalable Content Systems
• Works with React & Mobile Apps
• High Demand in Freelancing & Startups

Activities During Class

• Setting up Strapi locally
• Creating content types and relationships
• Managing CMS data
• Testing APIs using browser/Postman
• Designing content models

Who Is This Course For?

• React developers moving into backend/content systems
• Web developers building modern applications
• Freelancers working with dynamic content

Course Highlights

• Headless CMS Concepts
• Strapi Setup
• Content Modeling
• API Usage
• Mini Project