iT邦幫忙

sideproject30相關文章
共有 80 則文章
鐵人賽 SideProject30 DAY 30

技術 Day30:完賽不是終點,而是另一個起點

是的,如同標題所說,目前專案確實完成度沒有很高,但無論進度如何,今天就在挑戰的最後一天進行部屬吧! 如何使用 Vercel 部屬 進到 Vercel 官網註冊...

鐵人賽 SideProject30 DAY 29

技術 Day29:當顧客開始訂位

倒數2天,把握時間繼續努力! 製作月曆元件 昨天製作了顧客視角的服務項目詳細頁後,今天依照原先的 Wireflame 設計線稿,刻出可供預約的日期時段區塊,這部...

鐵人賽 SideProject30 DAY 28

技術 Day28:React 與 Firebase 的 CRUD 串接(二)

店家新增完服務項目後,顧客就可以開始查看預約了!所以今天將開發重點放在顧客角度會看到的頁面都實作完成。 組裝列表頁面(顧客視角) 串接讀取文件的 API i...

鐵人賽 SideProject30 DAY 27

技術 Day27:React 與 Firebase 的 CRUD 串接(一)

倒數第4天的挑戰,是完成一套新增讀取編輯刪除(CRUD)的頁面組裝與串接,話不多說直接開始! 組裝列表頁面(店家視角) 串接讀取文件的 API import...

鐵人賽 SideProject30 DAY 26

技術 Day26:實作 Firebase Authentication 電話驗證(二)

接續上一篇文章,繼續將 Firebase Authentication 電話驗證的串接完成! 關於 Firebase Authentication 的電話驗證...

鐵人賽 SideProject30 DAY 25

技術 Day25:實作 Firebase Authentication 電話驗證

在使用者成功註冊、並且角色為店家時,需先經過電話驗證才可進行刊登服務項目供顧客預約,此故事情境在這篇文章可以回顧,所以今天將重點放在電話驗證的實作上。 使用 J...

鐵人賽 SideProject30 DAY 24

技術 Day24:實作會員資料更新

花了兩天稍微了解 FireStore Database 的 CRUD 後,今天著手將我使用先前做好的表單元件們,組裝成店家資料維護頁面,但一直卡在明明登入了 u...

鐵人賽 SideProject30 DAY 23

技術 Day23:操作 Firestore Database 的資料(二)

延續上一篇,今天繼續研究 Firestore Database 的資料操作, 溫馨提醒:以下內容看到的 showNotify 是我個人封裝使用的提示彈窗,並不...

鐵人賽 SideProject30 DAY 22

技術 Day22:操作 Firestore Database 的資料(一)

今天是組裝頁面的一天,也將 Firestore Database 的 CURD 先從文件學習到在 console 控制台中練習一遍。 溫馨提醒:以下內容看到的...

鐵人賽 SideProject30 DAY 30

技術 營養師不開菜單的第三十天 - 蛻變成為網頁工程師

前言 營養師不開菜單系列來到第三十天,首先謝謝有觀看到最後一天的讀者,也恭喜堅持到最後一天的你和我。在部署之後,應用程式上線後,我們就這樣結束了嗎?還是我們可...

鐵人賽 SideProject30 DAY 29

技術 營養師不開菜單的第二十九天 - Next.js 搭配 Vercel 實現分鐘級一鍵部署

前言 專案建置的最後一哩路,就是讓整個應用程式上線,而在我們的專案小作品中,需要一個平台讓我們部署,並公開網站。Next.js 的母公司 Vercel 提供了一...

鐵人賽 SideProject30 DAY 21

技術 Day21:在 React 專案中使用 Firebase Authentication 實作會員管理(四)

會員管理終於來到最終章,因為其他功能都是 CRUD,而且也因為 Firebase 將使用者認證這塊切得很細,所以花較多的篇幅來介紹。然而雖然使用者在註冊成功當下...

鐵人賽 SideProject30 DAY 28

技術 營養師不開菜單的第二十八天 - Next.js in Docker,跟上容器化技術

關於容器化 在科技迅速發展的今日,部署的技術也經歷了不少的變革。從早期的物理伺服器到現代的容器化技術,每個階段都是為了追求更高效率和更好的資源利用率。 在傳統...

鐵人賽 SideProject30 DAY 27

技術 營養師不開菜單的第二十七天 - Next.js SEO 極致優化,為網站提升曝光度!

前言 SEO,是搜尋引擎最佳化 (Search Engine Optimization) 的簡稱,是一套策略技術,幫助提升網站或網頁在搜尋引擎裡的曝光度。主要的...

鐵人賽 SideProject30 DAY 20

技術 Day20:在 React 專案中使用 Firebase Authentication 實作會員管理(三)

除了使用電子郵件與密碼註冊以外,考量到有些使用者不喜歡管理太多組帳號、密碼,所以今天就將開通的 Google, Facebook 帳號註冊功能串接到網站裡吧!關...

鐵人賽 SideProject30 DAY 26

技術 營養師不開菜單的第二十六天 - 運用 Next.js 內建工具,打造專案效能優化

