iT邦幫忙

2025 iThome 鐵人賽

0
自我挑戰組

給愛追劇的你:30天互動網站挑戰系列 第 30

Day 30:總整理DramaWeb(追劇互動平台)

  • 分享至 

  • xImage
  •  

作品簡介

這 30 天,我把腦中一直想做的「追劇管理+心得記錄」變成了可用的網站——DramaWeb。它不靠後端、安裝零門檻,用瀏覽器就能完成「找劇 → 收藏 → 寫心得 → 回看紀錄」的完整流程。整體走霓虹+玻璃質感,希望在實用之外,也能讓人一打開就有「想逛一會兒」的感覺。


功能總覽(給第一次使用的人)

  • 劇集清單:卡片顯示封面、片名、類型、評分,一鍵★加入/移除收藏。
  • 類型篩選:愛情 / 喜劇 / 懸疑 / 動作 / 劇情,支援多選、即時過濾。
  • 關鍵字搜尋:輸入片名即時篩;容錯做得寬(空白、全形、簡單模糊)。
  • 排序:依「片名 / 評分」升降序切換。
  • 收藏清單:集中查看已收藏、可直接取消。
  • 心得牆:寫觀後感(評分、暱稱、內容),支援即時驗證、草稿自動保存、載入更多、清空。
  • 狀態保存:收藏與心得都放在 LocalStorage;重整或關掉再回來都在。
  • 小互動:卡片捲動入場、按鈕微光澤、操作 Toast 提示。
  • RWD:手機、平板、桌機都能舒服瀏覽。

使用流程(30 秒上手)

  1. 開首頁 → 先用類型按鈕搜尋快速找到想看的。
  2. 看到喜歡就按「★ 收藏」。
  3. 追完到「心得牆」填表送出(打到一半離開也不怕,草稿會自存)。
  4. 之後到「收藏清單」統一管理,或重看過去的心得。

網頁顯示

主畫面
https://ithelp.ithome.com.tw/upload/images/20251028/20170068krb51xApgk.png
可以按類型找喜歡的劇(可以加入收藏)
https://ithelp.ithome.com.tw/upload/images/20251028/20170068c0eINzs22Z.png
可以用關鍵字找電影
https://ithelp.ithome.com.tw/upload/images/20251028/20170068ZbZWBVFlzC.png
心得牆
https://ithelp.ithome.com.tw/upload/images/20251028/20170068awJRmTADyS.png
留下你的評價
https://ithelp.ithome.com.tw/upload/images/20251028/20170068y1JjpusKWS.png
會顯示在心得牆供大家參考
https://ithelp.ithome.com.tw/upload/images/20251028/20170068lGvBcYOvNe.png


技術亮點(無框架、但不陽春)

  • 資料與狀態:以 LocalStorage 管理收藏/心得;資料結構平鋪,易維護。
  • 互動體驗IntersectionObserver 做卡片入場、按鈕光帶動畫、通用 toast()
  • 容錯搜尋:正規化字串(去空白、全形→半形)+簡易模糊比對。
  • 可及性(a11y)aria-* 標註、aria-currentaria-livefocus-visible;支援 prefers-reduced-motion
  • 效能:圖片 loading="lazy"、Google Fonts preconnect、分頁載入所需 JS。

視覺與品牌(霓虹主題)

  • CSS Tokens(顏色/陰影/半徑)集中控管,換色只改一處。
  • 霓虹漸層+玻璃質感:卡片外圈 conic-gradient 光暈、內容區 backdrop-filter
  • 字體:Outfit(標題)+ Space Grotesk(內文),年輕但好讀。
  • 小貼紙、星標、徽章等元素做輕量裝飾,不干擾資訊。

我學到的事

  • 先把路鋪好:第 1 週只做骨架和功能規格,後面開發真的順很多。
  • 小功能也需要設計:例如 Toast 時機、文案語氣、錯誤訊息位置,這些都是「感受分」。
  • 寧可簡單,但要完整:沒有把 API 串進來是刻意的選擇,確保無後端也能交付「可分享的成品」。
  • 跟自己和解:每天只往前一小步就好;能穩定出成果,比第一天就想完美更重要。
  • 設計不是堆效果:Y2K 很容易過頭;這次把霓虹收斂在卡片與按鈕的關鍵場景上,保留呼吸空間。

未來想做的(下一版 Roadmap)

  • TMDB 或其他資料源,改成真實海報與資訊。
  • 新增「標籤/片單」與「看過 / 想看」兩種狀態。
  • 心得牆支援圖片/片段連結、@標註劇名自動帶入。
  • 一鍵換主題(深色 Y2K / 亮色 Vaporwave)。

結語

把一個想像中的工具做成「我自己會真的用」的作品,這 30 天值回票價。
如果你也常有「劇好多、我到底要看哪部」的困擾,希望 DramaWeb 能讓你的追劇生活更有儀式感,也更輕鬆。下一站,我們把它接上真實資料,一起升級成實戰項目吧。

網址:file:///Users/nanako/Downloads/DramaWeb-Y2K/index.html


上一篇
Day 29:相容性 & 無障礙 & 效能調校
系列文
給愛追劇的你:30天互動網站挑戰30
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言