# Technology Overview and Sandbox Credentials

In implementing your menu, there are two main technologies that you will need to use to interact with Jane Roots. These are Algolia and our REST APIs. We also have some recommended technologies that you can use to build your menu.

## Recommended Technologies

If you are building a web-based menu, we strongly recommend that you use React with TypeScript for your frontend codebase. This is a very popular tech stack, and it is what we use internally to build our own menus. If you don't have a lot of experience with React, we would recommend that you use NextJS, which will make it easy to start building your application.

{% embed url="<https://nextjs.org>" %}

React is also compatible with Algolia's [React Instant Search](https://www.algolia.com/doc/api-reference/widgets/instantsearch/react/) library, which will drastically speed up your implementation. If you aren't building on the web or choose not to use React, Algolia also provides Instant Search libraries for [Vue](https://www.algolia.com/doc/api-reference/widgets/vue/) and [Angular](https://www.algolia.com/doc/api-reference/widgets/angular/), as well as [iOS](https://www.algolia.com/doc/api-reference/widgets/ios/) and [Android](https://www.algolia.com/doc/api-reference/widgets/android/).

## Algolia

Algolia is a search-as-a-service product that we use to make it easy to search and retrieve store and product information. While you can get this information from our REST APIs, Algolia is much faster and has much higher usage quotas. Therefore, we recommend using Algolia whenever possible.

Algolia consists of a number of **indices** that will give you access to data about stores, products, product reviews. You can filter these indices using a number of different **attributes**, including product category, brand, and rating. We will go into specific use cases later as we describe how to build your store.

### Demo Information

If you would like to use Algolia to pull information from your store, we will need to provision a set of credentials. However, if you would like to experiment with our sandbox, you can use the following keys to interact with our Algolia *demo* environment.

<table><thead><tr><th width="262">Key</th><th></th></tr></thead><tbody><tr><td>app_id</td><td>VFM4X0N23A</td></tr><tr><td>api_key</td><td>d16d4804f78c38777368ea8ced79e56e</td></tr></tbody></table>

To instantiate an Algolia search client on the demo environment, use the following code

```javascript
const algoliasearch = require('algoliasearch/lite');
const searchClient = 
  algoliasearch('VFM4X0N23A','d16d4804f78c38777368ea8ced79e56e');
```

For information on how you can use this search client, see the following sections on [Building Your Menu](/jane-docs/implementing-roots/building-your-menu.md)

### React Instant Search

Internally, we use Algolia's [React Instant Search](https://www.algolia.com/doc/api-reference/widgets/instantsearch/react/) library to call Algolia from our React application. React Instant Search provides a rich set of APIs for easily querying and displaying Algolia indices. We highly recommend React Instant Search and are happy to provide our insights into best practices as you begin your development journey using Jane Roots and Algolia.

{% embed url="<https://www.algolia.com/doc/api-reference/widgets/instantsearch/react>" %}

## Roots APIs

We also offer a comprehensive set of REST APIs. You can use the APIs to retrieve the same information that is available in Algolia, but you can also retrieve other information, such as completed orders for a user and specials. You can also use the APIs to alter some information, such as product information and creating product reviews for a user. Particular endpoints will be covered later in the docs.&#x20;

### Demo Information

If you want to access our Demo REST APIs, you can use the following API keys:

<table><thead><tr><th width="163.51739249520676">Key</th><th width="511.5346420514737">Value</th></tr></thead><tbody><tr><td>client_id</td><td>8ssq_GEiGxXI1EJytSpjEH262iBXYsB9h8oYblZTw6g</td></tr><tr><td>client_secret</td><td>8zfZiA-hxjaA0moXoUDhyVvMUP7J7WUZ37YZJtc4A2c</td></tr></tbody></table>

These credentials will work with Store IDs [2](https://demo.nonprod-iheartjane.com/stores/2/brady-s-buds-santa-cruz), [3](https://demo.nonprod-iheartjane.com/stores/3/amy-s-apothecary), [4](https://demo.nonprod-iheartjane.com/stores/4/christy-s-chronic), and [5](https://demo.nonprod-iheartjane.com/stores/5/debbie-s-dankery).&#x20;

For detailed information on all the Roots APIs, view our interactive API Docs. The following set of docs will work with demo credentials.

{% embed url="<https://demo-api.nonprod-iheartjane.com/jane-api-docs/index.html?urls.primaryName=Menu%20API%20V1%20Docs>" %}
Demo Swagger Docs
{% endembed %}

### Staging Information

To use the REST API in the staging environment, we will copy your store(s) into staging and generate credentials. The following set of docs will work with staging credentials:

{% embed url="<https://staging-api.nonprod-iheartjane.com/jane-api-docs/index.html?urls.primaryName=Menu%20API%20V1%20Docs>" %}
Staging Swagger Docs
{% endembed %}

### Production Information

To use the REST API with a live store, we will need to generate production credentials. The following set of docs will work with production credentials:

{% embed url="<https://www.iheartjane.com/api/jane-api-docs/index.html?urls.primaryName=Store+Operations+API+V1+Docs>" %}
Production Swagger Docs
{% endembed %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.iheartjane.com/jane-docs/implementing-roots/technology-overview-and-sandbox-credentials.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.