{"id":25287405,"url":"https://github.com/arnobt78/Contentful-CMS--React-FullStack-Fundamental-Project-18","last_synced_at":"2025-10-27T21:30:33.709Z","repository":{"id":277025688,"uuid":"931078619","full_name":"arnobt78/Contentful-CMS--React-Fundamental-Project-17","owner":"arnobt78","description":"This project demonstrates the integration of Contentful CMS with a React application. It includes a Hero section and a Projects section that fetches and displays data from Contentful.","archived":false,"fork":false,"pushed_at":"2025-02-11T17:51:41.000Z","size":974,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-11T18:46:11.372Z","etag":null,"topics":["axios-react","cms","cms-framework","contentful","contentful-api","contentful-app","contentful-cms","contentful-js-sdk","netlify-deployment","react","react-fundamentals","react-query","react-query-tutorial","reactjs","undraw","undraw-illustrations","webhooks"],"latest_commit_sha":null,"homepage":"https://contentful-cms-arnob.netlify.app/","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/arnobt78.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2025-02-11T17:24:12.000Z","updated_at":"2025-02-11T18:02:20.000Z","dependencies_parsed_at":"2025-02-11T18:56:13.541Z","dependency_job_id":null,"html_url":"https://github.com/arnobt78/Contentful-CMS--React-Fundamental-Project-17","commit_stats":null,"previous_names":["arnobt78/contentful-cms--react-fundamental-project-17"],"tags_count":0,"template":true,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FContentful-CMS--React-Fundamental-Project-17","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FContentful-CMS--React-Fundamental-Project-17/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FContentful-CMS--React-Fundamental-Project-17/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/arnobt78%2FContentful-CMS--React-Fundamental-Project-17/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/arnobt78","download_url":"https://codeload.github.com/arnobt78/Contentful-CMS--React-Fundamental-Project-17/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238558437,"owners_count":19492190,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["axios-react","cms","cms-framework","contentful","contentful-api","contentful-app","contentful-cms","contentful-js-sdk","netlify-deployment","react","react-fundamentals","react-query","react-query-tutorial","reactjs","undraw","undraw-illustrations","webhooks"],"created_at":"2025-02-12T22:24:44.059Z","updated_at":"2025-10-27T21:30:33.701Z","avatar_url":"https://github.com/arnobt78.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Contentful CMS - React Fundamental Project\n\n\u003cimg width=\"1050\" alt=\"Screenshot 2025-02-11 at 23 33 55\" src=\"https://github.com/user-attachments/assets/275091bb-aaf4-40e4-82a3-c16514273c54\" /\u003e \u003cimg width=\"1050\" alt=\"Screenshot 2025-02-11 at 23 34 11\" src=\"https://github.com/user-attachments/assets/5b54a0d5-1b21-4b52-9244-d6246e19bc74\" /\u003e\n\n---\n\n## Project Summary\n\nContentful CMS - React Fundamental Project is a hands-on learning application integrating the Contentful headless CMS with a modern React frontend. This project demonstrates fetching and displaying dynamic content (such as projects) from Contentful using a custom React hook, and showcases best practices in component structure, API integration, and environment variable management.\n\n- **Live-Demo:** https://contentful-cms-arnob.netlify.app/\n\n---\n\n## Table of Contents\n\n- [Project Summary](#project-summary)\n- [Features](#features)\n- [Technology Stack](#technology-stack)\n- [Project Structure](#project-structure)\n- [Installation and Setup](#installation-and-setup)\n- [Contentful Setup](#contentful-setup)\n- [Environment Variables](#environment-variables)\n- [Fetching Data \u0026 Custom Hook](#fetching-data--custom-hook)\n- [Components Overview](#components-overview)\n- [API Example](#api-example)\n- [Styling](#styling)\n- [Learning Outcomes](#learning-outcomes)\n- [Keywords](#keywords)\n- [References \u0026 Resources](#references--resources)\n- [Conclusion](#conclusion)\n\n---\n\n## Features\n\n- **Hero Section:** Eye-catching introduction with project summary and visuals.\n- **Projects Section:** Dynamic list of projects fetched from Contentful CMS.\n- **Contentful Integration:** Real-world usage of a headless CMS for content management.\n- **Custom Data Fetching Hook:** Clean separation of data logic using React hooks.\n- **Modern UI:** Responsive and visually appealing interface using SVG/PNG assets.\n- **Environment Variables:** Secure API key management using `.env` files.\n\n---\n\n## Technology Stack\n\n- **React** (Vite + JSX)\n- **Contentful** (Headless CMS)\n- **JavaScript (ES6)**\n- **CSS** (custom and/or frameworks)\n- **Node.js/NPM**\n- **Vite** (for fast development server)\n- **[contentful](https://www.npmjs.com/package/contentful)** npm package\n\n---\n\n## Project Structure\n\n```\n├── .DS_Store\n├── .gitignore\n├── Contentful.fig\n├── README.md\n├── index.html\n├── package.json\n├── package-lock.json\n├── vite.config.js\n├── public/\n├── src/\n│   ├── App.jsx\n│   ├── Hero.jsx\n│   ├── Projects.jsx\n│   ├── data.js\n│   ├── fetchProjects.jsx\n│   ├── index.css\n│   ├── main.jsx\n│   └── assets/\n```\n\n**Key files:**\n- `src/App.jsx`: Main app entry, renders Hero and Projects.\n- `src/Hero.jsx`: Hero/banner component.\n- `src/Projects.jsx`: Projects list, fetches from Contentful.\n- `src/fetchProjects.jsx`: Custom React hook for API calls.\n- `src/data.js`: Sample static data (for fallback/demo).\n- `src/index.css`: Styles.\n- `src/main.jsx`: React DOM entry point.\n\n---\n\n## Installation and Setup\n\n1. **Clone the repository:**\n    ```sh\n    git clone https://github.com/arnobt78/Contentful-CMS--React-Fundamental-Project-18.git\n    cd Contentful-CMS--React-Fundamental-Project-18\n    ```\n\n2. **Install dependencies:**\n    ```sh\n    npm install\n    ```\n\n3. **Set up environment variables** (see [Environment Variables](#environment-variables))\n   \n4. **Run the development server:**\n    ```sh\n    npm run dev\n    ```\n\n5. Visit `http://localhost:5173` (or as indicated in terminal).\n\n---\n\n## Contentful Setup\n\n1. **Sign up / log in to [Contentful](https://www.contentful.com/).**\n2. **Create a new Space.**\n3. **Add a Content Type** named `cmsReactProject` (or `projects`):\n    - Fields: `title` (Text), `url` (Text), `image` (Media)\n4. **Add entries** to the Content Type with your project data.\n5. **API Access:**\n    - Go to Settings \u003e API keys.\n    - Get your **Space ID** and **Content Delivery API - access token**.\n\n---\n\n## Environment Variables\n\n1. **Create a `.env` file in the root:**\n    ```\n    VITE_API_KEY=your_contentful_access_token\n    ```\n\n*Do NOT commit your real API key to version control!*\n\n---\n\n## Fetching Data \u0026 Custom Hook\n\nThe data fetching logic is encapsulated in a custom React hook located at `src/fetchProjects.jsx`. It handles loading states, error handling, and parsing of Contentful API responses.\n\n### Example: `fetchProjects.jsx`\n```jsx\nimport { useEffect, useState } from \"react\";\nimport { createClient } from \"contentful\";\n\nconst client = createClient({\n  space: \"your_space_id\",\n  environment: \"master\",\n  accessToken: import.meta.env.VITE_API_KEY,\n});\n\nconst useFetchProjects = () =\u003e {\n  const [loading, setLoading] = useState(true);\n  const [projects, setProjects] = useState([]);\n  \n  useEffect(() =\u003e {\n    client.getEntries({ content_type: \"cmsReactProject\" })\n      .then((response) =\u003e {\n        const items = response.items.map((item) =\u003e ({\n          id: item.sys.id,\n          title: item.fields.title,\n          url: item.fields.url,\n          image: item.fields.image?.fields?.file?.url,\n        }));\n        setProjects(items);\n        setLoading(false);\n      })\n      .catch(() =\u003e setLoading(false));\n  }, []);\n  \n  return { loading, projects };\n};\n\nexport default useFetchProjects;\n```\n\n---\n\n## Components Overview\n\n- **App.jsx:** Main component, imports Hero and Projects.\n- **Hero.jsx:** Displays project title, description, and hero image.\n- **Projects.jsx:** Uses `useFetchProjects` to fetch and render project cards.\n- **data.js:** Contains example static data (useful for fallback/demo).\n- **assets/:** Place for images and SVGs used in the UI.\n\n---\n\n## API Example\n\nExample code to fetch entries directly from Contentful:\n\n```js\nimport { createClient } from \"contentful\";\n\nconst client = createClient({\n  space: \"your_space_id\",\n  environment: \"master\", // defaults to 'master'\n  accessToken: import.meta.env.VITE_API_KEY,\n});\n\nclient\n  .getEntries({ content_type: \"cmsReactProject\" })\n  .then((response) =\u003e console.log(response.items))\n  .catch(console.error);\n```\n\n---\n\n## Styling\n\n- Styling is managed in `src/index.css`.\n- Modify or extend this file to change the UI.\n\n---\n\n## Learning Outcomes\n\n- **Understand headless CMS concepts** and benefits (content separated from presentation).\n- **Integrate Contentful with React** for dynamic, CMS-driven sites.\n- **Use React hooks** for clean data fetching and state management.\n- **Handle environment variables** securely in modern JS projects.\n- **Structure React projects** for scalability and clarity.\n- **Deploy React apps** (example: Netlify).\n\n---\n\n## Keywords\n\n`react` `contentful` `headless cms` `vite` `custom hook` `api integration` `env variables` `frontend` `projects` `javascript` `learning` `cms integration` `dynamic content`\n\n---\n\n## References \u0026 Resources\n\n- [Contentful](https://www.contentful.com/)\n- [React Documentation](https://react.dev/)\n- [Undraw](https://undraw.co/) (SVG/PNG images)\n- [Vite](https://vitejs.dev/)\n\n---\n\n## Conclusion\n\nThis project provides a practical example of integrating a headless CMS with a React frontend, suitable for both learning and as a boilerplate for real-world applications. Use this template to quickly build portfolio/project sites powered by Contentful and React.\n\nFeel free to explore, modify, and extend the code to suit your learning goals or project requirements!\n\n---\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2FContentful-CMS--React-FullStack-Fundamental-Project-18","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Farnobt78%2FContentful-CMS--React-FullStack-Fundamental-Project-18","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Farnobt78%2FContentful-CMS--React-FullStack-Fundamental-Project-18/lists"}