https://github.com/tzuhanchen/todo-list
實作完整 CRUD 功能的任務管理系統，可顯示或隱藏已完成的任務
https://github.com/tzuhanchen/todo-list
headless-ui material-symbols nextjs tailwind-css typescript
Last synced: 2 months ago
JSON representation
實作完整 CRUD 功能的任務管理系統，可顯示或隱藏已完成的任務
- Host: GitHub
- URL: https://github.com/tzuhanchen/todo-list
- Owner: TzuHanChen
- Created: 2025-02-28T10:05:55.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-08-06T09:35:24.000Z (11 months ago)
- Last Synced: 2025-08-06T11:15:59.797Z (11 months ago)
- Topics: headless-ui, material-symbols, nextjs, tailwind-css, typescript
- Language: TypeScript
- Homepage: https://todo-list-tzuhanchen.vercel.app
- Size: 869 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
ToDo List
實作完整 CRUD 功能的任務管理系統，可顯示或隱藏已完成的任務
## 專案簡介
* 任務管理：新增、檢視、編輯、刪除、標記完成 / 未完成
* 篩選：顯示所有 / 已完成 / 未完成的任務
* 排序：根據創建時間 / 更新時間、舊到新 / 新到舊排序
## 開發工具
前端
* 使用 Next.js (App Router) + TypeScript + Tailwind CSS + Headless UI + Material Symbols 製作頁面與功能邏輯
* 使用 Server Actions 串接自行實作的 REST API
後端
* 使用 TypeScript + SQL 撰寫腳本，連接 Neon Serverless PostgreSQL 建立資料表並新增初始資料
* 使用 Next.js route handler 實作 REST API
版本控制與部署
* 使用 GitHub 管理版本與專案開發流程
* 透過 Vercel 部署專案，並自動取得 GitHub 提交紀錄進行 CI/CD 部署
## 相關連結
[上線網站 DEMO](https://todo-list-tzuhanchen.vercel.app)：首頁、任務頁面、API 文件頁面
[Figma 設計稿](https://www.figma.com/design/qOMq50w0AbuaNXFSReg1df/ToDo-List?node-id=17-188&t=uXS0l8xv0dF2lkYW-1)：SEO 預覽圖、網站圖示、線框圖、元件
[Meta Tags](https://metatags.io/?url=https%3A%2F%2Ftodo-list-tzuhanchen.vercel.app)：可測試各項 SEO 資訊
## 未來規劃
* 搜尋任務
* 清除篩選 / 排序 / 搜尋條件
* 前端所有表單使用 React Hook Form 處理格式驗證、即時顯示錯誤訊息、顯示正在提交狀態
* 後端所有 API 加入 Zod 處理格式驗證、錯誤訊息
* 新增使用者登入 / 登出功能