How to Choose the Perfect Houseplant in Augmented Reality (AR) [Tutorial]
Tags: tutorial, programming, augmentedreality, showdev
Published: 2021-09-07 12:42:42

![1.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1631018191226/rtHyVbUiI.jpeg)

Looking to figure out what houseplant you should get? This React demo with echoAR can help! Just answer a few short questions to find a houseplant match, learn more info about it, and receive a QR code to see the plant in AR in your home! The full demo can also be found on echoAR’s [GitHub](https://github.com/echoARxyz/React-echoAR-demo-House-Plants).

## Register

Don’t have an API key? Make sure to register for FREE at [echoAR](https://www.echoar.xyz/).

## Setup

1. Clone [echoAR-Houseplant-Demo](https://github.com/samia-mnn/echoAR-Houseplant-Demo/) 
2. Download [Node and Node Package Manager(npm)](https://nodejs.org/en/)
3. [Download and set up ngrok](https://ngrok.com/download)

## Terminal

1. In the terminal, navigate to the `echoAR-Houseplant-Demo/` directory and enter `$ npm init`
2. Next, enter `$ npm install express react react-dom` to install relevant packages

## echoAR Console

1. Add each of the houseplants to your echoAR console. Use the search function and type in the plant name to find the model you would like to use for each plant.
2. These are the models we used : (Filename Author)
* Anthurium.glb thesidekick
* Chinese Money Plant.glb daniel
* Umbrella palm tree.glb Poly by Google
* ZZ Plant.glb Jack Irwin Miller
* Bonsai Tree.glb zacharyfrs
* Orchid.glb Poly by Google
* Snake Plant (Highest Resolution, Unbounded).glb legel
3. Copy the links of the QRImage links, and place them into the “findplantInfo” function in [PlantForm.jsx].
4. Once the houseplant models are added, copy the short URL generated for each model and use them to replace the `[shortUrl]` in the "findplantInfo" function [PlantForm.jsx]
5. Choose a plant to be your default and copy its QRImage link and shortURL into [index.html]

## Run

1. In terminal, enter `npm start` to serve the application on a local host. The terminal will display a port number that you can use in the next steps
2. In a separate terminal window navigate to `<path>/<to>/ngrok` and enter `http <port number>`. The terminal will list a number of urls - the important one is the url beginning with `https`
3. To view on computer or mobile device, open up web browser and enter the ngrok url.

## Learn More

Refer to our [documentation](https://docs.echoar.xyz/unity/) to learn more about how to use Unity and echoAR.

## Support

Feel free to reach out at support@echoAR.xyz or join our [support channel on Slack](https://join.slack.com/t/echoar/shared_invite/enQtNTg4NjI5NjM3OTc1LWU1M2M2MTNlNTM3NGY1YTUxYmY3ZDNjNTc3YjA5M2QyNGZiOTgzMjVmZWZmZmFjNGJjYTcxZjhhNzk3YjNhNjE).

## Screenshots


![2.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1631018439264/slDBx8WKNb.jpeg)


![3.jpg](https://cdn.hashnode.com/res/hashnode/image/upload/v1631018446766/MGqB_gREM.jpeg)

Demo created by [Samia Menon](https://github.com/samia-mnn/).

****

> echoAR (http://www.echoAR.xyz; Techstars ’19) is a cloud platform for augmented reality (AR) and virtual reality (VR) that provides tools and server-side infrastructure to help developers & companies quickly build and deploy AR/VR apps and experiences.

![4.png](https://cdn.hashnode.com/res/hashnode/image/upload/v1631018474121/rbl6kEKPo.png)