購物車和結帳網站-Alpha-Shop

此專案使用 React 開發，目的功能為實現購物車、結帳相關畫面動態呈現

Vercel 託管網站 : https://alpha-shop-react.vercel.app/

功能-Features

• 點擊下一步或上一步可以切換到三個不同的結帳頁面以供輸入必要資料，分別為 : 寄送地址、運送方式、付款資訊
• 在運送方式頁面的選擇會影響購物籃的運費不同，並且與商品總金額相加
• 在付款資訊的頁面中輸入完成資料點擊下一步後，可以在 DevTools 的 console 中看到使用者輸入的信用卡資料和結帳總金額
• 購物籃可以點擊 + - 按鈕進行個別商品數量、金額加減，並且總金額會動態呈現在小記欄位
• 深色模式 (點擊右上角月亮或太陽符號)
• RWD(響應式網站)，在螢幕寬度小於 576px 的情況下會變為符合手機螢幕的排版設計，並且 NavBar (導覽列) 的顯示與不顯示變成點擊左上角 Bars 圖案來進行切換

環境建置-Environment SetUp

• Visual Studio Code
• Node.js
• React.js

安裝-Install

1. 開啟終端機 (Terminal)，複製 (Clone) 此專案至本地電腦

git clone https://github.com/Ollieeryo/Restaurant_list.git

2. 進入此專案資料夾中

3. 安裝 npm 套件

在 Terminal 輸入 npm install

5. 使用指令執行專案，啟動伺服器

在 Terminal 輸入 npm start

6. 當終端機 (Terminal) 顯示以下字串，代表已成功啟動此伺服器

webpack compiled successfully

7. 現在可以在瀏覽器中輸入localhost:3000，並且開始瀏覽和使用此專案網站

專案畫面-Screen Photo

專案開發人員-Contributor

Oliver Liao