https://github.com/gregory-dushan/headlesscms-react-integration
This repository demonstrates how to integrate a Contentstack Headless CMS with a React frontend to deliver dynamic, API-driven content.
https://github.com/gregory-dushan/headlesscms-react-integration
apiintegration contentstack context-api headlesscms hooks nextjs react redux
Last synced: about 2 months ago
JSON representation
This repository demonstrates how to integrate a Contentstack Headless CMS with a React frontend to deliver dynamic, API-driven content.
- Host: GitHub
- URL: https://github.com/gregory-dushan/headlesscms-react-integration
- Owner: gregory-dushan
- Created: 2025-02-10T20:11:46.000Z (11 months ago)
- Default Branch: main
- Last Pushed: 2025-02-10T20:25:52.000Z (11 months ago)
- Last Synced: 2025-02-10T21:30:11.842Z (11 months ago)
- Topics: apiintegration, contentstack, context-api, headlesscms, hooks, nextjs, react, redux
- Language: TypeScript
- Homepage:
- Size: 158 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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:
```sh
git clone https://github.com/gregory-dushan/headlesscms-react-integration.git
cd headlesscms-react-integration
```
2. Install dependencies:
```sh
npm install
# or
yarn install
```
3. Set up environment variables:
Create a `.env` file in the root directory and add your CMS API keys:
```env
REACT_APP_CMS_API_URL=your_cms_api_url
REACT_APP_CMS_ACCESS_TOKEN=your_cms_access_token
```
---
## 🚀 Running the Project
### Development Mode
```sh
npm run dev
# or
yarn dev
```
The app will be available at `http://localhost:3000`.
### Production Build
```sh
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:
```jsx
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**.