MyTree Journal

Simple, extensible tree record-keeping.
Explore the docs »
View Demo · Report Bug · Request Feature

Table of Contents

1. About The Project
   • Built With
2. Project Structure
3. Getting Started
   • Prerequisites
   • Installation
   • Environment Variables
4. Usage
5. Nginx Deployment
6. Roadmap
7. Contributing
8. License
9. Contact
10. Acknowledgments

About The Project

MyTree Journal คือระบบบันทึกข้อมูลต้นไม้แบบ full-stack ที่ออกแบบมาให้ใช้งานง่าย ขยายต่อได้ เหมาะกับงานวิจัย งานอดิเรก หรือการปลูกในระดับเล็กถึงกลาง
ประกอบด้วย:

• Backend: Django REST API (ดูโค้ดใน trees/)
• Frontend: Next.js + React 19 (ดูโค้ดใน mytree-frontend/app/)
• UI: Tailwind CSS 4 + Flowbite React (รองรับ Dark Mode)
• Media: รองรับการแนบรูปภาพและเอกสาร

ฟีเจอร์หลัก

• จัดการสายพันธุ์ (Strains), ชุดการปลูก (Batches), ต้นไม้ (Trees)
• แนบไฟล์ภาพ/เอกสารกับแต่ละต้นไม้
• UI ทันสมัย รองรับมือถือ
• ระบบแจ้งเตือน, Modal, Table, Datepicker ฯลฯ (Flowbite React)
• Smart Folder Management: เปลี่ยนชื่อ/ลบโฟลเดอร์รูปภาพตามชื่อต้นไม้อัตโนมัติ
• Enhanced UI/UX (Premium Nature Theme):
  • Clean & Professional: ดีไซน์ใหม่เน้นความสะอาดตา (Solid White Navbar) และความเป็นมืออาชีพ
  • Mobile First: รองรับการใช้งานบนมือถือสมบูรณ์แบบ (Full-screen Modals, Touch-friendly)
  • Visual Hierarchy: จัดลำดับความสำคัญของข้อมูลชัดเจน ลดความซ้ำซ้อน
  • TreeCard: แสดงอายุและสถานะด้วยดีไซน์ที่ทันสมัย
  • Detail Modal: แสดงข้อมูลครบถ้วน (พันธุกรรม, ผลผลิต, สุขภาพ)
  • Grid/List View: สลับมุมมองได้ตามต้องการ
• Performance: ปรับปรุง Query (select_related) ลดโหลด Database และปรับปรุง Frontend Rendering

Recent Updates (2025-12-01)

• Tree Detail Modal Overhaul:
  • Premium UI: ปรับดีไซน์ใหม่ทั้งหมดให้ดูทันสมัย (Glassmorphism, Soft Shadows, Rounded Corners)
  • Centered Layout: แก้ไขปัญหา Modal ชิดซ้าย ให้แสดงผลกึ่งกลางหน้าจออย่างถูกต้อง
  • Improved UX:
    • Header: แสดงชื่อสายพันธุ์และชื่อเล่นชัดเจน พร้อม Gradient Text
    • Image Gallery: แสดงรูปภาพหลักขนาดใหญ่พร้อม Thumbnails ที่เลื่อนดูได้
    • Stats Grid: แสดงข้อมูลสำคัญ (อายุ, ระยะ, สถานะ) ในรูปแบบ Grid ที่อ่านง่าย
    • Data Sections: จัดกลุ่มข้อมูล (การปลูก, พันธุกรรม, ผลผลิต) ให้เป็นระเบียบ
  • Z-Index Fixes: แก้ไขปัญหา Modal ถูกบังโดย Navbar หรือ Element อื่นๆ

Recent Updates (2025-11-28)

