今天要介紹第二版作品，目前還是半完成品，還有很多還沒完成，正在找時間慢慢做，但也是跟大家分享作品不用等到100分很完整，才投履歷找工作。

我覺得作品的重點是為什麼做這個作品，你做了什麼，遇到什麼困難，怎麼去解決。
這也是一直會不斷重複的過程，不管是在做作品或是工作上。

第二版作品技術列表

前端：React 18

前端框架：Next.js

後端：Node.js

後端框架：Express

資料庫：MongoDB Altas

狀態管理：Redux（Redux-saga）

UI框架：MUI（Material UI）

新功能網址連結：https://daodao-f2e-pi.vercel.app/partner

新功能github連結（前端）：https://github.com/xu75/daodao-f2e

新功能github連結（後端）：https://github.com/xu75/daodao-server

為何棄用Firebase選用Node.js

原先是因為沒有後端，所以前端大大選了Firebase來嘗試看看，但後來討論後，考量到未來還是會需要增加功能，長遠來說還是需要有後端，而且把處理資料的邏輯都寫在前端也不是很好的做法，這是後來想改用後端的原因。

至於為什麼後端選Node.js，主要是考量未來維護上還是要選比較容易上手的語言，前端是Javascript，後端選Node.js會是比較容易上手與維護的選擇。

開發前準備

• 熟悉MERN Stack
• 分析前後端代辦事項
• 尋找合適的教學練習
• 上工幹大事

MERN Stact練練手

選MERN Stack 原因無他，YT上看到超級多MERN Stact的教學，教學資源豐富，就決定先用看看這樣的架構，於是先找了幾個小專案熟悉一下，同時也為之後島島功能改寫做準備，邊學邊研究要怎麼應用在島島上。

Build Your ChatGPT AI App in React use OpenAI Api | MERN tutorial | Machine Learning

Build and Deploy a Full Stack MERN AI Image Generation App | Midjourney & DALL-E Clone

上面兩個都蠻喜歡的，超級推薦，可以練習到簡單的前後端串接，後端API串接、JWT Token，雖然我一開始也不太懂在幹嘛，邊做邊查，不過累積經驗值也是很重要的，不懂是很正常的。

加碼打基礎

後來想想還是找完整的課程補基礎，選來選去買了三個課程，除了補基礎外課程有專案需要的OAuth登入、完整的Redux教學也含有專案會用到的Redux Saga。

Udemy課程：Complete React Developer in 2023 (w/ Redux, Hooks, GraphQL)

Udemy課程：Complete NodeJS Developer in 2023 (GraphQL, MongoDB, + more)

Udemy課程：2023 網頁全端開發

開發過程

前端：

原本Firebase的Google第三方登入移除，改成call 後端api提供的Google OAuth登入服務

原本Firebase的資料串接全部移除，改成用Redux Saga call 後端Api存取資料

原本使用者狀態與資料使用Firebase Auth服務 ，使用者資料與狀態改成用Redux管理

後端：

資料庫建置:

使用MongoDB Atlas，設定上還算簡單易懂。

資料格式建立:

參考原本在Firestore的資料格式，在Models建立Schema

撰寫Api:

根據需要的功能，參考其他專案跟教學來寫

• 第三方登入
• 讀取使用者資料
• 更新使用者資料
• 讀取所有使用者資料

開發困難

Redux Saga

只用過Redux toolkit，沒用過Redux，也沒用Redux Saga，一開始看到 function* 跟yield還以為看錯了，網路上查到的寫法以及課程上的教學寫法又跟專案用的寫法略有不同，看到我眼睛快要脫窗了，到底為什麼一樣都是Redux Saga寫法會不同？！＠＃＄

Passport 套件 串接Google OAuth2

登入完成後會回傳一個user物件，本地測試是可以傳回前端瀏覽器，部署上PAAS後就消失了，原本以為是PAAS的問題，換了好幾個平台都一樣的結果

找了好幾天都無解，原本想說做完告一段落，就開始投履歷面試，竟然因此多卡了好幾天，害我不敢投履歷，功能都做完一段落了，真是氣氣氣

最後log出來看回傳的資料有什麼是我可以用的，把一個多層陣列＋物件混合的奇怪資料攤平，再做一些資料處理，拿到我要的userID，終於告一段落，真是印象深刻的非開發問題，到現在還是無解。

以上就是改版後的過程，有點難描述的很清楚，但在逐漸完成的過程中，很有成就感，也對前後端串接有更多的認識與了解，從前端發出的請求是如何到後端，後端該如何處理請求並回傳給前端接收，前端再做處理與呈現。

為什麼會有很多認識與了解呢？因為Debug的時候，很常從前端追到後端，後端再追回前端，追久了，不熟也熟了

簡短的心得是一條龍真是不容易，資訊量太大太多太雜，做了前端忘了後端，做完後端忘了前端，一直在重新回憶的循環中

終於要來到面試篇了！！！會接續分享如何準備面試、投履歷的過程、面試公司心得大公開～～～