---
# System prepended metadata

title: 'Frontend handover doc:'

---

# Frontend handover doc:
## :memo: tico-web-app
```
The web application for Tico main service
Main service:
Power Call - a video stream service which base on WebRTC
Wonder Call - a embeded iframe service - use frame-ancestors to limit specific
origins
Instant Chat - provide instant text chat service
```
```
Quick start:
1. yarn install
2. yarn dev (development)
```

### 1: React/React hook
### 2: Next.js (server side render)
### 3: i18n/ use `next-i18next` pacakge to handle it
### 4: `@emotion/styled`  (CSS in JS)
### 5: UI use `@material-ui`  components
### 6: use `axios` to handle http request
### 7: use `MobX` as state management tool.
### 8: use `Socket.io-client` handle webrtc connection.
Project structure :
* container: Main page folder
* components: Shared components folder
* public/locales: Put i18n json files

Note :
* PowerCallStore.js: handle main webrtc functions and related state. All functions were commented, please check the PowercallStore.js file directly.
* PrivateRoomStore: handle privateRoom
* use frameAncestors to limit specific origins 
* storeAction.js: shared mobx function file

Issues :
Please check trello list :https://trello.com/b/maj4WNJg/tico
## :memo: TicoService
```
The cross platform application, was published on AppStore and Google Play
Main service:
Instant Chat - provide instant text chat service
- Will be removed feature: related to Map features
```
Quick start
```
1. Clone the project

```shell
$ git clone git@github.com:tico-messenger/TicoService.git
```

2. For developing/testing, go to project folder, copy src/config/dev.js

```shell
$ cd TicoService && cp src/config/dev.js src/config.js
```

For releasing, go to project folder, copy src/config/prod.js

```shell
$ cd TicoService && cp src/config/prod.js src/config.js
```

3. Install dependencies

```shell
$ npm install
```

### 1: React Native/ Class Component
### 2:  use `Redux` as state management tool.
### 3: i18n/ use `react-native-i18n` pacakge to handle it
### 4: `onesignal` handle mobile notification
### 5: use `react-native-router-flux`  handle page route
### 6: video/audio call use `react-native-webrtc` to handle connection
### 7: use `Socket.io` handle webrtc connection.
Project structure :
* components: All page put in this folder
* actions: redux Action
* reducers: redux Reducer
* config: js file to represent dev/prod parameter
* util: shared function

Note :
* use podfile to handle ios third party package
* Android: no auto-link package, need to link them manually
* Core page is in Chat.js file

## :memo: tico-webrtc-signal-server 
```
For powercall connection exchange
Webrtc connection established need a server to exchange client's local info
```
### 1: use `Socket.io` handle webrtc connection.
### 2: use `express` host server.
### 3: exchange client's sdp

## :memo: powercall_transfer_server

```
Implement slack API, for Slack App slash command
when user install tico slackapp, they can use slash command /powercall `roomID`
```
![](https://i.imgur.com/VqRFWsZ.png)


## :memo: Tico frontend Todo List

### 1: Implement janus structure with `janus-cloud`
The janus-cloud was installed from the server Queintin deployed, need he help to give access of instance

### 2: Implement GraphQL function by `apollo-client`
Tico old backend use Parse.js system, we are going to implement new struecture by Apollo GraphQL system.
New backend system please check tico-backend repo: https://github.com/tico-messenger/tico-backend
Frontend refactor haven't completed but you can check branch: `grapgpql/auth`, and check the `newSignUpStore.js` file. 


## :memo: Note
Backend test files are in the root folder: `tests`
Backend doc: https://hackmd.io/r7jbGCkbQfKvHpCGyAJc-A