iT邦幫忙

2024 iThome 鐵人賽

DAY 1
0
Modern Web

30天打造個人簡易旅遊網站系列 第 1

Day 1 : 專案介紹

  • 分享至 

  • xImage
  •  

自我介紹

大家好,我是正在就讀國北教大玩遊所碩士一年級的學生,本次鐵人賽我將要製作一個簡單的旅遊規劃網站,在這30天我會使用Vite作為React本地開發的伺服器,並且使用UI生成式工具來產出視覺稿,接著會使用Ant Design來協助完成畫面切版,並在過程中熟悉React的開發技能,其中會藉由建立自己的行程清單以及操作自製地圖瀏覽景點等功能來帶大家了解如何進行狀態變數的管理,也會嘗試串氣象局的API,最後,再將完成的專案部署至Vercel上.整個系列會涵蓋很多內容,而其中有很多知識點要獨立成一個完整30天的系列也都不是問題,所以本次鐵人賽主要只會針對重點做說明,並盡量說明詳細,若有說明不全的地方也歡迎底下留言交流呦~

使用到的工具

程式編輯:VS Code
版本管理:Git,Github
套件管理:npm,yarn
前端框架:React
開發伺服器:Vite
網頁伺服器:Vercel
CSS框架:Ant Design

30天鐵人賽流程規劃

Day 1 : 簡介
Day 2 : 環境建置
Day 3: Git基本知識
Day 4:UI生成式工具介紹-Galileo AI
Day 5:UI生成式工具介紹-Uizard AI
Day 6:UI定稿及設計Sitemap
Day 7: React Components概念
Day 8: 在React中使用CSS Modules
Day 9:在React中使用元件參數props
Day 10:JSON 資料處理
Day 11: 使用Ant Design實作RWD
Day 12:React-router 基礎介紹
Day 13:製作Navbar製作
Day 14:頁面切版實作-1
Day 15:頁面切版實作-2
Day 16: leaflet地圖套件安裝與簡介
Day 17: 將旅遊景點加到收藏/在JSON檔匯入景點資訊
Day 18: 美化地圖座標與自定義圖示
Day 19: 介紹 Redux 基本概念與安裝 Redux Toolkit
Day 20: 使用Redux將景點加入收藏
Day 21: 利用搜尋列查詢景點
Day 22: 製做自己的行程清單(一)
Day 23: 製做自己的行程清單(二)
Day 24: 串接氣象局API(一)
Day 25: 串接氣象局API(二)
Day 26: 將資料暫存在瀏覽器中
Day 27: 常用debug工具分享
Day 28: 註冊GitHub與Vercel並發布網站
Day 29: 成果展示:旅遊網站的主要功能與演示&專案回顧懶人包
Day 30: 鐵人賽心得分享與專案總結


下一篇
Day 2 :環境建置
系列文
30天打造個人簡易旅遊網站30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言