Headless CMS React Integration 🚀

This project demonstrates how to integrate a Headless CMS (e.g., Contentstack, Strapi, Sanity, or Contentful) with a React frontend to deliver dynamic, API-driven content.

🔹 Features

✅ Fetch and render content dynamically from a Headless CMS
✅ Optimized API calls with caching & lazy loading
✅ Custom React hooks for content retrieval
✅ SEO-friendly rendering & metadata management
✅ Modular and scalable architecture

---

📦 Installation

1. Clone the repository:

   git clone https://github.com/gregory-dushan/headlesscms-react-integration.git
   cd headlesscms-react-integration

2. Install dependencies:

   npm install
   # or
   yarn install

3. Set up environment variables:
   Create a .env file in the root directory and add your CMS API keys:

   REACT_APP_CMS_API_URL=your_cms_api_url
   REACT_APP_CMS_ACCESS_TOKEN=your_cms_access_token

---

🚀 Running the Project

Development Mode

npm run dev
# or
yarn dev

The app will be available at http://localhost:3000.

Production Build

npm run build
# or
yarn build

This generates a static build in the build/ directory.

---

🛠 Project Structure

📂 src/
 ┣ 📂 components/        # Reusable UI components
 ┣ 📂 hooks/             # Custom React hooks for fetching CMS data
 ┣ 📂 pages/             # Page components
 ┣ 📂 libs/              # API service functions
 ┣ 📂 types/             # Type definition
 ┣ 📜 App.js             # Main React component
 ┗ 📜 index.js           # React DOM entry point

---

🔗 API Integration

To fetch data from your Headless CMS, this project uses custom React hooks.

Example: Fetching CMS content inside a component:

import { useEffect, useState } from "react";

const useFetchCMSData = (endpoint) => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    fetch(`${process.env.REACT_APP_CMS_API_URL}/${endpoint}`, {
      headers: {
        Authorization: `Bearer ${process.env.REACT_APP_CMS_ACCESS_TOKEN}`,
      },
    })
      .then((res) => res.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      })
      .catch((error) => console.error("Error fetching CMS data:", error));
  }, [endpoint]);

  return { data, loading };
};

export default useFetchCMSData;

---

📝 Roadmap

• Add GraphQL support for Contentful
• Implement SSR support with Next.js
• Improve caching strategy

---

🤝 Contributing

1. Fork the repo
2. Create a new branch (git checkout -b feature-branch)
3. Commit your changes (git commit -m "Add new feature")
4. Push to your branch (git push origin feature-branch)
5. Open a Pull Request

---

📜 License

This project is licensed under the MIT License.