在上篇文章中，我已稍微提及了本次專案所使用的驗證工具——Zod。Zod 是專為 TypeScript 設計的資料驗證工具，就像人體的免疫系統，確保資料結構在...
前言 專案建置的最後一哩路，就是讓整個應用程式上線，而在我們的專案小作品中，需要一個平台讓我們部署，並公開網站。Next.js 的母公司 Vercel 提供了一...
Cloudinary 是一個雲端媒體管理平台，主要提供需要大量處理及優化圖片及影片的開發者管理及優化服務，可以藉由平台上傳、儲存及管理資源，並且讓媒體資源在不...
吃水果好麻煩，買來之後洗完還要削皮去籽再切一切，但我還是想要天然的維生素礦物質啊!那為什麼我不買果汁喝就好？在使用 Redux 跟 Context API 的...
NextAuth.js 是專為 Next.js 設計的身份驗證套件。提供了一種簡單的方法來添加 OAuth、電子郵件和其他多種身份驗證方式，我們就不需要編寫繁...
關於容器化 在科技迅速發展的今日，部署的技術也經歷了不少的變革。從早期的物理伺服器到現代的容器化技術，每個階段都是為了追求更高效率和更好的資源利用率。 在傳統...
TailwindCSS 與 Headless UI 就像用原型食物去做烹煮，而不是經過非常多製程的加工食品。當我們使用它們時，我們得到的是最基本、最純粹的成分，...
前言 SEO，是搜尋引擎最佳化 (Search Engine Optimization) 的簡稱，是一套策略技術，幫助提升網站或網頁在搜尋引擎裡的曝光度。主要的...
前言 在上一章節，我們對請求數據進行了深入的驗證。透過多層篩選和檢查，對於不同的驗證結果，我們已經設定了相對應的錯誤回應。但是，我們還沒有詳細探討在哪些特定情境...
本文同步刊載於 我的個人部落格 一、Flow Chart 是什麼？ 流程圖(Flow Chart)是一種圖形化表示流程或過程的工具，通常用來展示一个系统、流...
前言 經過從設計到後端的細緻實作後，我們現在進入了至關重要的前端實作階段。在這個階段，我們不僅要將畫面與資料結合，更要為我們的應用程式注入靈魂。前端不僅僅是視覺...
React-Beautiful-DnD 是由 Atlassian 開發，也就是 Trello、Slack、Jira 的母公司，但這邊要澄清一下，雖然 Trel...
react-hot-toast 是一個專為 React 設計的輕量級通知提示（toast）套件。預設有成功、失敗、loading(Promise) 三種類型的...
前言 Middleware 在網頁應用程式中的角色，猶如機場的安檢機制。每當我們在機場搭乘飛機時，必須經過嚴格的安檢程序，以確保旅程的安全和暢通。同理，每一個進...
前言 系列文到二十五天已經大致開發完成，但完成後會開始各種修改及優化，其中也包括效能的優化。效能對於前台網站是非常關鍵的。當網站載入速度緩慢時，可能會導致用戶流...
完成成本的估算與定價的思考後，接下來我要說明使用者測試的計畫。目前吃吃記帳的 MVP 已經完成，我希望可以有實際的使用者協助確認，這個產品是否運行正常，以及是不...
前言 在開發前端應用時，不良的錯誤處理可能導致使用者困惑、挫折，甚至選擇放棄使用你的應用。所以在專案中，我們透過 try-catch 語句捕捉潛在錯誤，並使用...
React-Hook-Form 是一個輕量的 React 表單驗證和管理套件，核心是運用 React Hooks API 來進行管理狀態和表單操作，讓 Rea...
食物進入身體後，經過消化系統分解為能量儲存：葡萄糖給予快速能量，而脂肪提供長期儲存。考慮資料庫時，我們也會選擇適合的“能量”來源。像葡萄糖那樣，有些資料庫適合...
在使用者成功註冊、並且角色為店家時，需先經過電話驗證才可進行刊登服務項目供顧客預約，此故事情境在這篇文章可以回顧，所以今天將重點放在電話驗證的實作上。 使用 J...
為什麼選擇 Line 作為使用者平台 在進行設定前，我想回顧一下，為什麼選擇 Line 作為 Bot 的使用平台。在前面的人物誌有提到，吃吃記帳的目標使用者是每...
前言 營養師不開菜單系列來到第三十天，首先謝謝有觀看到最後一天的讀者，也恭喜堅持到最後一天的你和我。在部署之後，應用程式上線後，我們就這樣結束了嗎？還是我們可...
接續上一篇文章，繼續將 Firebase Authentication 電話驗證的串接完成！ 關於 Firebase Authentication 的電話驗證...
昨天介紹完 NextAuth.js 的基本設置，但我們還需要取得第三方驗證廠商的 ID 及金鑰，每個提供者的申請方式不同，有複雜也有簡單。在 NextAuth...
Prisma 就像人體中的消化酵素 (enzyme)。就如消化酵素幫助我們分解和吸收食物中的營養，將大的複雜分子轉化為我們身體容易吸收的小分子，Prisma...
在這篇文章中，我想分享在學習與製作Side Project的過程中，如何將GPT當作我的工作夥伴。對於熟悉生成式 AI 的使用者來說，這部分內容或許相對基礎，但...
除了使用電子郵件與密碼註冊以外，考量到有些使用者不喜歡管理太多組帳號、密碼，所以今天就將開通的 Google, Facebook 帳號註冊功能串接到網站裡吧！關...
會員管理終於來到最終章，因為其他功能都是 CRUD，而且也因為 Firebase 將使用者認證這塊切得很細，所以花較多的篇幅來介紹。然而雖然使用者在註冊成功當下...
經過前一篇文章的操作與設定，我們已經將 Firebase 引入至 React 專案中，今天就來串接資料庫吧！ 串連 Firestore database 首先先...
本文同步刊載於 我的個人部落格 NoSQL 在 Firebase 數據庫中是如何應用的？ 在前一篇章節中，我們稍微認識了 NoSQL 這個新朋友，所以現在讓...
iThome鐵人賽
看影片追技術
看更多
ysl0628
Annie
orianyang