Expense Tracker

以火影忍者為主題的個人化的記帳本 web app。

專案連結

GitHub link：https://github.com/sherryliao21/expense-tracker-tailwindcss

Live Demo on Heroku：https://expense-tracker-n2.herokuapp.com/

體驗帳號：

email: [email protected]

password: 12345678

專案紀錄：https://pse.is/3jgnq5

主要功能

使用者可以：

1. 註冊帳號或使用 Facebook 、Google 帳號登入

2. 瀏覽、新增、編輯、刪除收支紀錄

3. 依照不同的分類方式篩選並呈現收支紀錄、亦可使用圓餅圖統計收支狀況

4. 更改自己的頭像、暱稱與密碼

以全端方式開發

1. 以 Node.js 搭配 Express 框架開發後端，使用 MongoDB Atlas 作為資料庫

2. 以 Handlebars 樣版引擎渲染回傳資料，並搭配 Tailwind CSS 實作 RWD

3. 使用 Git & GitHub 作為版控系統，並部署於 Heroku

畫面截圖

註冊 / 三種方式登入 (申請帳號、Facebook 登入、Google 登入)

收支紀錄總覽（可操作）/ 圓餅圖統計（靜態）

編輯 / 新增紀錄

編輯個人資訊

RWD 版型

其他技術 （補充）

登入 / 登出與狀態驗證：

1. 使用 Passport.js 實作登入/登出驗證程序，分為本地端 Local Strategy、Facebook Strategy、Google Strategy

2. 使用 express-session 實作 cookie-based 搭配 session id 的登入驗證機制

詳細實作可參考 專案紀錄：

記帳 web app 升級！實作登入功能 — (一) 註冊篇

記帳 web app 升級！實作登入功能 — (二) 登入/登出篇

資料操作：

使用 ODM Mongoose 操作 MongoDB ，實作資料的 CRUD

部署：

使用 Heroku 部署應用程式，並將資料庫設置於 MongoDB Atlas 的 Cluster