• Enhanced Dashboard:

  • เพิ่มคอลัมน์ "จัดการ" (Actions) ในมุมมองแบบ List View
  • เพิ่มปุ่ม QR Code, Edit, Delete และ View Public Page ให้เข้าถึงได้ง่าย
  • ปรับปรุงไอคอนให้สื่อความหมายชัดเจน (ใช้ HiExternalLink สำหรับหน้าสาธารณะ)
  • ปรับปรุง Tooltip และ Hover effects ให้สวยงามและสอดคล้องกับ Grid View

• Public Tree Page Polish:

  • แก้ไขบั๊ก React Hooks Order Error
  • ปรับปรุง Sticky Tabs ให้ใช้งานได้ลื่นไหล
  • ปรับปรุง Layout และ Typography ให้ดูเป็นมืออาชีพ

• Code Quality:

  • Refactor โค้ดเพื่อลดความซ้ำซ้อน
  • แก้ไข Lint errors และปรับปรุง Syntax ให้ทันสมัย (Tailwind CSS)

• Stability & Fixes:

  • แก้ไข Build errors และ Syntax issues ในหน้า Public Tree Page
  • ตรวจสอบและแก้ไขการแสดงผล Header (ID, Share button) ให้ถูกต้องและสมบูรณ์

Built With

• 
• 
• 
• 
• 
• 
• 
• 

(back to top)

Project Structure

mytree-journal/
│
├── mytree_journal/         # Django project settings, URLs, WSGI/ASGI
│   └── settings.py         # Database, CORS, Timezone, Static/Media config
│
├── trees/                  # Django app: models, serializers, views, admin
│   ├── models.py           # Strain, Batch, Tree, Image, Document models
│   ├── serializers.py      # DRF serializers with validation
│   ├── views.py            # DRF ViewSets (Strain, Batch, Tree)
│   ├── urls.py             # App-level API routes
│   └── migrations/         # Database migrations
│
├── mytree-frontend/        # Next.js 15 + React 19 frontend
│   ├── app/
│   │   ├── page.tsx        # Dashboard (Tree list, add/edit/view)
│   │   ├── strains/page.tsx# Strain management UI
│   │   ├── batches/page.tsx# Batch management UI
│   │   └── globals.css     # Tailwind + Flowbite styles
│   ├── public/             # Static assets (SVG, favicon)
│   ├── tailwind.config.js  # Tailwind CSS config
│   └── flowbite_all_docs.txt, flowbite_react_all_docs.txt, tailwind_all_docs.txt
│
├── media/                  # Uploaded images & documents
│   ├── tree_images/        # รูปภาพต้นไม้ (และ thumbnails)
│   └── tree_documents/     # เอกสารแนบ
│
├── nginx/                  # Nginx config for deployment
│   └── conf/nginx.conf     # ตัวอย่าง reverse proxy + static/media
│
├── requirements.txt        # Python dependencies
├── package.json            # Node.js dependencies
└── README.md               # This file

(back to top)

Getting Started

Prerequisites

• Node.js v22.13.1 + npm 10.8.3
• Python 3.11
• PostgreSQL
• Nginx (สำหรับ production)

Installation

1. Clone the repository

   git clone https://github.com/naravid19/mytree-journal.git
   cd mytree-journal

2. Install Python dependencies

   pip install -r requirements.txt

3. Install Node dependencies

   cd mytree-frontend
   npm install
   cd ..

Environment Variables

สร้างไฟล์ .env ที่ root:

DJANGO_ALLOWED_HOSTS=localhost,127.0.0.1,api.example.com

สร้าง mytree-frontend/.env.local:

NEXT_PUBLIC_FRONTEND_ORIGIN=https://www.example.com
NEXT_PUBLIC_API_BASE_URL=https://api.example.com
NEXT_PUBLIC_MEDIA_DOMAIN=api.example.com

Running Locally

Backend:

python manage.py migrate
python manage.py runserver

Frontend:

cd mytree-frontend
npm run dev

(back to top)

Usage

