Home
Skills
Works
Github
Contact
詹琇安
Anne's Portfolio
詹琇安
團隊協作專題
倍而兔募資平台
網站功能簡介
一般用戶可以瀏覽 / 搜尋募資專案。
贊助方可以贊助募資專案。
贊助方可以檢視自己所有的贊助紀錄。
提案方可以新增 / 編輯募資提案。
提案方可以檢視自己的提案紀錄。
提案方可以查看自己提案專案的募資進度、金額。
提案方可以查看自己提案專案的贊助人員名單。
會員可以修改自己的會員資料。
協作工具
使用 Notion 作為專案管理工具。
使用 Git 協作管理程式碼。
使用 Figma 繪製線稿圖及設計稿。
使用 Whimscal 繪製溝通流程圖及規劃。
使用 Hackolade 規劃資料庫及建立 ERD 關係圖。
使用 UptimeRobot 定時確認連線狀態,確保網站運行狀況。
使用 Discord 頻道做為日常溝通及開發提醒 (GitHub notify) 的管道。
前台使用技術
使用 Vue3 Composition API 開發。
使用 Nuxt.js 開發 SSR 網站以符合 SEO 需求。
使用 Pinia 來做狀態管理。
使用 TypeScript 預做型別檢查,並且建立更嚴謹的程式碼撰寫風格。
RWD 響應式網頁設計。
應用 components 去管理重複的元件。
使用 Tailwind CSS 來美化網站。
使用 ESLint 管理程式碼風格。
使用 GitHub Actions 來完成自動化部屬。
部署在 Vercel。
後台使用技術
自行規劃資料庫關聯及撰寫。
開發使用 Node.js,並搭配 Expresss 來建立網頁伺服器和路由 。
資料庫使用 MongoDB 來儲存資料,並搭配 Mongoose 套件來操作資料的存取。
cors 去處理跨域請求。
驗證使用 jwt 機制。
註冊及登入使用 Google 第三方登入。
串接藍新金流的服務來處理贊助結帳的部分。
使用 Firebase 作為網站的圖床儲存服務 。
使用 Swagger 建立 REST API 文件。
使用 TypeScript 預做型別檢查,並且建立更嚴謹的程式碼撰寫風格。
使用 GitHub Actions 來完成自動化部屬。
部署在 Zeabur / Render。
個人專題
DTNS - 個人獨立製作專題
(從企劃、設計到程式執行)
DTNS - 每字美句每個你喜歡的瞬間
網站功能簡介
分享牆可以檢視公開的文章、並依據不同的主題文章分類。
會員及非會員都可以新增文章及留言問題。
會員可以修改及刪除自己的文章。
非會員僅能看到有公開分享及非下架的文章。
管理員可以新增使用者資料。
管理員可以下架文章及回復問題。
檢視模式有黑暗模式可以選擇切換
前台使用技術
使用 Vue-Cli 開發專案。
使用 Vue-Router 套件管理路由。
使用 VueMaterial UI 框架。
RWD 響應式網頁設計。
應用 components 去管理重複的元件。
使用 Sass 預處理器管理 CSS。
使用 ESLint 管理程式碼風格。
使用 Axios 串接後端 API 。
PWA (Progressive Web App) 設定。
Vue
VueMaterialUI
RWD
Axios
Sass
ESLint
PWA
後台使用技術
自行撰寫資料庫。
開發使用 Node.js + Express。
資料庫使用 MongoDB + Mongoose 套件。
cors 去處理跨域請求。
驗證使用 jwt 機制。
註冊及登入使用 Line login API。
部署在 Heroku。
Node.js
Express
MongoDB
Mongoose
cors
jwt
Line login
Heroku
作品
技能
前端
後端
其他
前端
後端
其他