Merge pull request #2 from contentstack/graphql

change data fetching to use graphql apis

.env.example

@@ -5,12 +5,13 @@
 REACT_APP_CONTENTSTACK_API_KEY=your_stack_api_key
 REACT_APP_CONTENTSTACK_DELIVERY_TOKEN=your_delivery_token
 REACT_APP_CONTENTSTACK_ENVIRONMENT=your_environment_token
+REACT_APP_CONTENTSTACK_GRAPHQL_HOST_NAME=graphql.contentstack.com
 
 # Below config options are for enabling live preview/live edit tags for the starter app
 
-REACT_APP_CONTENTSTACK_API_HOST= api.contentstack.io
 REACT_APP_CONTENTSTACK_MANAGEMENT_TOKEN= your_management_token
 REACT_APP_CONTENTSTACK_APP_HOST=app.contentstack.com
+REACT_APP_CONTENTSTACK_LIVE_PREVIEW_HOST_NAME=graphql-preview.contentstack.com
 REACT_APP_CONTENTSTACK_LIVE_PREVIEW= true
 REACT_APP_CONTENTSTACK_LIVE_EDIT_TAGS= false
 

README.md

@@ -1,32 +1,29 @@
 [![Contentstack Logo](/public/contentstack.png)](https://www.contentstack.com/)
 
-
-# Build a Starter Website with React.js and Contentstack
+# Build a Starter Website with React.js and Contentstack using GraphQL
 
 About Contentstack: Contentstack is a headless CMS with an API-first approach that puts content at the centre. It is designed to simplify the process of publication by separating code from content.
 
-About this project: React.js is a JavaScript library for dynamic websites with rich user interfaces. This guide will help you create a starter marketing website built using the React.js framework with minimal steps.
-
+About this project: React.js is a JavaScript library for dynamic websites with rich user interfaces. GraphQL is a powerful query language for your API, allowing you to request only the data you need. By incorporating GraphQL into your React.js project, you can enhance the efficiency of data retrieval and optimize the performance of your web application. This guide will help you create a starter marketing website built using the React.js framework with minimal steps.
 
 ![contentstack-react-starter-app-vercel-app](/public/starter-app.png)
 
-
 ## Live Demo
 
-You can check the [live demo](https://contentstack-react-starter-app.vercel.app/) to get first-hand experience of the website.
-
+You can check the [live demo](https://contentstack-react-graphql-starter-app.vercel.app/) to get first-hand experience of the website.
 
 ## Tutorial
 
-We have created an in-depth tutorial on how you can create a React.js starter website using Contentstack’s Node.js SDK and fetch its content from Contentstack.
-
-[Build Website using React.js and Contentstack](https://www.contentstack.com/docs/developers/sample-apps/build-a-starter-website-using-react-js-and-contentstack/)
+We have created an in-depth tutorial on how you can create a React.js with GraphQL starter website.
 
+[Build Website using React.js and Contentstack](https://www.contentstack.com/docs/developers/sample-apps/build-a-starter-website-using-reactjs-with-graphql-and-contentstack)
 
 **More Resources**
 
 Read Contentstack [docs](https://www.contentstack.com/docs/)
 
 Region support [docs](https://www.contentstack.com/docs/developers/selecting-region-in-contentstack-starter-apps)
 
-Learn about [React.js](https://reactjs.org/docs/getting-started.html)
+Learn about [React.js](https://reactjs.org/docs/getting-started.html)
+
+Learn about [GraphQL](https://graphql.org/)