# Web - TypeScript/React

Follow this step-by-step tutorial on how to use CelebritySDK.

[API Documentation](https://celebrity-api-doc.web.app/)

## Requirements <a href="#requirements" id="requirements"></a>

* A Sceenic account
* Code Editor( [WebStorm](https://www.jetbrains.com/webstorm/download/), [VS Code](https://code.visualstudio.com/download))
* NPM token for Celebrity SDK
* [Node >= 8.10 and npm >= 5.6](https://nodejs.org/en/)

## Create a project <a href="#create-a-project" id="create-a-project"></a>

To create a project we recommended using the following stack: React + TypeScript.

* Create an empty React + Typescript project

```
npx create-react-app my-app --template typescript  
```

## Add Celebrity SDK library to your project <a href="#add-the-sync-sdk-library-to-your-project" id="add-the-sync-sdk-library-to-your-project"></a>

* Create ***.npmrc*** file. In the project’s root folder
* Put your `Access Token` inside `//registry.npmjs.org/:_authToken=YOUR_ACCESS_TOKEN`.
* Install Celebrity SDK via `npm i @sscale/celebritysdk`.

For more information on NPM installation look [here](https://documentation.sceenic.co/celebrity-sdk/tutorials/web/installing-the-npm-package).

## Basic usage

### Participant

* Add the following import:

```
 import { ParticipantAPI } from '@sscale/celebritysdk';
```

* Create participant API instance:

```
const participantAPI = new ParticipantAPI();
```

* Pass Watch Together access token ([reference](https://documentation.sceenic.co/watch-together-sdk/sscale-confluence-api-references/cluster-authentication-service-reference-cas-2)) to participant API instance:

```
participantAPI.setToken(WT_TOKEN);
```

* Invite/check/uninvite celebrity to/from your live Watch Together session created using WT\_TOKEN:

```
participantAPI.inviteCelebrity({})           
              .then(() => {})           
              .catch(e => {});
              
participantAPI.isCelebrityInvited()           
              .then((isInvited) => {})           
              .catch(e => {});

participantAPI.uninviteCelebrity()
              .then(() => {})           
              .catch(e => {});
```

### Celebrity

* Add the following import:

```
import { CelebrityAPI } from '@sscale/celebritysdk';
```

* Create celebrity API instance:

```
const celebrityAPI = new CelebrityAPI();
```

* Login with username/password provided by Sceenic:

```
celebrityAPI.login(username, password)            
            .then(() => {})            
            .catch(e => {});
```

* Subscribe to the list of available video/audio chat sessions:

```
celebrityAPI.subscribe(    
    ({total, sessions}) => {},    
    (e) => {}
);
```

* Unsubscribe/logout:

```
celebrityAPI.unsubscribe();

celebrityAPI.logout();
```

\
**Have a look at the API Documentation** [**here**](https://celebrity-api-doc.web.app/)**.**

## **Support**

Need technical support? Contact us at <Support@sceenic.co>.