MG MOTOR React 品牌網站

Goal

呈現我在品牌網站、互動 UI 與資料串接上的前端實作能力。

Scope

• 建立 MG MOTOR 品牌展示網站，呈現車款資訊、品牌內容與 conversion-oriented CTA。
• 完成 RWD layout、主要視覺區塊與前後端資料串接。
• 維持可部署的 frontend / backend repository split，方便展示與維護。

Architecture

• React frontend 負責品牌頁面、車款展示與 responsive interaction。
• Node.js / Express API 提供資料來源，PostgreSQL 管理後端資料。
• Netlify 承載 frontend，backend repository 獨立維護 API service。

Key Features

• 把品牌視覺語言轉成前端元件與可重用版型。
• 在不同裝置下維持一致的資訊層次與 CTA 能見度。
• 串接 Express / PostgreSQL API，讓內容不只停留在靜態展示。

Problems

• 品牌展示頁需要兼顧視覺吸引力、手機閱讀與 CTA 可見度。
• 車款資料與品牌內容若完全寫死，後續調整與 API 展示價值會不足。

Solutions

• 以 React component sections 拆分 hero、content、vehicle detail 與 CTA 區塊。
• 保留 Express / PostgreSQL backend path，讓作品能展示完整資料整合能力。

Result

完成可部署的品牌網站，兼顧版面呈現、互動流程與實際資料輸出。