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

功能架構

• 登入註冊功能
• 使用者
  1. 新增、刪除、編輯、顯示旅行票卡
  2. 拖曳更改狀態
  3. 分類過濾顯示
  4. 搜尋旅行票卡
  5. 個人化排序時間軸
  6. 圖形化行程分布

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

1. 打開你的 terminal，Clone 此專案至本機電腦

git clone https://github.com/yichennnn36/Sowing.git

2. 開啟終端機（Terminal），進入存放此專案的資料夾

cd frontend

3. 安裝 yarn 套件

$yarn install

4. 建立環境變數檔

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

5. 建立專案 production 版本

$yarn build

6. 部署 GitHub，設定部屬 branch 為 gh-pages

$yarn deploy

Contributor and Responsibility

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

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

License

MIT