> For the complete documentation index, see [llms.txt](https://rubyprototcol.gitbook.io/ruby-connect/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://rubyprototcol.gitbook.io/ruby-connect/developer-docs/ruby-frontend-architecture.md).

# Ruby Frontend Architecture

## Framework and Technology

* Vue UI framework
* ElementUI
* Vuex
* Vue router

## Project setup

```
yarn install or npm install
```

## Compiles and hot-reloads for development

```
yarn serve or npm run serve
```

## Compiles and minifies for production

```
yarn build or npm run build
```

## Customize Configuration

See [Configuration Reference](https://cli.vuejs.org/config/).

## How to Interact with the Vue Frontend

* `src/rubyClient.js` exports a JS object `rubyApp` , which provides all necessary APIs to interact with the contract:
  * `initRubyEthClient` : initialize a client to interact with a specific Ruby contract that has been deployed on a chain;
  * `rubyEthLogin` : retrieve contract status from the chain for a Ruby account secret
  * `rubyEthRegister` : register a Ruby account with a provided secret
  * `rubyEthDeposit` : deposit certain amount of native tokens on the Ruby contract
  * `rubyEthWithdraw` : withdraw a certain amount of native tokens from the Ruby contract
  * `rubyEthTransfer` : transfer a certain amount of Ruby tokens from one account to another
* When the frontend project initializes, it imports `rubyClient` in `src/main.js` , creates a client instance through `initRubyClient` , and stores it in a vue instance, so that the whole frontend can call the above APIs through `$ruby` .