今天是鐵人賽的最後一天，在這30天中我們嘗試用了Galileo AI完成設計稿、react建立一個專案、使用antd完成基本畫面的刻板、leaflet放入地圖、redux完成互動的元素，再將程式碼上傳到github，最後將網站成功部屬在Vercel上，那今天我們再最後來簡單複習一下這些東西吧!

1. React：

React 是我們專案的核心框架，負責構建整個網站的用戶界面。React 的組件化架構讓你能夠輕鬆地拆分旅遊網站中的各個部分，如地圖、地標列表等，並通過 props 和 state 來管理狀態變數與參數。而我們是使用npm create vite@latest來建立一個APP。

2. Redux：

Redux 主要用於管理全局的應用狀態，特別是涉及到用戶的互動和地圖標記的持久化。Redux 提供了集中化的狀態管理，使我們能夠輕鬆追蹤地圖中的地標、用戶操作狀態（如收藏地標)，這為整體應用的維護和擴展帶來了便利。在初期遇到了狀態傳遞過度複雜的情況，但隨著對 Redux-thunk 或 Redux Toolkit 的使用，簡化了異步操作，並與 Redux-Persist 搭配，實現了地圖數據和用戶資料的持久化。

3. Leaflet：

Leaflet 作為輕量級的地圖庫，為你的旅遊網站提供了互動式地圖展示功能。Leaflet 提供了多樣化的地圖顯示功能，如標記地標位置、顯示用戶的當前位置、以及添加導航路徑。

4. Ant Design (AntD)：

Ant Design 作為 UI 框架，幫助你快速構建美觀且高效的用戶界面。AntD 的組件庫讓你能夠快速實現複雜的表單、按鈕、導航欄等視覺元素，提升了網站的設計質感和使用體驗。其提供的 Grid 系統讓你能夠靈活地進行頁面佈局，並確保響應式設計的優雅呈現。

5. GitHub：

GitHub 為我們的版本控制提供了穩定的基礎。使用 Git 進行版本控制，通過分支和 Pull Request 管理不同功能的開發，並且通過 GitHub Actions 實現了自動部署和測試的工作流程。也可以讓我們清楚得了解每次push更新上去的程式碼有做了什麼更動，若在本地端出現一些錯誤，也可以輕易地回到上一個版本做復原的動作，可以說是相當的方便，希望大家都能好好學會github的操作流程。

6. Vercel：

Vercel 是你網站的主機平台，負責將專案部署到線上，並提供了卓越的持續集成和部署流程。Vercel 的無縫整合讓你能夠快速將 React 應用部署上線，並且提供了自動化的 CI/CD 工作流程，每當你推送新代碼到 GitHub，Vercel 就會自動部署最新版本的網站。在部屬到vercel上面之前，我們還要調整 vercel.json 與Babel 配置，詳情可以複習<Day 28：將網站佈署到Vercel>。

總結：

這次 IT 鐵人賽專案中，我們成功運用了 React 作為基礎框架，通過 Redux 進行全局狀態管理，利用 Leaflet 實現互動式地圖功能，並通過 Ant Design 提升了網站的用戶體驗。借助 GitHub 和 Vercel，建立了完善的版本控制與自動部署流程。當然這只是一個基本的前端的動態網站實作，其實距離一個完美的旅遊網站還差的遠，後端登入系統、資料庫等等都是我們這30天無法做出來的，這邊也只是利用簡單的範例讓大家對這些常用的技術有初步的認識。30天的鐵人賽挑戰也終於告一段落，很高興能完成這次的挑戰，希望大家會喜歡我們這次的教學，有任何疑問都歡迎在下方留言一起討論，那我們就下次有緣再相見了!