自我介紹

嗨嗨，我是 2魚，目前在高雄的一家新創公司擔任全端工程師。
沒錯，你沒聽錯，我曾經是空軍，就是隊伍介紹那個修飛機的 ✈️。
去年，我從 Tibame 結訓後，成功轉職成為前端工程師。這次，我號召了另外三位同學，一起來參加鐵人賽。與其說是來坐牢，不如說是來磨練技術、刷經驗啦！畢竟人多好辦事，動力也會 up up 😎。

為什麼要參加鐵人賽？

今年初，我參加了六角學院的 Node.js 直播班，從此一頭栽進了後端的世界。這次參加鐵人賽，我決定趁熱打鐵，分享一個完整的專案開發流程。能夠獨自包辦前端和後端，光是想到就覺得超級興奮！🔥
我的目標很簡單：透過這次分享，不僅能夠加深自己的技術功力，更希望能讓更多的前端夥伴們了解後端的奧妙。畢竟，知己知彼，百戰百勝嘛！

專案的靈感來源

目前我住在高雄租屋，每天滑社群軟體時總會看到一堆可愛又搞怪的小鳥。看著看著，突然萌生了想養一隻鸚鵡的念頭。鼓起勇氣問了房東，結果...嗯，你們猜對了，被果斷拒絕了 555。
但是！工程師的特質就是：遇到問題，想辦法解決。既然不能真的養鸚鵡，那就來寫個程式吧！於是，我決定為未來的鸚鵡們（或許是你的？）做一個以鸚鵡食物計算機為主軸的網站。

30天專案目標及說明

接下來的 30 天，我將帶大家從零開始，一步步打造出一個專案的簡化版本。我們的旅程會涵蓋全端開發的各個面向，讓你對整個開發流程有全面的認識：

1. 專案發想與規劃（Day 1-2）：
   • 確定專案主題和目標
   • 探討前後端分離架構
   • 選擇適合的技術（Node.js, Express, MongoDB, Nuxt3）
2. 設計階段（Day 3-6）：
   • 繪製網站地圖（Whimsical）
   • 設計使用者流程圖（Whimsical）
   • 製作線稿圖（Figma）
   • 完成高保真 UI 設計（Figma）
3. 後端開發（Day 7-21）：
   • MongoDB 資料庫設計與部署（MongoDB Atlas）
   • 使用 Firebase Storage 管理圖片資源
   • 搭建 Express.js 伺服器
   • 實作 CRUD 操作的 RESTful API
   • 使用 Postman 進行 API 測試
   • 實作錯誤處理和中間件
   • 使用 Swagger 生成 API 文檔
   • 開發鮮食計算和飲食建議的核心算法
   • 使用 Render 部署後端服務
4. 前端開發（Day 22-28）：
   • 設置 Nuxt3 開發環境
   • 安裝並配置必要的套件（Pinia, Tailwind CSS 等）
   • 實作響應式導航欄和頁面佈局
   • 開發鮮食計算機介面
   • 製作互動式聯絡表單
   • 整合後端 API，實現數據的讀取和提交
5. 部署與總結（Day 29-30）：
   • 透過 Vercel 部署前端網站
   • 回顧整個開發過程，分享心得與學習經驗

每一天的內容都會緊密相連，就像是在拼一幅巨大的拼圖。我們會循序漸進，從基礎概念開始，逐步深入到更複雜的技術實現。今天學到的知識，明天就能立即派上用場。這個過程不僅能幫助你掌握各種技術，還能讓你了解如何將不同的技術整合在一個完整的專案中。

誰適合跟著一起學習？

這個系列適合：

• 有基礎程式知識，想挑戰全端開發的朋友
• 對專案開發流程感興趣，想一窺究竟的新手
• 非本科背景但想轉職當工程師，不知道該選哪個領域的迷惘者
• 或者單純想來看看我到底在搞什麼飛機的好奇寶寶們

完整網站連結

在這 30 天的鐵人賽中，我們會一起打造一個簡化版的鸚鵡食堂網站。這個版本會包含核心功能，讓大家能夠理解整個開發流程。
如果你想一窺這個簡化版本的樣貌，可以點擊這個連結：鐵人賽版本連結
另外，我也想和大家分享我之前完成的完整版本。這個版本包含了更多功能和細節，可以讓你看到這個專案的全貌：完整版本連結
接下來的 30 天，我們會一起探索這個專案的簡化版本，了解每個環節背後的思考和實作過程。準備好和我一起踏上這趟充滿驚喜的程式之旅了嗎？繫好安全帶，我們要起飛囉！✈️💻