使用 Figma 規劃網頁設計,實作 SSR 的論壇範例(具備 RWD)。
由於無實際架設 Server 及資料庫,僅開發環境能操作各項功能。
「風向,疑?」是一個線上論壇,名稱取自諧音「風向儀」,旨在緩解在網路上發表意見或故事時,容易遭遇到與他人意見不合、價值觀不同等情況,產生負面反響的問題。
在「風向,疑?」中,所有發文都要求完全匿名,並且無法直接留言或對話。相反地,使用者只能透過正面或負面的表態去表示贊同或反對發文者的看法,以讓發文者能概略地知道自己的想法是否與大多數人相同。
除了在輸入主要問題的區域表達清楚自己的看法外,使用者可以在文章內容中鋪陳或描述問題的前提故事,進一步讓讀者了解文章所討論的背景和情境。
每篇發表出去的文章右上角會顯示「順風」、「逆風」或是「無風」,用以顯示發文者所分享的想法是否受到大多數人的認同。
其中「順風」代表大多數人與發文者的看法相似,「逆風」代表大多數人與發文者的看法相反,而「無風」則代表目前看法與發文者相似和相反的人數持平。
「風向,疑?」的目標是營造一個更加和平、公正、理性的網路討論空間,讓使用者能夠更加自由地發表自己的想法,同時避免不必要的爭論和攻擊。
增加使用 Nuxt3 框架及 SSR 技術的經驗。
Desktop
- 首頁(未登入)
- 登入畫面
- 含表單驗證
- 註冊畫面
- 含表單驗證
- 主頁(登入後)
- 我的貼文:頁面內會顯示使用者自己發的貼文
- 已表態的貼文:頁面會顯示使用者按過表態的貼文
- 已儲存的貼文:頁面會顯示使用者儲存過的貼文
- 發文範例
- 文章顯示(無表態)
- 文章顯示(正面表態)
- 文章顯示(負面表態)
- 對文章的其他操作
- 本人發文才能刪除貼文
- 不提供修改文章,因為可能造成到目前為止的表態結果失去參考性
- 點擊貼文左上角的編號可以跳轉至此文章頁面
- 點擊右下角的分享按鈕可將網址分享到外部程式
- 刪除貼文的確認視窗
- 個人資料修改(信箱)
- 根據 Tag 搜尋文章
- 支援單個或多個以空白分隔的 Tag 搜尋
- 直接點擊貼文上的 Tag 也能達成搜尋
- 下載需要的套件
pnpm install
- 啟動 dev server(系統開發環境)
pnpm dev
- Nuxt 3
- Nuxt Icon
- Pinia
- Pinia Plugin Persistedstate
- TypeScript
- Tailwind CSS