簡介

✨ DEMO✨

• 仿 GOOGLE KEEP 服務的全端記事 App，歡迎點選登入頁 立即體驗！
• 你可以使用社群帳號註冊登入，並設定偏好的主題或檢視模式。
• 記事提供一般與清單雙編輯模式，可以新增自訂分類標籤，並設定記事顏色、排序任務、上傳圖片、新增預覽網址等...
• 能固定重要或封存不想顯示的記事，並提供多種搜尋篩選模式，簡單歸類輕鬆找。

使用工具

前端

• React - 前端架構使用 hook 進行畫面與資料處理
• React router dom - 管理頁面路由
• styled-components - 元件化樣式並搭配 CSS 變數管理
• Axios - API 呼叫與管理
• Redux Toolkit - 處理記事與標籤資料
• react-contenteditable - 記事內文編輯
• autolinker - 擷取內文網址連結
• react-beautiful-dnd - 任務清單拖拉與排列
• react-loading-skeleton - loading 畫面製作

後端

• Express - 後端架構
• mongoose - 連接操作 MongoDB Atlas 資料庫
• bcryptjs - 加密處理密碼
• Passport.js - 註冊與驗證使用者權限
• passport-jwt + jsonwebtoken - 信箱密碼登入註冊會員
• passport-google-oauth20 - OAuth 登入註冊會員
• multer - 處理用戶上傳圖檔
• cloudinary - 儲存用戶上傳圖檔

特點

💡 註冊登入

• 提供自訂帳密與 Google 帳號二種登入方式
• 自動登入、自動登出功能（token 期限為 10 天）

💡 客製化樣式

• 固定 ⇄ 收縮 選單
• 格狀 ⇄ 清單 檢視模式
• 日間 🌞 ⇄ 夜間 🌚 檢視模式

💡 新增編輯自定義分類

• 側欄編輯標籤鈕可以新增、刪除、修改分類標籤
• 編輯記事可搜尋特定標籤，若無符合標籤可直接於記事新增

💡 新增記事

• 新增記事標題、內文
• 選擇記事背景色 🎨
• 選擇記事標籤 🏷️
• 切換清單模式，拖拉排序、勾選、刪除清單項目
• 新增、刪除預覽連結 🔗
• 上傳、刪除圖片 🖼️
• 固定記事 📌
• 封存記事 📁

💡 編輯、刪除記事

• 點選記事卡片外層可以編輯顏色、標籤、建立副本、封存、刪除記事
• 點開卡可以編輯卡片內容，新增記事的功能這裡通通能做

💡 多元搜尋模式

• 關鍵字搜尋：搜尋記事標題、內容、清單列表
• 類型搜尋：搜尋包含清單/包含圖片/包含連結之記事
• 標籤搜尋：搜尋自定義分類標籤
• 顏色搜尋：搜尋特定顏色記事