Skip to content

README.md

Latest commit

 

History

History
179 lines (124 loc) · 9.82 KB

README.md

File metadata and controls

179 lines (124 loc) · 9.82 KB

T-Goda — Hotel Booking Platform

404 NotFound Team · Codekit Competition 2026

เว็บไซต์จองที่พักออนไลน์สำหรับนักท่องเที่ยวในประเทศไทย ออกแบบและพัฒนาโดยทีม 404 NotFound สำหรับการแข่งขัน Codekit Competition 2026

เกี่ยวกับเว็บไซต์

T-Goda คือแพลตฟอร์มค้นหาและจองที่พักที่ครอบคลุมจังหวัดท่องเที่ยวหลักทั่วประเทศไทย ผู้ใช้สามารถค้นหาโรงแรม กรองตามราคาและระดับดาว และดูรายละเอียดห้องพักพร้อมจองได้ทันที

Tech Stack

หมวดหมู่ เทคโนโลยี เวอร์ชัน
Framework Next.js 16.2.4
UI Runtime React 19.2.4
Component Library HeroUI ^3.0.3
Styling Tailwind CSS ^4
Icons Lucide React ^1.9.0
Animations Framer Motion ^12.38.0
Theme next-themes ^0.4.6
Font Noto Sans Thai (Google Fonts) —
Language TypeScript ^5

Features

หน้าแรก (/)

  • Hero Section — ภาพพื้นหลังพร้อม search bar ค้นหาจุดหมาย, วันเช็คอิน/เช็คเอาท์
  • Popular Destinations — Grid จังหวัดยอดนิยมพร้อมรูปภาพและจำนวนที่พัก คลิกแล้ว redirect ไปหน้าค้นหา

หน้าค้นหา (/search)

  • Search Banner — แสดงจุดหมาย, วันที่, จำนวนผู้เข้าพัก
  • Sidebar Filter — กรองตามระดับดาว (4 ดาว / 5 ดาว) และช่วงราคาต่อคืนด้วย Slider
  • Hotel Cards — แสดงรายการโรงแรมพร้อม: รูปภาพ, ดาว, ที่ตั้ง, สิ่งอำนวยความสะดวก, คะแนนรีวิว, ราคา และปุ่ม "ดูห้องว่าง"
  • Real-time Filter — กรองผลลัพธ์ทันทีเมื่อเปลี่ยนค่า filter

หน้าโรงแรม (/hotel/[id])

  • Breadcrumb Navigation — หน้าแรก → จังหวัด → ชื่อโรงแรม
  • Image Gallery — สไลด์รูปภาพพร้อมปุ่ม prev/next และ counter
  • Hotel Header — ชื่อโรงแรม, ระดับดาว, ที่อยู่, ปุ่ม บันทึก/แชร์/เลือกห้องพัก
  • Overview — คำอธิบายโรงแรม
  • Amenities — สิ่งอำนวยความสะดวกแบบ flat list พร้อม icon
  • Room Table — ตารางห้องพักพร้อม: ประเภทเตียง, ขนาด, สิทธิประโยชน์, ราคา (พร้อม strikethrough ถ้ามีส่วนลด), urgency badge และปุ่ม "จองเลย"
  • Review Sidebar — คะแนนรีวิวรวม, progress bar ทำเลดี้/ความสะอาด, แผนที่

Global

  • Dark / Light Mode — toggle ใน Navbar, persist ผ่าน next-themes
  • Responsive Design — รองรับทุก breakpoint ตั้งแต่ mobile → desktop
  • Floating Pill Navbar — fixed top navbar แบบ glassmorphism พร้อม animation เมื่อ scroll
  • SEO Metadata — Open Graph, keywords, structured data

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

