https://github.com/twicpics/react-native-commercetools-contentful-demo
A demo using React Native, Commercetools, and Contentful
https://github.com/twicpics/react-native-commercetools-contentful-demo
Last synced: 22 days ago
JSON representation
A demo using React Native, Commercetools, and Contentful
- Host: GitHub
- URL: https://github.com/twicpics/react-native-commercetools-contentful-demo
- Owner: TwicPics
- Created: 2022-09-26T11:01:29.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-11-15T10:52:21.000Z (over 2 years ago)
- Last Synced: 2025-04-15T03:07:43.851Z (22 days ago)
- Language: JavaScript
- Homepage: react-native-commercetools-contentful-demo-q8jm.vercel.app
- Size: 702 KB
- Stars: 4
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# React Native, Commercetools, and Contentful demo
## 📦 Stack
This demo project uses:
- [React Native](https://reactnative.dev/) and [React Native for Web](https://necolas.github.io/react-native-web/) to build the app
- [Commercetools](https://commercetools.com/) to manage products
- [Contentful](https://www.contentful.com/) to manage blog posts
- [TwicPics Components](https://github.com/TwicPics/components) to optimize images on-demand
- [Expo](https://expo.dev/) to manage the development server
## 🧑‍💻 Development setup
This project runs on Node 16.15.0. We recommend using [NVM](https://github.com/nvm-sh/nvm) to easily switch Node versions.
Installation:
```sh
yarn
```
Running in local:
```sh
# Run for web
yarn web
```
Copy `.env.example` as `.env` and update the values using your credentials from TwicPics, Commercetools, and Contentful.
> Complete the steps in the “Configuration & Data seeding” section to get the environment values needed to make the run the app in local.
## ⚙️ Configuration & Data seeding
To make this demo work, go through the following steps. You will need to go through some configuration.
### Commercetools
This project uses Commercetools' [SUNRISE sample data](https://docs.commercetools.com/sdk/sunrise-data). Follow the tutorial to seed the data.
> You'll get all the `CTP_*` env variables when creating an API client. Credentials will only be shown once.
### Contentful
Create a `blogPost` content type that has the following fields: `title` (text), `coverImage` (image), and `excerpt` (text). Then, create some blog posts.
> Create content delivery token to get the `CONTENTFUL_ACCESS_TOKEN`. Your `CONTENTFUL_SPACE_ID` can be found in the back-office URL.
### TwicPics
- Create a path mapping your Commercetools images storage, eg. `https://s3-eu-west-1.amazonaws.com/commercetools-maximilian/`
- Create a path mapping your Contentful images storage, eg. `https://images.ctfassets.net//`
> In the code, you can see how URLs retrieved from both APIs are mapped to TwicPics CDN here: [for Commercetools](https://github.com/TwicPics/react-native-commercetools-contentful-demo/blob/62b16ab3292b8f769d20ca74323a94c3cf36cdfc/components/ProductList.jsx#L25-L30) and [for Contentful](https://github.com/TwicPics/react-native-commercetools-contentful-demo/blob/62b16ab3292b8f769d20ca74323a94c3cf36cdfc/components/BlogPostList.jsx#L27-L32).