This post is going to use a similar instance of the HarperDB database that we built using the REST API approach with Node.js in our previous post. Please take a look at the post on how to set up the cloud instance here. This way you will have a populated table of data fields.

‍

1. Create a new React app with npx create-react-app harperdb-integration-react and install use-harperdb@0.1.2.
2. Start the development server with yarn start.
3. Create a custom user role "client_user" with restricted permissions in HarperDB Cloud instance.
4. Add a new user with the "client_user" role in HarperDB Cloud instance.
5. Import HarperDBProvider in src/index.js and wrap the App component, providing HarperDB instance details via environmental variables.
6. Use the useHarperDB hook in App.js to fetch data from HarperDB instance.
7. Display loading and error messages while fetching data.
8. Map over the fetched data and display it in a table format.
9. Optionally, fetch additional data like the total number of outlets and display it in the app.

‍