• เข้าหน้า dashboard ที่ http://localhost:3000
• จัดการข้อมูลสายพันธุ์ (Strains) ที่ /strains
• จัดการชุดการปลูก (Batches) ที่ /batches
• เพิ่ม/แก้ไข/ลบต้นไม้ พร้อมแนบรูปภาพและเอกสาร
• API docs อัตโนมัติที่ /api/ (หลังรัน backend)

โครงสร้างข้อมูลหลัก

• Strain: ชื่อสายพันธุ์, รายละเอียด
• Batch: รหัสชุด, รายละเอียด, วันที่เริ่มต้น
• Tree: ข้อมูลต้นไม้, ความสัมพันธ์กับ Strain/Batch, รูปภาพ, เอกสาร, หมายเหตุ ฯลฯ

Media

• อัปโหลดไฟล์ภาพ (JPEG, PNG, WebP) และเอกสาร (PDF)
• ไฟล์จะถูกเก็บใน media/tree_images/ และ media/tree_documents/
• มีระบบสร้าง thumbnail อัตโนมัติ

UI/UX

• ใช้ Flowbite React (Modal, Table, Alert, Datepicker, Toast, Tooltip ฯลฯ)
• Tailwind CSS 4.1 (ดู config ที่ tailwind.config.js)
• รองรับ Dark Mode (ปุ่ม toggle มุมขวาบน)
• ฟอร์มมี validation ทั้ง client/server (แจ้งเตือนซ้ำ, ข้อมูลไม่ครบ ฯลฯ)

(back to top)

Nginx Deployment

ตัวอย่างไฟล์ nginx/conf/nginx.conf สำหรับ production (ใช้โดเมนตัวอย่าง):

server {
    listen 80;
    server_name api.example.com;

    # Static files
    location /static/ {
        alias /path/to/mytree-journal/static/;
        autoindex off;
        expires 30d;
        add_header Cache-Control "public";
    }

    # Media files
    location /media/ {
        alias /path/to/mytree-journal/media/;
        autoindex off;
        expires 30d;
        add_header Cache-Control "public";
    }

    # Proxy API to Django backend
    location /api/ {
        proxy_pass http://127.0.0.1:8000/api/;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
        client_max_body_size 20M;
    }

    # Proxy frontend (Next.js SSR)
    location / {
        proxy_pass http://127.0.0.1:3000;
        proxy_http_version 1.1;
        proxy_set_header Upgrade $http_upgrade;
        proxy_set_header Connection 'upgrade';
        proxy_set_header Host $host;
        proxy_cache_bypass $http_upgrade;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto $scheme;
    }

    add_header X-Frame-Options "SAMEORIGIN" always;
    add_header X-Content-Type-Options "nosniff" always;
    add_header X-XSS-Protection "1; mode=block" always;
    add_header Referrer-Policy "strict-origin-when-cross-origin" always;
    add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
    client_max_body_size 20M;
}

หมายเหตุ

• เปลี่ยน /path/to/mytree-journal/ เป็น path จริงบน server
• รองรับ static/media, API, และ SSR frontend ใน server เดียว
• สามารถเพิ่ม HTTPS config ได้ตามต้องการ

(back to top)

Roadmap

• Authentication support
• Filtering & advanced search
• Mobile layout enhancements
• Improved batch/strain management
• Multi-user collaboration

ดูรายการเต็มที่ open issues

(back to top)

Contributing

Contributions make the open-source community amazing! Any contribution is greatly appreciated.

1. Fork the repo
2. Create your feature branch (git checkout -b feature/FeatureName)
3. Commit your changes (git commit -m 'Add FeatureName')
4. Push to the branch (git push origin feature/FeatureName)
5. Open a Pull Request

(back to top)

License

Distributed under the MIT License. See LICENSE for details.

(back to top)

Contact

Project Link: https://github.com/naravid19/mytree-journal

(back to top)

Acknowledgments

• Tailwind CSS
• Flowbite
• Flowbite React
• Best-README-Template

(back to top)