# 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