MIXXIN
Vibe Coder 入門課 · 作業索引
Lunch Squad · 午餐揪團

作品索引

全班的「今日午餐揪團」頁面,顯示每個人最新的版本。這裡不比名次、不打分數,只給每個人一則亮點、一則建議和一則小挑戰的個人建議。這裡顯示最新一堂的講評,點頭像或名字進個人頁看歷次講評。

第 4 堂講評
亮點
三項全做到,而且是全班唯一審查完全挑不出問題的一份;隨機推薦會先看「這家店到底有沒有評分」再決定要不要顯示星等,抽到沒評分的店也不會跑出怪東西;跟團人數改用「原本的數字+我加了幾個」來算,畫面重複整理也不會愈算愈歪。
小挑戰
跟 AI 說「PR 描述裡『換裝置會不會不見』和『共用清單那支 API 要不要密碼』這兩題還沒答,幫我補完整」。
開啟作品 →
第 4 堂講評
亮點
三項全做到,兩個最容易踩的雷都避開了——跟團紀錄用店名當名字(不是用「第幾張卡」),評分是空的那 24 家店也正確不顯示星等。
小挑戰
跟 AI 說「幫我把 markJoined 裡寫入 localStorage 的地方也包上 try/catch,跟讀取的地方對稱,這樣無痕模式點『我要跟』才不會噴例外」。
開啟作品 →
第 4 堂講評
亮點
三項全做到;清單總數是真的去數抓回來的資料(不是寫死數字),每次重整都重新抽一家,抽到沒評分的店也擋掉了。
小挑戰
跟 AI 說「把跟團狀態的 key 從卡片在頁面上的第幾個(index)改成用店名當 key,這樣以後清單順序換了,紀錄也不會跟著跑到別家店」。
開啟作品 →
第 4 堂講評
亮點
三項全做到,是審查完全挑不出問題的兩份之一;抽到的店沒有評分時,「沒有這個欄位」和「欄位是空的」兩種情況都擋掉了。第 3 堂給的小挑戰(進度條加百分比)也做了,0 人顯示 0%、滿團顯示 100%,兩個極端都正確。
小挑戰
跟 AI 說「幫我在 PR 描述加一句:這個 localStorage 是存在瀏覽器本機的,換電腦或換瀏覽器就看不到之前的紀錄」。
開啟作品 →
第 4 堂講評
亮點
三項全做到,兩個最容易踩的雷都避開——用店名當紀錄名字,抓到沒有評分的店顯示「尚無評分」而不是空白或怪符號。
小挑戰
跟 AI 說「幫我把三個寫 localStorage 的地方(saveJoined 跟兩個 fetch 成功後的 setItem)都包上 try/catch,避免無痕模式跳例外」。
開啟作品 →
第 4 堂講評
亮點
三項全做到;抽到沒有評分的店老實顯示「評分未提供」,跟團紀錄用穩定的按鈕代號而不是「第幾張卡」,重整後不會對到別家店。
小挑戰
跟 AI 說「saveJoinedState 裡的 localStorage.setItem 也包一層 try/catch,寫入失敗時至少提醒一聲,不要讓例外整個丟出來」。
開啟作品 →
第 4 堂 · 尚未交件
亮點
第 3 堂那份 MIXXIN 品牌儀表板(登入者資訊、即時統計、「我發起」標籤)是全班最有「真正產品」感的一份,這個底子很好。
小挑戰
跟 AI 說「幫我把『我要跟』的人數和已加入狀態存進 localStorage,重新整理頁面後要維持」——先把這一件做完,另外兩件是同一套路。
開啟作品 →
第 4 堂講評
亮點
加了「依人數自動排序」這種會動到卡片順序的功能,卻仍然用店名當紀錄名字——這一步很多人會踩(順序一變,用「第幾張卡」存的紀錄就會對到別家店),你沒踩到。Clay 風格改版和人數分級上色也讓頁面辨識度明顯提高。
小挑戰
跟 AI 說「幫我把 saveJoinState、天氣和清單那兩個 fetch 裡的 localStorage.setItem 都包一層 try/catch,寫入失敗時不要影響畫面顯示,也不要被誤判成抓取失敗」。
開啟作品 →
第 4 堂講評
亮點
把「不然今天吃這家?」做成一個彈窗——含店家照片、評分、推薦菜色,是全班把這個小功能做得最完整的一份。天氣和跟團持久化都到位。
小挑戰
跟 AI 說「我的頁面已經有 fetch 全班清單,但畫面顯示的總數和隨機推薦還是用寫死的 meals 陣列。請改成用抓回來的 locations:總數用 locations.length,隨機也從 locations 抽」。
開啟作品 →
第 4 堂講評
亮點
三項全做到,兩個最容易踩的雷都接住了(用店名當紀錄名字、沒評分的店不顯示星等)。額外做的店家分類色彩也留了預設值,不會有店家顯示成空白。
小挑戰
跟 AI 說「幫我把 savePersistedState 裡的 localStorage.setItem 包上 try/catch,跟 loadPersistedState 的寫法對齊」。
開啟作品 →
第 4 堂講評
亮點
三項全做到,用店名當紀錄名字、沒評分的 24 家店也正確不顯示星等。
小挑戰
跟 AI 說「幫我在天氣、地點清單、跟團紀錄這三個寫 localStorage 的地方都包上 try/catch,寫入失敗不要影響畫面顯示、也不要跟『抓取失敗』搞混」。
開啟作品 →
第 4 堂講評
亮點
天氣做得比作業要求細——天氣代碼轉成中文和 emoji、抓當前小時的降雨機率,抓不到時退回顯示上次的資料並標「(快取)」而不是壞版。兩個存進抽屜的地方也都有防護,這點全班只有四個人做到。
小挑戰
跟 AI 說「把 teams 陣列改成用 fetch 讀 https://vibe-course.mixxin.tw/submissions/lunch-locations.json,總店數用抓回來的 locations.length 顯示,並加一個隨機抽一家的『不然今天吃這家?』區塊,沒有評分的店不要顯示星星」。
開啟作品 →
第 4 堂講評
亮點
三項全做到,兩個最容易踩的雷都避開。第 3 堂那個「非中午打開整頁按鈕變灰像壞掉」的問題也真的解決了——你加的展示模式開關確實能繞過收單時間;而且刻意不把這個開關存進 localStorage(避免忘記關),這是有意識的設計取捨,不是漏做。
小挑戰
跟 AI 說「幫我把 saveJoinedKey 裡寫 localStorage 的地方也包一層 try/catch,跟讀取那邊一樣,無痕模式失敗時不要讓存檔動作整個中斷」。
開啟作品 →
第 4 堂講評
亮點
三項全做到;隨機推薦用「這個評分是不是一個數字」來判斷,正確排除了沒有評分的店。順手把第 3 堂留下的內部標記(資料來源、可信度)清掉,卡片乾淨很多,而且沒有弄壞點開的詳情視窗。
小挑戰
跟 AI 說「幫我把 saveJoinState 寫入 localStorage 的地方也包上 try/catch,並確認無痕模式下點擊不會拋出未捕捉例外」。
開啟作品 →
第 4 堂講評
亮點
三項全做到、審查挑不出問題,而且是唯一把「抓資料 → 存抽屜 → 失敗就退回上次」抽成同一套流程給三個資料共用的;PR 描述還具體舉出「揭諦蔬食插隊到最前面」這個真實情境,說明為什麼紀錄要用店名而不是編號——這是全班最好的一份 PR 說明。
小挑戰
跟 AI 說「PR 描述裡我只提到『免金鑰』和『重整後不會不見』,幫我補一句換裝置會不會不見、還有全班清單那個 API 需不需要密碼或金鑰」。
開啟作品 →