Sowing 是一個結合 To-do list、排序時間軸以

Sowing

Sowing 是一個結合 To-do list、排序時間軸以及圖形標示紀錄的網站，能讓使用者以輕鬆、簡易的方式記錄屬於自己的台灣旅行紀錄票卡。

旅行票卡如同一顆種子，以播種的概念來呈現，將票卡分為播種中（Sowing）、澆水中（Watering）、發芽成長中（Sprouting），如同待辦清單中的 Todo、Doing、Done 方式表現，並將旅行目的地以圖形化的方式呈現，標示出未來或是過去所到過的地區。

Contents Demo Technologies 功能架構 Features 專案架構（frontend） Installing Contributor and Responsibility License Demo

專案網站： Sowing

Test User：sowing01 Password：sowing01 Technologies Frontend React React hook React Redux Toolkit React Router React DnD React animations PropTypes Styled-components Ant Design Responsive Web Design(RWD) Single Page Application(SPA) Version Control: Git, GitHub Package Manger: Yarn Backend Nodejs AWS APIGateway AWS Lambda serverless MySQL 功能架構 登入註冊功能 使用者 新增、刪除、編輯、顯示旅行票卡 拖曳更改狀態 分類過濾顯示 搜尋旅行票卡 個人化排序時間軸 圖形化行程分布

Features Board - 新增旅行票卡

Board - 編輯旅行票卡

Board - 刪除旅行票卡

Board - Drag & Drop

Board - 分類按鈕、搜尋功能

Time - 旅行紀錄時間軸、搜尋功能

Map - 旅行地點分布圖、以地區分類的旅行票卡

專案架構（frontend）

frontend ├── .env # 環境變數存放處 ├── .gitignore ├── yarn.lock ├── package.json ├── public │ ├── index.html │ └── sowing.ico └── src ├── components │   ├── Column │   ├── FilterButton │   ├── Footer │   ├── Header │   ├── Input │   ├── Loading │ ├── Login │ ├── MapInformation │ ├── Menu │ ├── Register │ ├── Search │ ├── Ticket │ ├── TicketEditor │   └── Timeline ├── constants # 包括 global style、共用 style 以及 error、success 訊息統整 ├── hooks # Custom hooks ├── images ├── pages │ ├── Board # 後台 Bulletin board 頁面 │ ├── IntroPage # 前台介紹頁／登入畫面／註冊畫面 │ ├── Map # 後台 Map 旅行地點分布圖 │ └── Time # 後台 Time 旅行紀錄時間軸 ├── redux │ ├── reducers │ │ ├── ticketReducer.js # 處理後台新增、刪除、取得、編輯、拖曳等事件 │ │ └── userReducer.js # 處理登入、註冊事件 │ └── store.js # configureStore ├── App.js ├── api.js # 所有的 api，使用 fetch ├── index.js └── utils.js # 共用功能與 initialData Installing 打開你的 terminal，Clone 此專案至本機電腦

git clone https://github.com/yichennnn36/Sowing.git 開啟終端機（Terminal），進入存放此專案的資料夾

cd frontend 安裝 yarn 套件

$yarn install 建立環境變數檔

在專案根目錄新增環境變數檔案 .env，填入專案所需之所有環境變數。 建立專案 production 版本

$yarn build 部署 GitHub，設定部屬 branch 為 gh-pages

$yarn deploy Contributor and Responsibility

Yichen Liu：確立專案規格（User Story、Wireframe）、前端功能開發

PCC：建立資料庫架構、後端功能開發

License

MIT