詹琇安

團隊協作專題

    倍而兔募資平台

    網站功能簡介

  • 一般用戶可以瀏覽 / 搜尋募資專案。
  • 贊助方可以贊助募資專案。
  • 贊助方可以檢視自己所有的贊助紀錄。
  • 提案方可以新增 / 編輯募資提案。
  • 提案方可以檢視自己的提案紀錄。
  • 提案方可以查看自己提案專案的募資進度、金額。
  • 提案方可以查看自己提案專案的贊助人員名單。
  • 會員可以修改自己的會員資料。


    協作工具

  • 使用 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 - 個人獨立製作專題
(從企劃、設計到程式執行)

    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

技能

前端
後端
其他