My Portfolio (個人專案)

專案 Demo

簡述：個人的 portfolio，包含關於我、作品集和連繫我的頁面，【關於我】簡述及技能；【作品集】四個曾經完成的專案集練習作品；【聯繫我】串接 google-sheet API 的表單，可填寫後與我聯繫。

• 使用 Next.js 與 Mongodb，建立作品集的資料庫，並使用 getStaticProps() 實作 pre-rendering。
• 聯繫我的表單串接 google-sheet API，可以使用 google sheet 檢視他人提交的表單內容。
• Projects 的 cards 使用 react-spring，讓元素有與滑鼠互動的 style。

使用工具：Next.js、Mongodb、TypeScript、Google OAuth、google-sheet API、react-spring、Sass/SCSS、Sweetalert2、Pusher

Simple Twitter (前端協作專案)

專案 Demo | 前端 repo | 後端 repo

測試使用者帳號：user1
測試使用者密碼：12345678
測試管理者帳號： root
測試管理者密碼：12345678

• 簡述：4人前、後分離協作專案，使用者可以登入/註冊會員，並於網站上可以進行發文、回復、追隨他人及編輯個人資料等互動，管理員可刪除使用者發文。
• 負責項目： React 元件拆分及切版、RWD、串接後端 API 實作 CRUD、前端表單驗證、React Router 前端路由。
• 使用工具：React Hooks 、React Router、Sass/SCSS、Axios、Sweetalert2 

TodoList (個人專案)

專案 Demo | 前端 repo

• 新增 Todo：當新的 Todo 尚未加入完成時，"+"按鈕不可點擊。

• 獲取所有 Todos：進入 APP 後獲取所有項目，並依時間排序；單筆 Todo 內容過長時，超過的文字以"..."呈現，滑鼠移至項目上時，展開全部內容。

• 完成 Todo：點擊勾選框呈現"打勾"和文字標示"刪除線"。

• 刪除 Todo：點擊"X"按鈕後，刪除該 Todo。

• 進度條：已完成 Todo 的完成率。

• 切換紐：可點擊進行切換，當打開時，已完成的 Todo 排列至列表下方，未完成的 Todo 排列至列表上方；當關閉時，恢復依時間排序。

使用工具：React、Firebase 資料庫服務、Sass/SCSS