# Build a New Front-end Interface

Developing a new font-end website or mobile app for HollaEx based exchange is quite straightforward. As a front-end developer you need to understand how the API and websocket work and utilize those in your application.

Each exchange has a unique API Endpoint. For the HollaEx Pro exchange this URL is <https://api.hollaex.com/v2> and you can access the health endpoint on [https://api.hollaex.com/v2/health](https://api.hollaex.com/v2)

Most exchanges use the following format for the API and Websocket endpoints. If your exchange url is for example myexchange.com the format to access it would be:

**API:** <mark style="color:blue;"><https://myexchange.com/api></mark>

**Websocket:** <mark style="color:blue;">wss\://myexchange.com/stream</mark>

Currently HollaEx Kit is on **v2** so you need to add <mark style="color:blue;">/v2</mark> to the end of your API URL.

All HollaEx based exchanges also have an API explorer available on <mark style="color:blue;">/explorer</mark>. So <https://myexchange.com/api/explorer> where you can find the list of all endpoints available.<br>

### User onboarding

To start the development of your front-end application you need to start from the user onboarding so here we cover Signup and Login flow:

To signup a new user you can simply use:

<mark style="color:red;">POST /signup</mark> with the body template below:

```
{
  "email": "string",
  "password": "string",
  "referral": "referralcode"
}
```

email and password are self explanatory. referral is optional for when the user is signing up with another users referral code.

The response should be <mark style="color:green;">200</mark> if its successful which means the user is registered. In this case user will receive a URL in his email and the URL includes a code that is used to verify the users email.

This code is valid for 5 minutes and to resend this code user should send a request to <mark style="color:red;">GET /verify</mark> with the users email and resend set to true. So for example:

<mark style="color:red;">GET /verify?email=<myemail@gmail.com>\&resend=true</mark>

The email by default links to the exchange domain URL and has the code in it which is used to verify the email by sending

<mark style="color:red;">POST /verify</mark>

Body:

```
{
  "email": "myemail@gmail.com",
  "verification_code": "the code in the email URL",
  "referral": "referralcode"
  "long_term": true
}

```

Once that is done the users email is confirmed and the user can now login.

In order to login the front-end should send the following request:

<mark style="color:red;">POST /login</mark>

```
{
  "email": "string",
  "password": "string",
  "otp_code": "string",
  "long_term": true
}
```

email and password are again self explanatory. `otp_code` is required when the user has an OTP activated. If you do not send the `otp_code` the error response from the server indicates that which means in your UI flow you can ask for the `otp_code` to send that again in case you don't know whether user has OTP activated or not. The response would in that case be:

<mark style="color:red;">"message":  "Invalid OTP Code"</mark>

`long_term` is a boolean to indicate whether the token should be issue for a longer period or not. If its set to false the token is issue for 7 days and if its set to true it would be valid for 90 days.<br>

If all is correct you receive a JWT token which is valid for either 7 days or 90 days and it should be used for authorization. You would need to store this token in your application on the front-end for example in your localstorage on a browser to utilize for other API requests.

After the user is successfully logged in you would want to redirect the user to his dashboard and use the following endpoint:

### Authentication

<mark style="color:red;">GET /user</mark>

This endpoint requires you to send Authorization header along with the token you receive from the login endpoint. You also need to add the word <mark style="color:red;">"Bearer"</mark> before the token. So the header in the request would be:

`"Authorization": "Bearer your_jwt_token_from_login"`

Now you are able to get the users data, his wallets as well as his balance.

### Websocket

While APIs give you a very comprehensive access, certain features would need to be automatically updated on your interface for example when a user receives a deposit or when a users order gets filled or when his balance gets updated. So instead of the front-end making constants API calls to update this information you can use the websocket to get the updates.<br>

After login you can make a request using:

`wss://myexchange.com/stream?authorization=Bearer your_jwt_token_from_login`

\
You can then send the following message which means you are interested to receive the following updates:

`{"op":"subscribe","args":["trade","wallet","order","deposit","usertrade"]}`<br>

To keep the websocket open you would want to send the following message as a heartbeat to indicate that your channel is active otherwise the server might drop the websocket channel due to inactivity.

`{"op":"ping"}`

For other use cases and services please refer to the API explorer on your exchange URL and simply change api.hollaex.com to your exchange URL in the following example: <https://api.hollaex.com/api/explorer>

### Logout

`GET /logout` along with the Authorization header would logout the users session and you can redirect the user back to the login page.<br>

The official HollaEx Kit is written in ReactJS and the source code is available on <https://github.com/hollaex/hollaex-kit/tree/master/web>

Since the project is very big and has many components for a simple example you can use this front-end sample using nextjs <https://github.com/hollaex/frontend-sample>

<br>