黃予岑KEN
← 所有專案
課程專題已完成

轉盤禮物選擇系統

進階 Web 程式設計 — 課程專題 · 2023

Next.jsReactJavaScriptFirebase

系統概述

轉盤禮物選擇系統是課程「進階 Web 程式設計」的期末專題,由團隊以兩個月時間,使用初學的 Next.js 技術開發完成。系統設計初衷是協助在節日送禮時感到猶豫的人做決定——使用者可先從禮物清單中挑選候選禮物,再透過轉盤隨機抽出最終選擇,並直接連結至蝦皮評價最好的店家一鍵購買,大幅縮短從選禮到購買的時間。

功能介紹

首頁 — 禮物清單

首頁無須登入即可供大眾使用,系統的目的在於快速協助有需要的人,決定在節日中可以送給親人、伴侶或孩子什麼樣的驚喜。每件商品附有圖片、分類標籤、價格,以及蝦皮賣場的快速購買連結,直接跳轉至評價最好的店家,從選禮到購買一鍵完成。

首頁 — 禮物清單
深色模式

深色模式

系統支援深色模式切換,深色背景以 JavaScript 動畫製作流星特效,可以創造出更多的可互動流星以增加畫面趣味性,不同於一般靜態背景,創造更豐富的視覺體驗。

轉盤選禮

使用者可在商品頁面自由挑選覺得合適的禮物,不限數量與種類加入候選清單。確認後按下中央的「開始」按鈕,轉盤便會隨機旋轉,最終指針停留的位置即為本次選定的禮物,兼具娛樂性與驚喜感。

轉盤選禮
轉盤結果頁面

轉盤結果頁面

轉盤停止後,背景播放煙花動畫,畫面跳出轉盤結果與「立即購買」按鍵,點擊後直接跳轉至該商品的蝦皮購買頁面,且評價最佳的店家連結已預先整合。點擊任意處即可關閉結果畫面。

商品管理(管理員)

管理員登入後進入後台管理介面,可對商品進行新增、修改、刪除等完整 CRUD 操作,商品列表以直觀的方式呈現所有資訊,流程清晰。

商品管理(管理員)
單項商品管理

單項商品管理

管理單項商品時,提供即時圖片預覽功能,管理員可在上傳前確認照片效果。頁面底部也提供上傳狀態確認,確保資料儲存成功。

← 回到專案列表