MTR04-Parlando

目錄

• 起源
• 簡介
• Demo
• 使用技術
• 操作介面
• 專案安裝流程
• 聲明

起源

此專案為 程式導師實驗計畫第四期 的 Final project 藉由實作過程練習課程所學。

團隊成員包含 前端：awuuu0716、vick12052002

後端：huiming 後端專案連結

簡介

Parlando 為一間假想的音響品牌官網，使用 React.js 建立前端頁面，配搭 Node.js 後端 api 的前後端分離網站，使用者身份為訪客、會員、管理員，功能如下：

訪客

• 會員註冊 / 登入

• 瀏覽商品

• 加入購物車 (結帳請先登入)

會員

• 瀏覽商品

• 加入購物車 ( 綠界金流 )

• 購買商品與結帳

• 編輯個人資訊

管理員

• 管理商品 (新增、編輯、上下架、商品文案、商品圖片)

• 管理訂單

Demo

前台

後台

測試帳號

前台也可以自行註冊個帳號試試～

  前台
    帳號：Leo
    密碼：Leo
  
  後台
    帳號：lidemymtr
    密碼：mtr04fp

結帳部分請使用測試用信用卡帳戶：

卡號：4311-9522-2222-2222

安全碼：222

有效年月:請設定大於測試時間。假如您的測試時間在2013年11月26號，該筆交易的信用卡有效年月請設定2013年11月以後，因為系統會判斷有效年月是否已過期，已過期則會回應刷卡失敗。

手機號碼請填真實手機號碼，以便接收綠界簡訊認證碼。

使用技術

• Create React App - 快速建立專案項目環境

• React Router - 路由管理

• Redux Toolkit - 元件狀態管理

• styled-components - 使用 CSS-IN-JS 處理版面配置、動態更改 CSS

• react-bootstrap － 首頁輪播

• quill - 新增、編輯商品文案編輯器，提供簡易網頁排版功能及上傳圖片

• Grid － 瀏覽商品頁採用 grid 排版

• Git － 版本控制、基本上以各個 Feature 或是修正某問題為分支單位，完成功能後在 GitHub 上發起 PR，小組成員互相 code review 後 merge 至 master 分支以便部署

• Responsive web design (RWD) - 網頁排版自適應大部分瀏覽器

• gh-pages - 快速部署前端應用程式

• LocalStorage - 儲存身份認證的 JWT、購物車資訊

• fetch - 與後端 API 資料交換

前端介面

前台 - 首頁

前台 - 商品列表 / 資訊

前台 - 登入 / 註冊

前台 - 會員資訊 / 編輯會員資料

前台 - 查詢訂單

前台 - 關於我們

前台 - 購物車

後台 - 入口 ( 登入 )

後台 - 商品管理

後台 - 新增商品

後台 - 訂單管理

Installing - 專案安裝流程

1. clone this repository

git clone https://github.com/awuuu0716/MTR04-Parlando.git

2. 安裝套件

npm install

3. 在本地端開啟此專案

yarn start

資料引用來源

unsplash

聲明

本網站僅作為個人練習，註冊時請勿使用真實資料。另本網站包含之圖片與內容僅作練習使用，不作任何商業用途。