Final Project

[st-quando]

• Example web: http://demo.posthemes.com/pos_ecolife/layout2/en/

• Build 2 pages: Home page (just the content in rectangle) and cart

• Boilerplate: https://github.com/st-fe-rd/b-react-typescript

• API: domain: https://us-central1-react-final-project-169bd.cloudfunctions.net getCagetories: GET /getCagetories getProducts: GET /getProducts

• Refer:

[st-quando]

LOGIC:

• Chỉ gọi api getCategories 1 lần duy nhất khi mới vừa vào app, sau đó save vào redux và xài lại result đó.

• mỗi products sẽ có trường type, value là 1 hoặc 2 hoặc 3 hoặc 4. Dựa trên result vừa save, mình bind name của Categories vào cho list products.

• Mỗi products sẽ có 1 trường sales: để sale giá tiền sản phẩm (gia tiền thể hiện ở price)

  Nếu là text có dấu - và ký tự dạng số và % thì sẽ sale theo % Nếu là text có dấu - và ký tự dạng số thì sẽ trừ bớt tiền Text ko hợp lệ ko sale

• Khi hover vào sản phẩm thì sẽ có nút giỏ hàng, bấm vào đó thì sẽ add vào cart. Sử dụng redux để handle cart đó toàn app.

• Trang cart có thể:

tăng, giảm số lượng sản phẩm có trong cart. xóa sản phẩm khỏi cart Thành tiền phải được tính đồng bộ liên tục.

ADVANCED LOGIC:

• Viết 1 comp để handle việc loading cho từng comp gọi api.

• List products phải thể hiện đúng và đủ trạng thái

  Khi đang gọi api => show ra loading (dựa vào comp loading đã viết) Khi đã gọi api xong => empty => show ra "there is no data" Khi đã gọi api xong => có data => show ra products. TUYỆT ĐỐI KHÔNG CÓ trường hợp đang gọi api mà vẫn show ra "There is no data"

• Deploy web app lên firebase

• CI/CD đơn giản khi tạo tag từ master thì dự án tự deploy.

[st-quando]

PHASE 2

• Implement Login section.

  UI: https://htmldemo.hasthemes.com/ecolife-preview/ecolife/login.html API coming soon

• Logic: Nếu đã login thì sẽ sử dụng được tính năng "Add to WishList" Xem được Wishlist page