🐾 Coregi

Follow the trail to your perfect paw match.

แพลตฟอร์มสำหรับคนรักสุนัขที่รวมข้อมูลสายพันธุ์ ประวัติ คาเฟ่ ฟาร์ม คู่มือเจ้าของมือใหม่ และผู้ช่วย AI สองบุคลิกไว้ในที่เดียว

เริ่มต้นใช้งาน · ฟีเจอร์ · โครงสร้างโปรเจกต์ · คำสั่ง

---

✨ ภาพรวม

Coregi คือเว็บแอปแบบ responsive สำหรับสำรวจโลกของสุนัข ตั้งแต่การเลือกสายพันธุ์ที่เข้ากับไลฟ์สไตล์ เรียนรู้ที่มา ค้นหาคาเฟ่และฟาร์มจากแผนที่ ไปจนถึงถามเรื่องสายพันธุ์และการดูแลผ่าน Chat with Corgi

งานออกแบบใช้โทนอุ่น เป็นมิตร และเน้นภาพถ่ายจริงของแต่ละสายพันธุ์/สถานที่ พร้อม interaction อย่างการ์ดพลิก การเอียงตามเมาส์ carousel และแผนที่แบบโต้ตอบ เพื่อให้การค้นข้อมูลให้ความรู้สึกเหมือนกำลังเดินตามรอยอุ้งเท้าไปเรื่อย ๆ

🌟 ฟีเจอร์เด่น

ฟีเจอร์	รายละเอียด
🐕 Dog Catalog	สำรวจสายพันธุ์สุนัขและเปิดหน้ารายละเอียดเฉพาะสายพันธุ์
🧬 Breed History	อ่านไทม์ไลน์จากการเลี้ยงสุนัขยุคแรกจนถึงสายพันธุ์ทำงานในปัจจุบัน
☕ Dog Cafes	ค้นหาและกรองคาเฟ่สุนัข พร้อมพิกัดบนแผนที่ OpenStreetMap
🌾 Farms & Sanctuaries	สำรวจฟาร์ม ศูนย์เพาะพันธุ์ และสถานที่ดูแลสุนัขจากหลายประเทศ
📖 New Owner Guide	เช็กลิสต์และคำแนะนำพื้นฐานสำหรับเจ้าของสุนัขมือใหม่
📰 Blog	บทความเรื่องสายพันธุ์ การดูแล การผลัดขน และไอเดียท่องเที่ยวกับสุนัข
💬 Chat with Corgi	AI แยกคำถามอัตโนมัติให้ Corgi ตอบเรื่องสายพันธุ์ หรือ Husky ตอบเรื่องการดูแล
📱 Responsive UI	รองรับหน้าจอเดสก์ท็อป แท็บเล็ต และมือถือ

[!NOTE] คำแนะนำจาก AI มีไว้เพื่อข้อมูลทั่วไปเท่านั้น ไม่ใช่การวินิจฉัยหรือคำแนะนำจากสัตวแพทย์ หากสุนัขมีอาการผิดปกติควรปรึกษาสัตวแพทย์โดยตรง

🗺️ เส้นทางภายในแอป

Path	หน้า
/	หน้าแรกและภาพรวมเนื้อหาทั้งหมด
/catalog	แคตตาล็อกสายพันธุ์
/catalog/:breedId	รายละเอียดสายพันธุ์
/history	ประวัติสายพันธุ์สุนัข
/cafes	คาเฟ่สุนัขและแผนที่
/farms	ฟาร์ม/ศูนย์ดูแลสุนัขและแผนที่
/blog	บทความทั้งหมด
/guide	คู่มือเจ้าของสุนัขมือใหม่
/about	เกี่ยวกับ Coregi และแบบฟอร์มติดต่อ

🧰 เทคโนโลยี

• Frontend: React 19, TypeScript 6, Vite 8
• Styling: Tailwind CSS 4, Radix UI, shadcn, Lucide React
• Routing: React Router 7
• Maps: Leaflet, React Leaflet และ OpenStreetMap
• AI: OpenRouter Chat Completions API
• Backend: Vercel Serverless Function (/api/chat)
• Quality: ESLint และ Prettier

🚀 เริ่มต้นใช้งาน

สิ่งที่ต้องมี

• Node.js เวอร์ชันที่รองรับ Vite 8
• npm
• OpenRouter API key — ต้องใช้เฉพาะเมื่อต้องการทดสอบฟีเจอร์แชต

1. Clone โปรเจกต์

git clone https://github.com/EarthStrixDEV/coregi.git
cd coregi

2. ติดตั้ง dependencies

npm install

3. ตั้งค่า environment variable

สร้างไฟล์ .env.local ที่ root ของโปรเจกต์:

OPENROUTER_API_KEY=your_openrouter_api_key

# ไม่บังคับ — หากไม่กำหนด ระบบจะใช้ค่า default จากฝั่ง server
# OPENROUTER_MODEL=nex-agi/nex-n2.5-mini:free

