Hidden Gem is a platform leads you to create and find attractions.

1. 鄒柏軒 Po-Hsuan Tsou (Steward) 2024 / 3 / 3
Hidden
Gem
記錄每
一
趟
生
活冒險
A platform leads you to create and
fi
nd
attractions
旅圓

2. ✏ About Me 鄒柏軒 Po-Hsuan Tsou
• Co-founder as a Designer/MKT of
several startups (coupon app,
campus printing, private cheives
matching ) 曾與開發者網路創業 ( O2O 共
享經濟私廚平台、列印服務、集點 App )
• Freelancer: Graphic Design ,
Branding , UI Design, EN Translation
接案者 /
自
媒體，視覺設計背景 (平
面
、
品牌)、介
面
+ 翻譯
• Open Source community design
contributor 開源圈設計志
工
• Applied Languages, Bachelor of Arts,
NTUST in Taiwan 台科應
用
外語系畢

3. Triptrip Story-Package • The Projects started as a physical design package containing
maps, stories & souvenirs about a mini trip. We made 200 of them
and distributed them across the famous co
ff
ee shop settlement
in Taipei, Taiwan.
• 走啦！TripTrip 故事旅遊包 • 本專案來
自
一
個在台北咖啡街：溫州街區實體發放 200 盒故事旅遊包的
實體設計專案，稱之為故事旅遊包。裡頭包含故事、地圖跟紀念品。

4. ✏ 主要功能：景點記錄分享平台 Main Feature: Spot Noting Platform
• Take notes of what you’ve been as
a “Spot”.
• Create a spot with a pin and its
description
• Like, Copy other’s spots
• Integrate Google Places
• 記錄去過的景點圖
文
• 發佈「景點地圖」配
文
• 喜愛 / 複製他
人
的景點
• 整合 Google Map 社群資源

5. 🦌 輔助功能 Sub-Features
• 尋找附近的 Google 景點
•
支
援 KMZ / GeoJson 匯入
•
支
援路徑規劃
• 拖拉景點
小
互動 Drag-n-Drop Mini Game
• 鑄造 NFT Minting
• Finding nearby Google Places
• Import KMZ/GeoJSON
fi
les from Google
Map
• Routing Machine
🦌Others 更多…

6. ⛰ 🎤 Google 整合 Integration
• KMZ 為 Google Map 創建的 「我的地圖」所下
載
• GeoJson 為「我喜愛的景點」由 Google
Takeout 匯出
• KMZ
fi
le comes from “My Trip” in your Google
Map.
• GeoJson
fi
le comes from “/takeout” liked places in
your Google Account.
• Google Places API
• 500 公尺步
行
範圍由近
至
遠 From near to far
• 顯
示
於地圖上 display on map while clicking
• 映射資料欄位 mapping all the data

7. 地圖套件
• Native 原
生
(Vanilla JS)
• 路徑規劃 Routing
• Routing Machine
• Mini Map
• Geo Search

8. 使
用
流程 How to Use
路徑規劃
註冊 / 登入 探索
他人的地圖
他人的會員頁
我的地圖
儀表板
新增景點
編輯景點
刪除景點 匯入景點
查看景點
附近 Google 景點
附近 Google 景點
準備發佈
創作地圖文
將景點加入發佈區
已發佈
地圖
搜尋景點
查看景點
搜尋地圖

10. 查看景點
我的地圖
儀表板
已發佈
地圖
複製景點 喜愛景點
喜愛地圖
+1/-1
+1
新增景點
編輯地圖
點擊作者
會員頁
追蹤
+1/-1
他人的會員頁
搜尋會員
路徑規劃
探索 搜尋地圖
熱門地圖
最新地圖
總景點複製數
總景點喜愛數
地圖喜愛數
＋
社群互動 Community

12. 全局管理 Global State Management
AuthContext
Email/Google/ 第三方
Clerk
Firebase Auth
mapSlice
Redux Toolkit
googlePlacesStore
KmzPlacesStore
zustand
Store
• useContext
• Redux toolkit
• (zustand)

13. 重
用
元件
Reuse the Elements
AlertModal
Confirm
Alert
Loading Alert
等待/警告/確認
DropImage
圖片上傳
Drag-n-Drop
GooglePlaces
打景點 API
FilesImport
KML / KMZ / GeoJson
匯入地圖
Loading / Alert / Confirm Uploading Images
Fetching Google Places
Importing KMZ/KML &
GeoJson from Google
Maps

14. dynamics
ReactQuill
MapComponent
Leafet map demo server
markdown 編輯器插件
• 客
戶
端載入 Client Side
Loading
• Markdown Editor

15. Web3 NFT Minting 鑄造
• 串接 Web3.js (Integrating Web3)
• 使
用
HashLips NFT 合約
• 以 Piñata 將圖片上星際網路 (ipfs://) 連接
Metamask
• 上鏈 Polygon
• 以 OKX Web3 Wallet 查看
• Use HashLips O
ffi
cial NFT Demo Contract
• use Piñata to upload the image to IPFS.
• Connect to Metamask
• Mint it on Polygon
• View the NFT at OKX Web3 Wallet

16. Hosting
Environment
DNS
Markdown
Editor
3rd-party
Firestore
Storage
Auth
DB Auth
hidden-gem.xyz
SignUp
SIgnIn
技術選
用

17. 鄒柏軒 Po-Hsuan Tsou (Steward)
Github@steward379
Maildev@stewardtsou.com
CakeResume @stewardtsou
LinkedIn @stewardtsou

18. DEMO