src/
├── app/
│   ├── layout.tsx          # Root layout (Navbar + Footer + Providers)
│   ├── page.tsx            # หน้าแรก
│   ├── providers.tsx       # ThemeProvider wrapper
│   ├── search/
│   │   └── page.tsx        # หน้าค้นหาโรงแรม
│   └── hotel/
│       └── [id]/
│           └── page.tsx    # หน้ารายละเอียดโรงแรม
├── components/
│   ├── Navbar.tsx          # Floating pill navbar
│   ├── Footer.tsx          # Footer
│   └── ThemeToggle.tsx     # Dark/Light mode button
├── lib/
│   ├── metadata.ts         # Next.js metadata + Google Font
│   └── seo.ts              # SEO helper functions
└── styles/
    └── tailwind.css        # Global styles + CSS variables

เหตุผลการเลือก Library

Next.js 16 (App Router)

ใช้ App Router เพื่อ file-based routing, nested layouts และ Server Components — ทำให้แยก layout ของ Navbar/Footer ออกจาก page ได้ง่าย และรองรับ dynamic route /hotel/[id] โดยไม่ต้องตั้งค่าเพิ่มเติม

HeroUI v3

Component library ที่สร้างบน Tailwind CSS v4 + React Aria ให้ component ที่ accessible ออกจากกล่อง เช่น DatePicker, Slider, Checkbox ที่ใช้ใน search form และ filter sidebar โดยไม่ต้องสร้าง accessibility logic เองทั้งหมด

Tailwind CSS v4

HeroUI v3 require Tailwind v4 — ใช้ CSS custom properties (@heroui/styles) แทน config-based theming ทำให้ dark mode ทำงานผ่าน .dark class ได้ทันที และ design token จัดการผ่าน CSS variables

next-themes

จัดการ dark/light mode โดยไม่มี flash of unstyled content (FOUC) ด้วย suppressHydrationWarning และ ThemeProvider ที่ wrap ทั้ง app

Lucide React

Icon library ที่ tree-shakable — ทุก icon เป็น individual component ที่ import เฉพาะที่ใช้ ไม่บวม bundle

Framer Motion

ติดตั้งไว้สำหรับ animation ขั้นสูง (page transition, micro-interaction) ที่จะเพิ่มเติมในอนาคต

Anuphan (Google Fonts)

ฟอนต์ที่รองรับทั้ง Latin และ ภาษาไทย ในน้ำหนักเดียวกัน โหลดผ่าน next/font/google เพื่อ optimize ด้วย font subsetting อัตโนมัติ

Component ที่ใช้จาก HeroUI

Component ใช้ใน เหตุผล
DatePicker + DateField Search bar Date picker ที่ accessible ไม่ต้องสร้าง calendar เอง
Calendar DatePicker popover ปฏิทินเลือกวันที่แบบ compound component
TextField + InputGroup Search bar Input พร้อม prefix icon แบบ accessible
Button ทุกหน้า Semantic variant (primary/outline) รองรับ onPress
Checkbox Filter sidebar Filter ระดับดาว พร้อม label ที่ clickable
Slider Filter sidebar Range slider เลือกช่วงราคา
Label Form labels Label ที่ associate กับ input ถูกต้อง

วิธีรัน

1. ติดตั้ง dependencies

npm install

2. รันในโหมด Development

npm run dev

เปิดเบราว์เซอร์ที่ http://localhost:3000

3. Build สำหรับ Production

npm run build
npm run start

หน้าที่มี

URL หน้า
/ หน้าแรก + ค้นหา
/search ผลการค้นหาโรงแรมกรุงเทพมหานคร
/hotel/1 The Peninsula Bangkok
/hotel/2 Mandarin Oriental Bangkok
/hotel/3 Bangkok Marriott Surawongse
/hotel/4 Centara Grand at CentralWorld
/hotel/5 Novotel Bangkok Silom Road
/hotel/6 AVANI Riverside Bangkok
/hotel/7 ibis Styles Bangkok Sukhumvit

ทีมผู้พัฒนา

404 NotFound Team — Codekit Competition 2026