[!IMPORTANT] ห้าม commit .env หรือ .env.local ขึ้น repository และไม่ควรนำ API key ไปใช้ในโค้ดฝั่ง client

4. เปิด development server

npm run dev

จากนั้นเปิด URL ที่ Vite แสดงใน terminal (โดยทั่วไปคือ http://localhost:5173)

npm run dev ใช้พัฒนา UI ผ่าน Vite ส่วน endpoint /api/chat เป็น Vercel Function หากต้องการทดสอบทั้ง frontend และแชตในเครื่อง ให้รันโปรเจกต์ผ่าน Vercel CLI และตั้งค่า environment variable ให้ครบ

📜 คำสั่งที่ใช้บ่อย

คำสั่ง	ใช้ทำอะไร
npm run dev	เปิด Vite development server
npm run build	ตรวจ TypeScript และสร้าง production build
npm run preview	เปิดดู production build ในเครื่อง
npm run lint	ตรวจโค้ดด้วย ESLint
npm run format	จัดรูปแบบไฟล์ใน src ด้วย Prettier

🧩 Chat with Corgi ทำงานอย่างไร

คำถามจากผู้ใช้
      │
      ▼
ตัวจำแนกคำถาม (BREEDS / CARE)
      │
      ├── BREEDS ──► Corgi  ──► สายพันธุ์ นิสัย ประวัติ และการเปรียบเทียบ
      │
      └── CARE ────► Husky  ──► อาหาร การฝึก กรูมมิ่ง และกิจวัตรประจำวัน

• Client ส่งข้อความและประวัติการสนทนาไปยัง POST /api/chat
• Server ตรวจรูปแบบข้อมูล จำกัดขนาด payload และเก็บเฉพาะประวัติล่าสุด
• Router เลือก persona ตามหัวข้อของข้อความปัจจุบัน
• ทั้ง router และ persona ใช้ deadline ร่วมกันเพื่อให้เหมาะกับเวลาจำกัดของ serverless function
• ระบบมี best-effort daily rate limit แบบ in-memory สำหรับช่วง soft launch

📁 โครงสร้างโปรเจกต์

coregi/
├── api/
│   └── chat.ts                 # Vercel serverless chat endpoint
├── public/
│   └── images/                 # ภาพสายพันธุ์ สถานที่ และบทความ
├── src/
│   ├── components/
│   │   ├── chat/               # Chat widget และ UI การสนทนา
│   │   ├── interactive/        # Map, carousel, flip/tilt และ 3D preview
│   │   ├── layout/             # Navbar, footer และ page layout
│   │   ├── shared/             # UI primitives ที่ใช้ร่วมกัน
│   │   └── venues/             # รายการ ตัวกรอง และหน้าสถานที่
│   ├── content/                # ข้อมูลสายพันธุ์ คาเฟ่ ฟาร์ม และบทความ
│   ├── hooks/                  # Custom React hooks
│   ├── lib/                    # Utilities, chat logic และ Leaflet config
│   ├── pages/                  # Route-level pages
│   ├── types/                  # TypeScript domain types
│   ├── App.tsx                 # Route definitions
│   ├── index.css               # Global styles และ design tokens
│   └── main.tsx                # Application entry point
├── docs/                       # Chat specification และ wireframe
├── standalone/                 # HTML design references
├── vercel.json                 # Vercel deployment config
└── vite.config.ts              # Vite, Tailwind และ path alias config

🎨 แนวทางเพิ่มเนื้อหา

• เพิ่มหรือแก้ข้อมูลหลักใน src/content/ แทนการ hardcode ใน component
• เก็บภาพที่ใช้งานจริงไว้ใต้ public/images/ และระบุ imageUrl ใน content record
• ใช้ PhotoPlaceholder เป็น fallback กลางเมื่อรายการยังไม่มีภาพเฉพาะ
• ใช้ alias @/ สำหรับ import จาก src/
• ก่อนส่งงานควรรัน npm run lint และ npm run build ทุกครั้ง

☁️ การ Deploy

โปรเจกต์เตรียม config สำหรับ Vercel ไว้แล้ว:

1. Import repository เข้า Vercel
2. เพิ่ม OPENROUTER_API_KEY ใน Project Settings → Environment Variables
3. หากต้องการเปลี่ยนโมเดล ให้เพิ่ม OPENROUTER_MODEL
4. Deploy — Vercel จะตรวจจับ Vite และสร้าง /api/chat เป็น serverless function

🤝 การมีส่วนร่วม

ยินดีรับการปรับปรุงข้อมูลสายพันธุ์ สถานที่ บทความ accessibility และประสบการณ์ใช้งานค่ะ

1. Fork repository
2. สร้าง branch สำหรับงานของคุณ
3. แก้ไขและรัน npm run lint กับ npm run build
4. Commit ด้วยข้อความที่อธิบายการเปลี่ยนแปลงชัดเจน
5. เปิด Pull Request พร้อมสรุปสิ่งที่แก้และวิธีทดสอบ

---

Built with curiosity, warm colors, and a trail of paw prints. 🐾