Expense Tracker

專案資訊

Live Demo：https://expense-tracker-demo-chris.herokuapp.com/

GitHub Repository：https://github.com/chriszychen/expense-tracker

測試帳號：[email protected]

測試密碼：12345678

主要功能

1. 使用 Email 註冊新帳號，或使用 Facebook、Google、GitHub 進行第三方登入

2. 可在 Balance 頁面查看日期區間的收支紀錄，並能藉由甜甜圈圖查看比例

3. Expense 和 Income 頁面可以分別對支出和收入進行 CRUD，並可由分類和日期區間進行篩選

使用技術

開發模式：

利用 Node.js 搭配 Express 框架進行後端伺服器開發，並選用 MongoDB 作為資料庫

採用 Handlebars 樣板引擎將後端資料轉換成 HTML 傳送至前端進行渲染

前端使用 Bootstrap 優化頁面並實作簡易 RWD

資料庫相關：

使用 Mongoose（與 Node.js 對應的 ODM）來連線並直接操作 MongoDB 資料庫

登入驗證：

利用 express-session 和 connect-redis 套件實作多 server 的 Redis session 機制，

並使用 Passport.js 套件實作登入驗證邏輯，

再搭配對應的 passport strategy 串接 Facebook、Google、GitHub 等第三方登入 OAuth 2.0 API，

雲端部屬：

使用 Git 搭配 Heroku CLI 將程式部署至 Heroku，

並採用 MongoDB Atlas 作為遠端資料庫

專案畫面

Login 畫面 / Balance 畫面

Expense 畫面 / Income 畫面

簡易RWD畫面