Category: Front-End

React

html,css,javaScript,TypeScript

Google SSO × Next.js 實作手冊

適用環境:Next.js 14+ App Router、Server action、NextAuth.js v4、TypeScript目標:照本文件從零完成 Google 單一登入(SSO),含登入頁、Session 讀取、未登入導回、登出。最後更新日期:06/14/2026 | 最後更新人員:陳泓毓 完成後的檔案結構…

使用 Next.js 串接 MongoDB

MongoDB 詳細操作: https://www.notion.so/Use-MERN-stack-to-dev-Full-Stack-web-2d59def5443d80a194a5e8d6bf6d740a 我們建立好叢集和集合後,就可以去Next.js 寫上環境設定和連接了! 如果在本地測試都OK,部屬到Vercel就不行了,可能要在Vercel中加上環境變數! 環境設定 可以在專案中的 DataBase & NetWork Access…

使用Vercel快速部屬Next.js

開發時常常遇到:需要讓他人預覽專案、卻又不便直接上傳至正式環境的需求。ngrok是一個方法,之前我有寫過,不過雖然用 ngrok 很方便,但 ngrok 本質上是將本地 Port 映射至公開網址,一旦電腦重啟、進入休眠或不慎關閉程式,連線就會中斷。所以缺點是它必須「一直開著」 因此更穩定的雲端預覽方案,還能順便檢查部署狀況、做後續的流量分析,那麼 Vercel 會是我優先首選! (Vercel 雲端部屬的原因也讓他成為作品集的最佳首選!)…

基於 Firebase 的跨裝置即時同步系統

一個迷你小小專案,練習了一下跨裝置跨頁面的同步,想說那順便寫成一個技術文件好了也順便練習。 1. Project Overview 本專案實作了一套「一端控制、多端同步」的即時互動系統。管理者可透過網頁按鈕,觸發所有連線手機的視覺特效(紅包雨),且無距離限制。於2026春節實作。 2. System Architecture 3. Key technologies and…

114-BIRC前端集訓考核試題

https://eminent-glider-8c3.notion.site/114-BIRC-2959def5443d80f091dbd55ee29d60b7?pvs=74 PDF檔: fb914707-5bb0-42a2-94d6-0a012b43692f_前端集訓考核試題.pdf 已完成2/3的程式碼: https://github.com/Chen11111112/frontEndTest.git 檔案規劃 分成三個主要檔案 加分項 非必要,時間允許再寫。 註解

用react與scss實現打字機效果

自己在練習的時候,突然覺得很像用react解題,於是決定照慣例來寫個解題報告!! 題目 實現 打字 → 停留 → 刪字 → 換下一句 → 重複循環…