網站連結：https://supr.link 專案介紹：https://docs.google.com/presentation/d/12UIUbfx40CHYqd3KFqq6u4f70GwqG2MdQPSbvwUAw4g/edit?usp=sharing 【專案簡介】 SuprLink 超級連結是一個縮網址服務。功能涵蓋縮短網址、點擊追蹤、個人與團隊型態的使用者管理、廣告投放、圖表數據呈現和dashboard 形式的管理後台 【專案架構】 此專案前端由我單獨負責，架構上採用 Nuxt SSR(Express) + TypeScript + Sass 構建 後端則有一台 Express + TypeScript + MongoDB 作為 Restful API Server，並有另一台 Express 專門乘載縮網址跳轉的流量 【TypeScript 規範的 Data schema】 專案使用 TypeScript 除了用以型別檢查外，更重要的是描述了資料從 API response 到 Vuex Store 再到 Component data 所經歷的 Schema 變換。這在開發上一定程度能省下使用 Postman 觀察 Response 精力 【搭建於 Tailwind 上的小型 UI 框架】 CSS 上一大特色為使用 Tailwind 而非完整的 UI 框架。這麼做是因為專案重視 Mockup 的還原度，從圓角、各式顏色到字體字型等皆有要求，這種情況下使用 UI 框架容易造成綁手綁腳的情況 Tailwind 有著極簡單純的設計風格與極高彈性的客製化能力，並提供 @apply 裝飾器快速繼承內建的 class。 我使用這項優勢配合 BEM 命名法，為專案打造了專屬、並且複用性高的小型 UI 框架 【高度彈性的表格組件】 另外此專案大量使用一個看似簡單，實則非常不好實作的表格 (見投影片 3) 其困難點有四：列與列之間須有間距、每張表格都有不同的可縮放欄位及固定欄位、RWD 下無須左右滑動瀏覽、Component 需複用 這些限制剔除了傳統的 Table 實作與 Flex 實作，最後我採用的方式為 Grid Layout 配合 Vue Slots 前者用以處理欄位的可縮放範圍和列間距，後者用以實現完全客製化的欄位內容。最終設計成如下的簡潔 API： 【多語系與黑暗模式】 開發中的 Feature。多語系主要利用 i18n 實現，黑暗模式則是將會動態變換的顏色使用 CSS Variable 描述，並將此顏色設定融入到 Tailwind 框架來實現。