使用 React.js 串接 Recipe Search API 製作食譜網站,並部屬至 Firebase
API ID & KEY 放在 .env 檔內,可至 GIthub/README 查看
食譜網站連結(Firebase):
https://recipeapp-reactjs-22d3c.firebaseapp.com/
Recipe Search API:
在 Search bar 輸入食材關鍵字,如 "tomato"
以及選擇健康標籤選單
則可獲得 "tomato" 相關食譜
由於螢幕錄影無法擷取到健康標籤選單內容,這邊附上選單縮圖
點擊圖片即可查看食譜
查詢其他食材關鍵字,如 "broccoli"
專案技術
- Node.js v16.18.0
- axios v1.2.1
- react v18.2.0
- react-dom v18.2.0
- react-scripts v5.0.1