Sample app

In order to help you get started quickly with your own application development, we are providing sample application which cover the basic GraphQL API calls to the X3 application.

In this section, you will build a simple single-page application using the GraphQL demo endpoint and the Carbon node.js library for the user interface (UI). This application will read a sales order by customer.

Before you begin

Please make sure that you have latest versions of the following tech dependencies:

• Visual Studio Code
• Node.js
• npm (Installed by default with NodeJS)
• Git Client

Create empty project by running the following commands to a location on your hard drive. This may take a few minutes:

npx create-carbon-app x3-react-graphql
cd x3-react-graphql
npm start

The result is a working empty project. Open a web browser and go to http://localhost:8080/ to see the default page:

Now, you will design then build the application step by step and after each step, you can download the project source code:

• Step 3: App component and GraphQL client
• Step 4: Menu component and Order component
• Step 5: Order history component
• Final step (complete application): Order detail component

Don’t forget to run npm install then npm start inside the unzipped folder to see the result at http://localhost:8080/.

---

Steps

• Overview
• Step 1 - Application design
• Step 2 - React components and data to retrieve from the endpoint
• Step 3 - App component and GraphQL client
• Step 4 - Menu component and Order component
• Step 5 - Order history component
• Step 6 - Order detail component