YUUNJIEE.COM
jotly-bullet-journal.project
[_][□][✕]
💾jotly-bullet-journal.project×
projects/jotly-bullet-journal
---
project: "Jotly — 線上子彈筆記網站"
summary: 大學的期末作業,用 Django 打造的極簡子彈日記 App。支援 Email OTP 驗證、每日/每週/每月多尺度日誌,以及手繪風格 UI。近期部署上線後,利用 AI 修繕了幾處細節,讓整體功能更完整。
stack: [Python, Django, Bootstrap 5, Nginx, Gunicorn, Cloudflare]
---
Jotly — 線上子彈筆記網站 preview

專案背景

大學「網際網路系統設計」課程的期末作業,自選題目做一個能展示整學期所學的完整 Web 應用。Bullet Journal 是用簡短符號快速記錄生活的筆記方法,Jotly 的目標就是把這套方法搬到網頁上,希望保留它最重要的特質:快速、無干擾

畢業後把它部署到舊電腦上(Nginx + Gunicorn + Cloudflare Tunnel),讓它成為一台 Home Server 持續運行。

核心功能

  • Email-Only 帳號系統:只需 Email 即可註冊,OTP 驗證登入
  • 多尺度日誌:Daily / Weekly / Monthly / Yearly 四種類型,側欄快速切換
  • 手繪風格 UI:自製 CSS 元件搭配 Bootstrap 5,模擬紙筆質感

技術亮點

這是我第一個完整的 Django 專案,第一次感受到 MTV 架構的完整運作。部署時最頭痛的是 ALLOWED_HOSTSCSRF_TRUSTED_ORIGINS,Django 在 DEBUG=False 下對 Host Header 很嚴格,加上 Cloudflare 的額外 Header,遇到幾次 400 / 403 才調對。

學習反思

第一次走完從資料庫設計、後端邏輯、前端介面到生產環境部署的完整流程。如果重做,會換 PostgreSQL 取代 SQLite,並考慮前後端分離。

ONLINE·yuun@blog·v2.7.0