# Software Studio 2023 Spring Midterm Project

### Scoring

| **Basic components** | **Score** | **Check** |
| :----------------------------------------------- | :-------: | :-------: |
| Membership Mechanism | 15% | Y |
| Firebase page | 5% | Y |
| Database read/write | 15% | Y |
| RWD | 15% | Y |
| Chatroom | 20% | Y |

| **Advanced tools** | **Score** | **Check** |
| :----------------------------------------------- | :-------: | :-------: |
| Using React | 10% | Y |
| Third-Party Sign In | 1% | Y |
| Notification | 5% | Y |
| CSS Animation | 2% | N |
| Security | 2% | Y |

| **Other useful functions** | **Score** | **Check** |
| :----------------------------------------------- | :-------: | :-------: |
| User Profile | 1% | Y |
| Profile picture | 1% | Y |
| Send image | 1% | Y |

---

### How to use

#### 登入介面

#### 聊天室介面
一開始進去介面，畫面是不會有任何頻道，只能創建private chatroom去把朋友邀進來。
創建private chatroom長這樣，它在畫面的左上角。
而我們可以透過這個icon去邀請朋友到自己的chatroom。

登出的button如下所示，點擊一次就退出到登錄頁面。

有關RWD的部分，縮小一定比例後，旁邊的channels區會自動隱藏起來。

### Function description

#### User Profile
我的user profile可以呈現user上傳的大頭貼，email帳號和user name。如下圖所示。
456346346是user name。


#### Profile picture
使用者註冊時，可以上傳圖片來當作頭像，沒上傳圖片會有預設頭像。

#### Send Image
如同正常的聊天app 去傳送圖片。點擊以下icon就能選取並送出圖片。button圖示如下，點擊它，

我是用firebase storage去儲存圖片和頭像的，所以可能會有一點延遲。

### Firebase page link

### Others (Optional)
None

<style>
table th{
width: 100%;
}
</style>