---
tags: shortit
---

# Short It!
> 2023 年 2 月全端工程師 專案實作

[TOC]

---

> Short It! 是一個FOSS縮網址服務

## 相關連結

- [GitHub頁面](https://github.com/stanley2058/shortit)
- [Short It! 專案頁面](https://short.stw.tw)
- [Short It! 設計文件](https://hackmd.io/@stanley2058/short-it-sdd)
- [Short It! 開發日誌](https://hackmd.io/@stanley2058/dev-log)

## 必要需求
- [x] 專案需要使用 Git 管理專案，並公開至 GitHub
- https://github.com/stanley2058/shortit
- [x] Git commit 訊息需符合 Conventional Commits，並使用英文撰寫
- https://github.com/stanley2058/ShortIt/commits/main
- [x] 專案須包含 README，其中描述專案的安裝、建置、使用，包含的功能與操作方式
- [x] 前端使用 React.js 16 以上實作整個頁面與元件
- Short It!使用React 18
- [x] 後端使用 Node.js 14 以上
- Short It!使用Node 18
- [x] 使用者可以填入一段網址，會產生一段短網址
- [x] 使用者可以瀏覽短網址，服務會將短網址重新導向到原始網址

## 非功能需求
- [x] 使用 TypeScript 4.3 以上實作
- 前後端接使用TypeScript 4.9
- [x] 後端使用任一套 ORM 搭配任一套 RDBMS
- 後端使用Prisma與Postgresql
- [x] 整個 React App 使用 Functional Component
- [x] 使用套件檢查程式碼風格 (例如：JavaScript Standard、ESLint)
- 前後端都使用ESLint
- [x] 專案需要能被公開瀏覽使用 (例如使用 Heroku)
- https://short.stw.tw
- [ ] 單元測試
- [x] 後端重要功能有做單元測試
- [ ] E2E 測試
- [ ] 開發時全程使用 TDD
- [x] 後端非API邏輯的部分有採用TDD
- [ ] 整合 CI/CD 流程
- [x] 整合GitHub Actions自動建置並推送Docker Image到Registry
- [x] 透過Webhook在GitHub Workflow Run事件自動重新部署

## 功能需求
- [x] 需要驗證網址有效
- 前端有UI驗證與回饋
- 後端API有擋非URL的請求
- [x] 使用者可以使用密碼註冊、登入、登出
- 透過Auth0處理
- [x] 使用者可以新增、建立、更新、刪除多個短網址
- 登入的使用者可以編輯、瀏覽與刪除自己建立的短網址
- [x] 短網址重新導向的過程使用快取 (可暫時避免向資料庫查詢)
- 所有DB查詢都使用Redis快取(除了findMany)
- [x] 使用者可以知道短網址瀏覽次數
- 登入後可在管理短網址頁面看到
- [x] 服務會避免短網址重複重導向到相同網址
- 前後端都會驗證並防止使用者新增或編輯一個短網址指向ShortIt本身
- [x] 從短網址拿到原始網址的 Open Graph Metadata （標題、描述、圖片）
- [x] 使用者可以自訂 Open Graph Metadata（標題、描述、圖片）
- See [設計議題 - 重新導向運作方式](https://hackmd.io/aXzFyaNLQQyzHhW8LCWKPA?view#%E9%87%8D%E6%96%B0%E5%B0%8E%E5%90%91%E9%81%8B%E4%BD%9C%E6%96%B9%E5%BC%8F)

## 其他功能
- [x] 網站導覽
- [x] 社群網站登入 (Auth0)
- [x] 暗色主題