---
# System prepended metadata

title: 專案架構紀錄
tags: [Basics]

---

# 專案架構紀錄

# 2021 (ts 全面導入)
1. **使用 Domain-driven design，以 feature 為單位分類**
2. **資料夾名稱，請參照 [命名習慣](/7PhlEQ8KQj6vgVOqaR1LHg)**

參考專案：
1. [Rytass Official (js, jsx)](https://github.com/Rytass/Rytass_Official_Site_2020)
2. [MMAGYM (ts, tsx)](https://github.com/Rytass/MMAGYM_System)
3. [Miaobei (ts, tsx)](https://github.com/Rytass/Miaobei_System)

### Client 端
* assets (圖片)
* src (主體)
    * core (核心功能)
        * contract
            * components
            * hooks
            * utils
            * ...
        * file-upload
        * ...
    * ui (純 UI components)
        * Button
        * ...
    * routes
    * shared (跨功能)
        * components
        * forms
        * hooks
        * utils
        * ...
### 共用
* common
    * contract
        * errors
        * utils
        * types
        * ...
### Server 端
還沒有通用架構但基本上也是用 domain 去分資料夾。controller, service, db 三個部分的資料夾上下層關係可能視專案決定哪些東西共用來調整。

* db
    * entities (ORM 的 entity/model 定義，中型以上專案建議使用 [Data Mapper Pattern](https://orkhan.gitbook.io/typeorm/docs/active-record-data-mapper) 且不要順便定義 DTO。)
    * migrations
* src
    * user
        * dto
            * ...
        * service.ts
        * controller.ts
    * ...

---
# 2020 (js, jsx, React hooks 時期)
1. **以資料型態為單位分類**
2. **mac 不區分大小寫，commit 時需注意**

參考專案：
1. [NTCH OFFICIAL](https://github.com/Rytass/NTCH-Official)
2. [NTCH](https://github.com/Rytass/NTCH)

### Client 端
* **Constants (不變的資料/常數)**
    * config.js
    * mock.js
    * ... 
* **Elements (元件/純 UI)**
    * Button.jsx
    * Input.jsx
    * ...
* **Pages (頁面/router)**
    * AboutUsPage.jsx
    * MemberPage.jsx
    * ...
* **helper (共用函數)**
    * url.js
    * image.js
    * ...
* **Forms (表單元件(有綁定 form methods))**
    * FormInput.js
    * ...
* **hooks (React hooks)**
    * usePrevValue.js
    * useWindowResize.js
    * ...
* **Queries (Apollo gql)**
    * Member.gql
    * About.gql
    * ...
* **Mutations (Apollo gql)**
    * Member.gql
    * About.gql
    * ...
* **static (模板/圖片/Global css)**
    * index.html
    * artibox.css
    * images
        * image01.png
        * ...
    * ...
* **locales (多國語系)**
    * en
        * landing.json
        * ...
    * tw
        * landing.json
        * ...
* **actions (redux 特有)**
    * about.js
    * ...
* **reducers (redux 特有)**
    * about.js
    * index.js
    * ...
* **stories (storybook 特有)**
    * input.stories.js
    * ...

### Server 端
* **constant (常數)**
* **errors (錯誤訊息)**
* **helper (共用函數)**
* **keys (私有 key，通常會被 git ignore 掉)**
* **models (data model)**
* **resolvers (data resolver)**
* **routes (RESTFul route)**
* **schema (resolver schema)**


###### tags: `Basics`