我的第一個 side project — 冷知識網站 Triviagora
持續更新中
⭐️For English version, please jump to this article.
最後更新時間：2023–09–17
目錄
給面試相關朋友的貼心小整理
產品快照
目的
點子發想
對產品的想法
Tech Stack
技術與版型選擇
產品展示與功能說明
其他說明
這過程有沒有遇到什麼困難？怎麼解決？
那這次覺得自己做得好與可以更好的地方？
未來規劃
小結給面試相關朋友的貼心小整理
其實不確定怎麼適當地稱呼這類閱讀者，想表達的意思是因為看到履歷、點擊連結而進到這篇的人，有可能是 HR、Head Hunter 或面試主管等。由於這篇文章有點像是為該作品寫傳記，身為該作品的創造者自然會想好好地寫而不只是為了面試隨便寫一篇交待一下，但又怕看的人不好找到自己想看的，所以建議先在上方目錄或直接按 Ctrl + F 用關鍵字搜尋一下本頁找找看有沒有符合你要的，這邊先列舉幾個可能這類朋友會想看的並附上段落連結，點了可直接跳到該段落：
如果整篇都看不到你想看的也可以面試時交流或直接在本篇留言，我會盡量把有用資訊補充進來。
這邊也附上網站連結：Triviagora
測試帳密：test@example.com、123456（請不要改到密碼，感恩）
繼續閱讀 | 回到目錄
產品快照
快速摘要幾個產品資訊：
- 一個冷知識網站，使用者可以註冊、登入、進行發文等 CRUD 操作
- 主要技術：JavaScript、React、Firebase、Tailwind
- 共耗時 16 個工作天，未來會持續優化
繼續閱讀 | 回到目錄
目的
做什麼事都要先想清楚目的。為什麼要做這個 side project？原因大概 3 個：
- 第一個當然是因為要找工作所以需要累積作品集，對轉職者而言更是如此
- 增強技術能力，不管是廣度（學沒學過的）或深度（學過的練熟）
- 喜歡動手把東西做出來的感覺，而且這是第一個由自己全權負責的專案，對於能夠從無到有把產品做出來非常有興趣
繼續閱讀 | 回到目錄
點子發想
曾在 side project 要做什麼？提過自己是個點子很多的人，手機備忘錄記了一堆點子，所以其實一開始有點苦惱要做哪個，後來想了方法逐步篩選，如下：
- 第一步先想，怎樣可以比較省力？是否利用一些已有的基礎去延伸會比較好？沿著這個思路決定從點子中挑出跟 Twitter 類似、適合進行發文留言等操作的類型，這樣 user story 也不用重想，功能或頁面跳轉等也不需重新設計
- 接著從所有點子中挑出 4 個符合這種類型的點子
- 最後做了一張簡易分析表去分析這 4 個點子的優缺點，綜合評估後選出冷知識網站
繼續閱讀 | 回到目錄
對產品的想法
冷知識網站本身沒什麼實用功能，畢竟是冷知識嘛，不知道基本上也不會怎樣，所以產品並非為了解決某個特定問題而誕生，但未來是否能解決什麼問題可能就不一定。
那為什麼一開始會把這個點子放入備忘錄？其實單純因為我喜歡冷知識，應該說，本來就喜歡瞭解各種知識，只是其中比較冷門的就會被歸在冷知識。因此就在想是不是能做點什麼跟冷知識有關的，一個分享冷知識的網站很自然地成為一個點子。另外，找了一下發現繁中網站目前比較有關的主要有 3 個：
- 綠果先生冷知識：有冷知識區塊，但本質是個類似賣有機用品的公司
- 每日一冷：以冷知識為主的網站，可惜停更了，不過臉書粉專還有在運作，免費幫他們宣傳XD
- BEGINNEROS：有冷知識，但本質是線上學習平台，而且有的文章是香港中文看不懂
繁中找不到比較符合心中想像的網站，於是找英文的：
- Fun Trivia：冷知識問答
- Triviaplaza：冷知識問答
可以看得出來都是以問答題為主的型式，比較像遊戲而非單純分享。而以上不管中英文網站目前皆未發現社群功能，只有站方發文，使用者頂多可以留言，因此又讓我更想做這個專案。不過其實想想也很正常，因為一個可以分享冷知識且具備社群功能的地方不一定需要獨立用網站型式存在，光是臉書社團就可以滿足需求了，而且喜歡冷知識的應該算小眾吧（沒數據僅憑感覺猜測）？所以比較少人做也很正常，幸好不是要創業只是做 side project，如果要創業我可能不會選這個產品來做XD，但如果是作品而且只是做興趣那就 ok。
在本段最後想分享，除了寫程式我也把自己當作 PM，P 是 product，雖然目前沒打算推廣但自己總是站在 PM 角度規畫各種事，白話講就是煞有其事地把 Triviagora 搞得跟真的一樣，例如考究地命名、做個 logo、思考這個產品使用者好不好用、會想知道什麼資訊、希望有何功能等等，為什麼要這樣？也沒什麼，只是因為這是我的第一個 side project 而且又是自己喜歡的事，不希望隨便弄一弄，所以這個產品會持續更新，至少未來要做成一個自己也會喜歡用的東西，說不定還可以變成我個人的冷知識儲藏庫XD
繼續閱讀 | 回到目錄
Tech Stack
- 核心技術：JavaScript、React、Vite、Tailwind、Firebase
- 其他工具：Adobe Express、react-time-ago、react-icons、react-router-dom、Tailwind Components、unDraw
接著就來看看在整個專案中面臨過哪些選擇最後又是如何決定的。
繼續閱讀 | 回到目錄
技術與版型選擇
曾在這邊分享過對工具選擇的看法，不過這邊還是會簡單敘述，原因大多相當單純。
1️⃣ 技術選擇
- JavaScript：JS 是我學的第一個語言也是目前唯一會寫的，不過確實當初思考過要不要用 TypeScript，後來決定先不用的原因是因為已經先決定要用 Firebase 跟 Tailwind，如果再用一個不熟的語言怕學習時間拉長，做作品會拖太久，而且如果 JS 學得好沒理由怕 TS 學不起來，因此綜合考量下這次作品先不用 TS 寫
- React：沒什麼好說的XD，目前唯一會的框架，想練熟一點
- Vite：由於過去都用 CRA，聽過 Vite 很多次，想試試看新工具，學習成本也不高
- Firebase：身為前端但又想做出一個包含前後端、可讓使用者完整操作（如註冊、登入、CRUD 等）的作品，曾聽其他人談過 Backend as a Service，也聽過 Firebase，聽說滿好用的，研究了一下覺得挺適合就決定用用看，其實沒有所謂決策過程，因為從未用過這類工具，到網路去搜尋一個完全不熟的工具類型並且看那些分析文章後再決定其實很不切實際，因為可能會發現自己根本沒用過這種東西怎麼知道人家評論的點是什麼？能體會嗎？因此我的做法就是先找個看得順眼、滿多人用過、風評不錯的用用看，而且又是 Google 旗下產品，相關學習資源可預期不會太少，而剛剛這幾點滿重要，因為應該沒人想學一個來路不明、找不到相關資源、遇到問題可能也問不到人的新工具。因此先學 Firebase，有了這次經驗以後學其他的才能有所比較，也才知道別人說的所謂好與不好指的是什麼，這樣未來才能有真正的決策過程
- Tailwind：做多人協作專案時 CSS 用 Sass / SCSS 去寫，在那之前只學過 Bootstrap 一種 CSS 框架，所以這次一開始就決定多學第二種 CSS 框架，會選 Tailwind 跟 Firebase 一樣也沒有所謂比較多種方案的決策過程，單純因為聽過太多次了，去研究後發現概念基本上跟 Bootstrap 差不多，但是功能更多、更容易客製化，官方文件也寫得很不錯，介面看得順眼、內容也淺顯易懂，而且也有些 UI 元件庫可以用，很快我就決定要用了，反正跟上面說過的一樣，先用用看累積經驗才有得比較，像現在用過 Bootstrap 跟 Tailwind，未來再用第三種就能跟這兩個作比較
2️⃣ 版型選擇
研究後發現冷知識網站太少，沒看到特別喜歡的版型，去找其他網站版型又太多，而且多半過於複雜不適合當作雛形，但因時間考量也沒打算從頭自己畫圖，後來決定從 Tailwind UI 元件庫去找適合元件來使用主要有以下原因：
- 很快，適合短時間內建立產品，而且元件通常有 RWD
- 沒用過 UI 元件庫，覺得很新鮮，多觀摩培養設計感也不錯
- 把 UI 元件融入作品的過程滿有趣，不用重新造輪子但又能將輪子改成適合自己車款的樣子，跑得動、跑得順最重要
繼續閱讀 | 回到目錄
產品展示與功能說明
這邊主要以文字列點式說明，更完整操作 demo 歡迎到 repo 觀看，或是進入網站用測試帳號邊操作邊對照這邊的展示說明：
- 有個簡易介紹的首頁，頁面中有註冊與登入連結，並判斷使用者登入狀態決定側邊收合式選單顯示內容
- 側邊收合式選單預設隱藏，點擊漢堡排會展開，並且根據使用者所在頁面加深該選項樣式，同時上方導覽列也會顯示使用者所在頁面
- 瀏覽文章並留言，一留言畫面會即時更新
- 查看作者個人頁面，要看發文者或留言者都可以，進去後該作者的 email 與密碼欄位會隱藏
- 收藏文章並於個人頁面顯示收藏文章列表
- 發文，可附圖片
- 刪除發文或留言，也是一刪除就即時更新
- 更改個人資料，包含大頭照、自介、暱稱、email、密碼
- 可查看其他頁面，包含網站介紹、網站通知、使用資源等
- 目前大部分頁面都有做 RWD，未來會針對所有頁面細部調整
最後再加個 repo 裡沒有的，請先看一下 demo，後面再說明這個 demo 在幹嘛：
這個登入畫面主要用某個 Tailwind UI 元件製作，但根據自己需求調整過，例如裡面加上了 logo、slogan、svg 圖檔顏色換成主色調、RWD 也調整過，雖然不是主要功能，但挑這個出來分享是想呼應上面提過的，這是個很好的例子說明了何謂不用自己造輪子但又能根據需求改裝讓車子跑得順暢。
繼續閱讀 | 回到目錄
其他說明
這段想談談產品功能以外的事，其實滿多可以講的，怕篇幅太長以下挑選 3 則與你分享：
- 產品命名由來：如上所述，我想把它搞得跟真的一樣，所以認真思考了如何命名，其實登入後在 about 頁面就可以看到，這邊簡介一下，trivia 就是冷知識（是個複數名詞），agora 是古代希臘城市中人們可以集會的廣場，我曾看過百貨公司名稱內有 agora 這個字，當時覺得用這個字很適合感覺就有讓人潮聚集到這間百貨公司的意味，印象很深刻，如今要命名馬上就想到這個字，而且剛好是 a 開頭，可以跟 a 結尾的 trivia 連在一起，於是 Triviagora 就誕生了，有一種冷知識聚集地的意象。
- 自己做 logo：是的，logo 我自己弄的，兩根希臘式柱子中間有顆地球，象徵 agora 內有著世界各地的冷知識，放在註冊、登入頁面，以及進入網站後瀏覽器分頁上的 icon 也是。其實當初想讓 AI 幫忙畫，但發現 ChatGPT Plus 的 Code Interpreter 不見了就這麼剛好那幾天被收回這個實驗功能，於是跑去用 Edge 的 Bing AI 請它幫忙畫，但這個 AI 一直鬼打牆無法良好理解指令，又跑去查了些不用註冊的 AI 畫圖網站試用，但都不適合拿來畫 logo，最後決定不靠 AI 自己做，查到了 Adobe Express 所以稍微學一下就自己做出來了，其實超簡單就很像在 PPT 把素材拼在一起、去背、調顏色這樣。事後回想覺得是關鍵字下錯所以沒找到適合軟體，當時都在想「AI 繪圖」，但應該用「AI logo」去找會更好找，往好處想又多學了個 Adobe 產品XD。最後關於這個 logo，我發現它有個缺點，就是太複雜，事後觀察多數企業他們 logo 大多很簡單，我沒學過設計，會發現這個缺點單純因為 logo 在瀏覽器分頁上看得沒有太清楚，所以未來或許會重新設計。就在發文之際剛好看到一篇文章：The story behind the Proton Pass logo，裡面提到了他們 logo 設計的巧思，有個點很有意思叫作 scalable design，意思是這個 logo 不只在網頁會出現還有許多其他地方例如 Chrome extension、使用者填寫帳密的欄位等等，所以 logo 設計要考量到是否易於因應不同使用場景而微調，這是我當初完全沒想過的事，非常有意思。
- 怎麼沒用 Redux：最一開始有想過，想說多學個技術也不錯，很常聽到 Redux，可以做狀態管理，自己其實也滿想用用看，但稍微查了一下主要是大專案會用到，因為當專案很大、架構複雜時確實會需要更良好地管理狀態，小專案或許不太需要，考量到開發時程（我給自己約兩週時間）與必要性，決定不用 Redux，後來實際開發也確實沒有特別複雜的狀態需要管理。
繼續閱讀 | 回到目錄
這過程有沒有遇到什麼困難？怎麼解決？
有個問題讓我印象深刻，就是 logo 破圖問題。當到登入或註冊頁面時常常發生 logo 破圖，該 logo 會變成很多顏色豐富的小色塊，根本看不出來是 logo，不是每次都發生但發生頻率挺高的，遇到的當下沒有馬上處理以為是網路或瀏覽器秀逗，想說過個幾天或重開機也許就正常，結果沒有，問題一直都在，於是意識到必須解決這個問題，但又完全沒有頭緒，後來經歷了以下過程：
- 先問 ChatGPT，但回覆內容提到的問題可能性太多元，很難檢查
- 自己試著將 logo 檔案從 png 檔轉成 svg 檔，但問題仍存在
- 既然不是檔案類型，那就從瀏覽器下手，試著用不同瀏覽器結果發現 Edge 跟 Firefox 都沒這個問題，所以可能跟 Chrome 有關
- 後來再針對「Chrome 與其他瀏覽器顯示結果不同」這點去問 ChatGPT，於是得到一些建議但可能性仍然太多元，其中有個項目「嘗試在 Chrome 的設置中禁用硬體加速」引起我的注意，因為確實有印象自己曾在 Chrome 設定中開啟過這個選項，結果試著關掉後竟然真的不破圖了，但我想跟張麻子一樣站著還把錢掙了，於是再問 AI 有沒有什麼辦法不關掉硬體加速而且還不會破圖？又得到了一些選項
- 接著就從選項中先猜可能跟圖片尺寸有關，畢竟這個選項相對好理解而且要做測試也不難，於是試著將圖片尺寸從 500*500 px 降到 200*200 px，非常幸運地順利解決破圖問題！雖不確定原理為何，但猜測可能跟繪圖有關，因為 logo 其實在螢幕上顯示的範圍不大，約 150*150 px，但在這個小小的空間卻放了 500*500 px 的圖，硬體的繪圖處理器要在瀏覽器將較大尺寸圖形繪製到小尺寸畫面時可能會出錯，單純猜測啦，畢竟遠遠超出目前能理解的範圍，總之，確實站著還把錢掙了。
以上是我印象最深刻的問題，當然還有很多其他問題但這邊先分享一個就好，而其他多數技術問題其實都還好，畢竟現在問 AI 很方便，如果真的要說的話頂多 Firebase 官方文件不好用，導致有時官方文件找不到答案還要另外 google 很耗時。
在這段最後想談個問題，不算技術困難更像是心態困難。想做的功能太多、可以優化的地方也很多，一開始有點陷入優化深淵，概念類似：做了某個功能 ⇒ 可以動但不好看 ⇒ 優化畫面 ⇒ 用了幾次考慮到使用者體驗應該要優化操作流程 ⇒ 初步完成，但是否還能更優化？⇒ 畫面 RWD 做得不夠好，優化！⇒ 畫面差不多了但功能似乎有點單調？⇒ ……
這次做 side project 讓我體會到人的慾望總是無窮的啊，總想加上各種功能永遠無法滿足，任何一個產品也不存在完美的樣子，永遠都可以再更好，後來因為時程 delay 了兩個工作天，意識到要懂得適時暫停，先求有再求好，強迫自己做到一個段落，未來有空持續優化（待辦優化項目根本已排到天邊了）。
繼續閱讀 | 回到目錄
那這次覺得自己做得好與可以更好的地方？
🟢 好
- 新東西：用了 3 個新技術以及多個小工具，這種現學現賣的感覺滿爽的XD
- 詳實紀錄：遇到問題都有將處理過程記錄下來，參考資料與其他筆記也都有紀錄，紀錄的當下其實覺得很花時間，但還是耐著性子做，因為這個過程很珍貴沒辦法重新複製，因此一開始就想把遇到問題的情境、如何思考、解決過程都記錄下來，未來不僅可以自我檢討還增加很多技術部落格素材，根本計畫通
- 選題：選了一個不錯的題目，老王賣瓜？沒有啦，我認為選個真心喜歡的題目當作第一個作品會讓人更有動力想做好，而且冷知識 side project 似乎比較少見，很少聽到有人做這個，可能原本就滿小眾，一般人聽聽冷知識還 ok 但認真用這個主題做作品應該就比較少
🔴 可以更好
- 對資料庫不熟：這是前端的硬傷，畢竟時間有限，在 AC 我選擇主修前端相對地後端主題自然比較少碰，所以這次用 Firebase 就發現對於所謂資料結構、資料庫種類很不熟，例如想要某些資料彼此關聯卻發現不懂怎麼做，考慮時程決定不深入研究而採用替代方案
- 沒什麼亮點：基本功能都有，但無法讓人眼睛一亮，這也是時程關係，決定先完成基本產品，其他功能列入未來新增項目（其實已經列了好幾個）
- 程式碼不夠精簡：每個檔案撰寫當下會注意程式碼精簡度，但不同檔案或不同資料夾間是否有相同程式碼能抽取出來這件事目前還沒做，已列入待辦事項
繼續閱讀 | 回到目錄
未來規劃
希望未來能當個良善公民、有不錯的職涯發展、好好繳稅、兄友弟恭、人見人愛……哦哦你是說這個 side project 的未來規劃是嗎，待辦事項已經把我的 Notion 頁面塞爆啦，想做的東西真的太多，以下挑幾項與你分享，其他太細的暫且不談：
- 將地圖融入 Triviagora：我超愛看地圖，尤其是 Google Maps，所以想方設法加入地圖元素，未來希望可以讓使用者發文時標註地點（如果該則冷知識有地域性的話），然後使用者在文章列表可以切換成地圖顯示模式，將冷知識依地點顯示於地圖上
- 中、英文使用者分流：有些冷知識會受地區、語境影響，如果能依照語言讓使用者選擇想在哪個語言區塊交流會更好
- daily quiz：類似每日來一題冷知識，選擇題之類的，單純好玩
- 新增管理員功能，也就是做個後台讓管理員方便管理網站，例如刪除不雅文章、辱罵留言、或是剔除鬧版者帳號
- 新增使用者角色標籤，例如管理員、國籍、貢獻度等
- 網站深色模式切換按鈕，我超喜歡深色模式，超想做這個功能
繼續閱讀 | 回到目錄
小結
奇犽？沒事。這個過程我學到很多，光看本文篇幅可略知一二，這個作品將持續優化，未來也會回頭更新此文與 GitHub repo，有任何建議或想法都歡迎與我聯繫，不管是在這篇底下留言、寄 email、或透過 Discord 聯繫都可以，也謝謝你看到這邊，如果整篇完整讀完那真的是功德無量XD，謝謝😉
寫了這麼長還不趕快結束就太過份了 | 回到目錄