前言 系列文到二十五天已經大致開發完成,但完成後會開始各種修改及優化,其中也包括效能的優化。效能對於前台網站是非常關鍵的。當網站載入速度緩慢時,可能會導致用戶流...

鐵人賽 SideProject30 DAY 19

技術 Day19:在 React 專案中使用 Firebase Authentication 實作會員管理(二)

在上一篇文章中,我成功將使用電子郵件與密碼註冊會員之功能串接,接下來是取得該註冊會員在 API 中的資訊,除了我們可以傳值進去,Firebase 也會自動產生一...

鐵人賽 SideProject30 DAY 18

技術 Day18:在 React 專案中使用 Firebase Authentication 實作會員管理(一)

好,目前已將 Firebase 的服務都設定的差不多了,接下來就是一一實作將功能與頁面結合。 提示訊息元件 在實作之前,我們來建立一個提示訊息元件,因為串接功能...

鐵人賽 SideProject30 DAY 25

技術 營養師不開菜單的第二十五天 - Next.js 前端實戰 - 頁面及請求的錯誤處理

前言 在開發前端應用時,不良的錯誤處理可能導致使用者困惑、挫折,甚至選擇放棄使用你的應用。所以在專案中,我們透過 try-catch 語句捕捉潛在錯誤,並使用...

鐵人賽 SideProject30 DAY 24

技術 營養師不開菜單的第二十四天 - 前端實戰 - 登入/上傳圖片/更新順序/複製連結

前言 接續著上一篇的前端實作分享,我們介紹完 NavBar 的核心功能邏輯以及響應式設計,這篇文章中我們的焦點將轉向「登入/註冊頁面」,深入挖掘使用者認證的細節...

鐵人賽 SideProject30 DAY 23

技術 營養師不開菜單的第二十三天 - Next.js 前端實戰 - 狀態管理及 RWD

前言 經過從設計到後端的細緻實作後,我們現在進入了至關重要的前端實作階段。在這個階段,我們不僅要將畫面與資料結合,更要為我們的應用程式注入靈魂。前端不僅僅是視覺...

鐵人賽 SideProject30 DAY 22

技術 營養師不開菜單的第二十二天 - Next.js Middleware 實作權限及 CSP,建起護城河

前言 Middleware 在網頁應用程式中的角色,猶如機場的安檢機制。每當我們在機場搭乘飛機時,必須經過嚴格的安檢程序,以確保旅程的安全和暢通。同理,每一個進...

鐵人賽 SideProject30 DAY 17

技術 Day17:開啟 Firebase 的 Google 與 Facebook 之登入與註冊功能

我們在上一個篇章中完成了信箱的驗證設定後,今天就可以接著進行 Google 與 Facebook 的部分,設定完成後即可讓使用者以自己 Google 與 Fac...

鐵人賽 SideProject30 DAY 16

技術 Day16:串接 Firebase 的資料庫與設定信箱驗證

經過前一篇文章的操作與設定,我們已經將 Firebase 引入至 React 專案中,今天就來串接資料庫吧! 串連 Firestore database 首先先...

鐵人賽 SideProject30 DAY 21

技術 營養師不開菜單的第二十一天 - Next.js 後端實戰 - 錯誤處理及 Security Headers

前言 在上一章節,我們對請求數據進行了深入的驗證。透過多層篩選和檢查,對於不同的驗證結果,我們已經設定了相對應的錯誤回應。但是,我們還沒有詳細探討在哪些特定情境...

鐵人賽 SideProject30 DAY 20

技術 營養師不開菜單的第二十天 - Next.js 後端實戰 - Model 與 API

前言 在設計完畫面後,也大概確認了整個專案的頁面功能,在設置完資料夾結構後,就是進入前端後端實作的階段,大部分的頁面我是前後端功能同步進行,但為了避免畫面凌亂,...

鐵人賽 SideProject30 DAY 19

技術 營養師不開菜單的第十九天 - Next.js 實作 - Link In Bio Tool 畫面設計與整體規劃

前言 在前15篇章節中,已經詳細介紹了專案中使用的套件及在專案中的具體實作方式。接下來的文章將深入探討專案的細節和商業邏輯。考慮到這是一個從零開始建立的產品,我...

鐵人賽 SideProject30 DAY 15

技術 Day15:快速於 React 專案引入 Firebase 服務

於前一篇的前置準備完成後,我們已在網路空間新增一個 Firebase 專案了。然而因為刻畫面耗時較長,也希望在刻畫面的同時能夠同時串接資料(就不要為了頁面呈現而...

鐵人賽 SideProject30 DAY 18

技術 營養師不開菜單的第十八天 - 使用 React-Hot-Toast 實現各種狀態通知

react-hot-toast 是一個專為 React 設計的輕量級通知提示(toast)套件。預設有成功、失敗、loading(Promise) 三種類型的...

鐵人賽 SideProject30 DAY 17

技術 營養師不開菜單的第十七天 - 在 Next.js 中使用 Cloudinary CDN 管理媒體資源

Cloudinary 是一個雲端媒體管理平台,主要提供需要大量處理及優化圖片及影片的開發者管理及優化服務,可以藉由平台上傳、儲存及管理資源,並且讓媒體資源在不...