【專案】BBIN News專案簡介

摘要 — 獨自開發的中型資訊站

正式網址：https://bbin-news.com/

B2B的遊戲新聞網站，客戶可以接收到最新、最即時的產品資訊。主要使用者為公司內部及遊戲的營運商（俗稱業主），是一個具有會員功能的中等規模新聞網站。

工作約6成的時間都在進行此專案，使用Nuxt3(vue3)+TypeScript+pinia。為時1年完成主架構，並接著繼續進行主功能新增與開發。

---

專案中的角色 — 主要的前端工程師

• 20%完成度後接手: 重構以前的程式碼，改為更優的通用組建架構。
• 基於SEO的考量改為Nuxt3。後續進行一系列SEO優化，包括GA4和GTM埋設、文章結構優化，首頁部分的SEO分數高達100分。
• 此專案有少許的單元測試，主要是核心邏輯部分進行測試，以jest作爲測試工具。

主要使用的技術、工具或系統 — Nuxt3 + Pinia + TS

• 包含但不限於以下功能：會員登入、i18n多國語系、留言功能、即時通知、banner輪播、投票功能、彈窗功能、表單填寫…etc
• 技術：
  • 核心：⛰️ Nuxt3(vue3), 🍍 Pinia, TypeScript, @nuxtjs/i18n
  • 其他：Swiper, Pusher, gsap
• 其他執行項目：
  • SEO優化：GA4+GTM的事件埋設、title和descripion相關的meta資料優化…等
  • 單元測試：以jest為主，進行函式的單元測試

成果展現

待補截圖

時程規劃 — 入職後到現在的Main Project

• 為期半個月，完成主要的前端「可抽換頁面」架構撰寫
• 接著半個月，進行vue3的組件與功能開發，並逐步加上TypeScript。
• 後續約半年～一年時間繼續「第二階段」的開發，以「會員系統」為主的新功能開發

---

REF

• https://bbin-news.com/