https://github.com/pktcodes/contentful-cms-react-project-v2

Contentful CMS Project using React
https://github.com/pktcodes/contentful-cms-react-project-v2

content-management-system contentful css custom-hooks dotenv ecmascript environment-variables headless-cms html javascript john-smilga react sdk undraw vite webhooks

Last synced: 25 days ago
JSON representation

Contentful CMS Project using React

• Host: GitHub
• URL: https://github.com/pktcodes/contentful-cms-react-project-v2
• Owner: pktcodes
• Created: 2023-10-15T05:12:40.000Z (about 1 year ago)
• Default Branch: master
• Last Pushed: 2023-10-16T23:05:52.000Z (about 1 year ago)
• Last Synced: 2024-10-15T02:41:30.268Z (2 months ago)
• Topics: content-management-system, contentful, css, custom-hooks, dotenv, ecmascript, environment-variables, headless-cms, html, javascript, john-smilga, react, sdk, undraw, vite, webhooks
• Language: CSS
• Homepage: https://react-contentful-cms-v2-prod.netlify.app/
• Size: 652 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Contentful CMS 🗃️

> PROD [Live] : https://react-contentful-cms-v2-prod.netlify.app/

#### Contentful CMS consists of a straightforward user interface where there is a

- List of sections i.e. **Hero**, **Projects**.

- **Hero** consists of `Logo`, `Info` about the project. 

   - On `screens <992px`, the Hero will not have *logo*.

- **Projects** will have a list of cards where each card represents a link to the project with an `Image`, `Title` which upon click navigates the user to a specific project page.

- **`Loading...`** will be shown while fetching the projects, **`There was an error`** if any error has occurred.

- Data is handled by the headless CMS **`Contentful`** SDK and styles are handled by **`index.css`**

- To run the project locally, clone the repo, `npm install` to install the dependencies, and `npm run dev` to start up the development server on default port 5173.

#### Languages 

HTML, CSS, JavaScript, ECMAScript, React ~ Hooks ~ useState, useEffect

#### Packages

[Contentful](https://www.npmjs.com/package/contentful)

#### Deployment / Hosting

Netlify

## Notes

#### Nice Images

[Undraw](https://undraw.co/)

#### Headless CMS

A headless CMS is a back-end only content management system that provides content creators with an intuitive interface for creating and managing content while leaving the front-end presentation layer to be handled by a separate system or platform. This approach allows for greater flexibility and scalability, as the content can be easily distributed to multiple channels and devices, without being limited by the constraints of a particular front-end system.

---

_Note: I have developed this project ~ [18] as part of React 18 Tutorial and Projects Course (2023) taught by John Smilga._