iT邦幫忙

2025 iThome 鐵人賽

DAY 11
0
Modern Web

FlowNest系列 第 11

Day11_增加留言牆&Navbar

  • 分享至 

  • xImage
  •  

留言牆

想要增加用戶的互動感,所以新增了留言牆的頁面,登入後的用戶可以在專注任務結束後,把貼文發送到留言牆
url就直覺使用/wall
https://ithelp.ithome.com.tw/upload/images/20250922/201684066cMASEPEvT.png

Navbar

因為功能越來越多,讓用戶比較好找到功能~
https://ithelp.ithome.com.tw/upload/images/20250922/20168406YALWaSon5n.png

其它

簡化首頁

之前的太凌亂了,現在把它簡化成描述少一點,感覺比較吸引人
https://ithelp.ithome.com.tw/upload/images/20250922/201684069SbsBhqbtc.png

成果紀錄

  • 做了一個可視化的儀表板,登入後就可以查看自己做了些甚麼
    https://ithelp.ithome.com.tw/upload/images/20250922/201684063vERVMNynY.png
  • 另外一個視條列式的紀錄,使用者可以在兩者間進行切換,看自己比較喜歡看哪種樣式
    https://ithelp.ithome.com.tw/upload/images/20250922/20168406JrTEZJRNFo.png

setup頁面也做了簡化

專注時長只留三個+自訂、移除專注模式的預設選擇(之前太多文字,容易讓人失去焦點)
https://ithelp.ithome.com.tw/upload/images/20250922/20168406f7PiRv4YaM.png

所以今天做了這些

今天把社交入口(/wall)、導覽與首頁/設定的干擾點都收斂,整體體驗更聚焦:先體驗 → 完成後再留痕 → 想分享再上牆。接下來我會把資料流和規則補齊,讓互動與統計更可信。

明日待辦

  • 貼文發布串接:實作 postAchievement(content),從 useSessions 抓「最新完成」發到 posts;欄位含 authorId/authorName/content/imageUrl/createdAt/likeCount

  • 資料規則/索引

    • Firestore 規則:posts 任何人可讀、登入者可寫且 authorId==auth.uidsessions 僅本人可讀寫。
    • 索引:posts(createdAt desc)posts(authorId asc, createdAt desc)sessions(ownerId asc, finishedAt desc)
  • 留言牆清單優化:時間倒序、空狀態提示、卡片樣式統一(Tailwind),預留圖片佔位。

  • 個人專頁統計:數字卡片完成(總次數、總時長),若有時間上簡易趨勢圖(日/週)。

  • 同步回饋:登入後自動同步本機完成紀錄 → 顯示「已同步 X 筆」。


上一篇
Day10_資料成功寫進Firestore Emulator:8080
下一篇
Day12_加強留言牆功能
系列文
FlowNest16
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言