# [109-1] Web Programming Final

## (Group 41) Ideas Republica
### 組員
* 任瑨洋、邱泓翔、吳瑋倫
### 連結
* Deployed 連結：35.201.231.113
* Demo 影片連結：https://drive.google.com/drive/folders/1-gUb8El16ctbY6_OCpwHt3-IIGc0Csm7?usp=sharing
* Github Repo 連結：https://github.com/MartianSheep/Ideas_Republica
* 提供一組admin級帳密：
* [e-mail]
* pwd: 12345678
### 描述這個服務在做什麼
* 這一個網站主要是Ideas的分享與實做。網站中會有許多關於各種領域、各種面向的Ideas，使用者可以閱覽這些想法，而若是這一個領域的專家，則可以進行review，投票決定這是不是一個可行的Idea。每個Idea會有一個截止期限，過了這個截止期限過後，如果投的票數以及同意的比例超過一定數量的話，則會將此Idea晉升為Project。使用者可以閱覽這些Projects，如果覺得這個Project是自己能力所及的，便可以接受這個Project，和其他使用者一起完成這個Idea的實做。
### 使用/操作方式
* Sign Up: 輸入個人資訊，以及個人擅長的領域，作為之後review參考的根據
* Sign In: 用email及密碼登入
* Homepage: 有popular topics、數個topic的分類，
* About: 關於我們網站的發想，以及如何操作網站。
* Topics: 可以看到有哪些分類，每個分類底下會有數個Topics，點擊後會進到該分類的Project頁面，會有屬於該Topic的Projects，可以accept the project，跟其他人一同實現此想法，如果途中想放棄，亦可按下cancel，退出此project。
* Upload Ideas: 上傳你的Idea讓大家review，輸入title, content, reference，並選擇該Idea所涵蓋的Topics。你所發起的Ideas會存放在User Information的My ideas中。
* Review Ideas: 根據使用者的專業領域，決定可以review的項目(使用者無法review不屬於自己expertise的領域的Topics)，在頁面左方的pending ideas，可以選擇accept和reject，決定使用者對此Idea的投票，而投票的內容會存在user information的my reviews中。
* Search ideas: 根據輸入的字串搜尋projects。
* User Infomation(頁面右上方):
* My home page: 個人頁面，可以看到自己的頭像以及專長領域(expertise)，和自己感興趣的topics。
* Settings: 修改使用者資料(包括頭像、intereseted topics，而註冊的nickname, email, expertise則無法更改)
* My Ideas: 可以看到自己提出的Ideas, 並顯示關於Idea投票的資訊：截止投票時間、是否通過、投票比率、投票同意率，並可以利用頁面的tab來快速分類提出Idea的領域、以及sorting的方式來快速取得使用者想要的資訊。
* 通過標準：在截止時間內投票人數達此領域的專家的一半且同意人數達投票人數的一半即為通過
* Interested Topics: 可以加入/刪除自己感興趣的Topics領域，每個Topic會顯示出數個已經Launched的Project。
* Ongoing Projects: 使用者accept的Projects，一旦使用者accept一個project，此project便會被放入此頁面。
* My Reviews: 可以看到自己對那些Ideas進行了review，亦可經由tab及sorting快速分類。
* 圖示：

### 使用與參考之框架/模組/原始碼/第三方套件
#### 前端
* react.js
* ant design
* react hooks
* react apollo
#### 後端
* graphQL
* bcrypt
#### 資料庫
* mongo DB atlas
### 專題製作心得
#### 任瑨洋
* 這次的專題，我自認為我們算是「挺有夢想的」，至少從睡眠時間上來看是這樣。為了方便與美觀，我們大量採用了ant design的物件，然而寫起來還是非常困難，如果我們做個小prj都這麼不容易，更何況是更大的工程，實感網路服務開發者之不易。
#### 邱泓翔
* 這次project我們訂了一個相當有夢想的題目，而且我們三個人期末都超級忙，所以一直等到期末考完才開始動工，deadline截止前的一個禮拜幾乎天天都在熬夜寫code，不過我也因此學到相當多東西。我這次主要是負責後端的部份，不得不說後端的bug其實比前端平易近人許多，至少比起後來我們在前後端整合上遇到的問題而言，後端遇到的主要都是邏輯上的bug，前端則有許多JS和React的坑，因此我們花了極多的時間在前後端整合上，幸好同組的同學都很carry，幫我解決了很多困難，也很開心最後能做出一個還算有點樣子的成品。
#### 吳瑋倫
* 這一次的project，真的是一個非常大的考驗。我們從零開始，一步一步增加各種元素，途中遇到了許多問題，其中最難的我想是設定使用者登入狀態以及資料取得的async和await的部份了。javascript的程式和我平常在寫的C/C++差異十分的大，尤其是debug的部份，error message常常會出現在一些不太相干的的地方，網路上的解決方法也百百種，真的很難去找出真正的原因。好在我的組員們很凱瑞，跟我一起熬夜打code，真的非常感謝他們，讓我學到了非常多東西。
---
### 每位組員之貢獻
#### 任瑨洋
* 前端網頁、前後端整合、login cookies and history
#### 邱泓翔
* database、schema定義、query、mutation、subscription的實作、前後端整合、deployment
#### 吳瑋倫
* 前端網頁、前後端整合