IHealth 是一個販售保健食品的購物網站，使用 react 框架，發佈在 firebase 上
demo 網址: https://e-commerce-fea9f.web.app/
會員測試帳號
email: [email protected]
密碼：123456
信用卡測試號碼 : 4242 4242 4242 4242
| 技術 | 功能 |
|---|---|
| hooks | 使程式碼更簡短、易於理解和在組件間更有重複使用性 |
| context | 可以將資料傳到直接傳送到需要的元件，不用經過中間層層傳遞 |
| reducer | 使程式碼更整齊，把所有功能結合成一個函式，使邏輯集中化 |
| react router dom | 實做單頁面應用程式(SPA)，讓使用者始終在同一個頁面，根據輸入的網址來呈現不同的網頁內容，網站不會重整，因此內容的切換更快速、更順暢，帶來更好的使用者體驗 |
| firebase | 使用 firebase deploy發佈, firestore資料庫, authentication會員系統, stripe extension金流 |
| localstorage | 將網頁中的資料儲存在使用者的瀏覽器當中，購物車紀錄得以被永久保存 |
| RWD響應式網頁 | 能因應不同裝置螢幕大小而自動調整網頁圖文內容和排版，給使用者最佳瀏覽畫面 |
| styled component | CSS-In-JS 的函式庫，可以在 JSX 中撰寫 CSS code |
- 依價格高低排列、分類商品的選項。
- 搜尋欄可輸入文字找到相關商品。
- 多種篩選選擇，每個選項不是寫死在 html 裡，而是用 new Set 搜集商品資料不重複的值產生的動態選項。
const getUniqueVals = (array, property) => {
const uniqueValues = new Set(array.map((item) => item[property]).flat());
return ["全部", ...Array.from(uniqueValues)];
};
可以在購物車裡調整商品數量，數量調整範圍在 1 至庫存數量之間，也可以刪除整項商品，或是清空整個購物車。
使用 firebase Authentication 做出會員系統，有註冊和登入功能，登入後會在右上角顯示使用者名稱，及擁有購買功能。
使用 firebase stripe extension，左側顯示購買的商品清單，右側可輸入購買人資料。
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent