---
# System prepended metadata

title: Software Studio 2023 Spring Midterm Project

---

# 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%        | Y         |
| Security                                         | 2%        | Y         |

| **Other useful functions**                         | **Score** | **Check** |
| :----------------------------------------------- | :-------: | :-------: |
| Name of functions                                  | 1~5%     | N         |


---

### How to setup your project

-  npm install
-  firebase login(配置已經ok) 
-  npm run build
-  npm run export 
-  npm run dev (run it locally)

### How to use 
https://hackmd.io/@0lGb-5aTT0aVoUhjwKMDwQ/r1gMTXbzC

---
---
- ![截圖 2024-05-02 下午11.22.34](https://hackmd.io/_uploads/B1_a1V-M0.png)
- 抱歉各位大哥，我的 next.js 框架沒處理好
- 拜託先不要按 crtl + R 重新整理，會進入 404 頁面 QQ

---
---
![截圖 2024-05-02 下午11.20.23](https://hackmd.io/_uploads/HkuSJN-zA.png)
- 登入或註冊頁面，三個按鈕提供登入註冊功能、以 google 登入註冊功能
- 按鈕要 hover 才會顯示字體與特效
- 這個頁面有 CSS animation

---
---

 ![截圖 2024-05-02 下午11.17.16](https://hackmd.io/_uploads/rkit07-zC.png)
- 按一下周杰倫回到publicom
- 按一下人頭進入 profile （ bonus ）

---
---

![截圖 2024-05-02 下午11.34.14](https://hackmd.io/_uploads/HyLYGEZG0.png)
- 這個專案使用 react, next.js
---
---
![截圖 2024-05-02 下午11.35.04](https://hackmd.io/_uploads/Sk_hfEbfA.png)

![截圖 2024-05-02 下午11.36.20](https://hackmd.io/_uploads/SyVZ7VZfA.png)
- 以 authenticated 的方式處理資料

---
---
![截圖 2024-05-02 下午11.37.43](https://hackmd.io/_uploads/B1OU7NWzC.png)
- add private room


![截圖 2024-05-02 下午11.38.39](https://hackmd.io/_uploads/r1ntmNWfR.png)
- add your friends

---
---
### Function description

- ![截圖 2024-05-02 下午11.27.51](https://hackmd.io/_uploads/S18--EWGA.png)
- profile 頁面（ bonus）
- User profie
- Profile picture


---
---
![截圖 2024-05-02 下午11.25.38](https://hackmd.io/_uploads/HkgYxN-fR.png)
- 點擊垃圾桶會收回訊息 （ bonus ）
---
---
![截圖 2024-05-02 下午11.29.38](https://hackmd.io/_uploads/Skg_-4-MC.png)
- 點擊 chatRobotroom 進入
- ChatRobot (bonus)
- 跟周杰倫聊天

---
---

### Firebase page link

- [Your web page `URL`](https://chatroom-midterm-2a5df.web.app)

### Others (Optional)

- Anything you want to say to TAs.

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