ข้ามไปที่เนื้อหาSkip to content
ผลงานทั้งหมดAll work

HIDDEN — Hotel Booking

ระบบจองโรงแรมที่แยกสิทธิ์ผู้ใช้ แอดมินโรงแรม และซูเปอร์แอดมินA hotel booking system separating user, hotel admin and super admin permissions.

โปรเจกต์มหาวิทยาลัยUniversity project · 2025

ช่วงเวลาPeriod
Mar 2025 — Apr 2025
บทบาทRole
หลังบ้านและหน้าบ้านBackend & frontend
สถานะStatus
เสร็จแล้วCompleted
เทคโนโลยีที่ใช้Stack
React, TypeScript, Node.js, Tailwind CSS, MongoDB, Vercel

ภาพรวมOverview

งานในวิชา Software Practice ที่ออกแบบ API ฝั่งหลังบ้านและพัฒนาเว็บแอปฝั่งหน้าบ้านด้วย React แล้วดีพลอยขึ้น VercelA Software Practice course project: designing the backend API and building the frontend web app in React, deployed to Vercel.

ระบบแบ่งผู้ใช้เป็นสามระดับ คือผู้ใช้ทั่วไปที่จองได้ครั้งละไม่เกินสามคืน แอดมินของโรงแรมที่ดูแลห้องและการจองของโรงแรมตัวเอง และซูเปอร์แอดมินที่จัดการได้ทั้งระบบThree levels of user: guests who can book up to three nights at a time, hotel admins who manage their own rooms and bookings, and super admins who manage everything.

สิ่งที่สำคัญWhat mattered

01

Three roles, one API

สิทธิ์ของผู้ใช้ แอดมินโรงแรม และซูเปอร์แอดมิน ถูกบังคับที่ชั้น middleware ก่อนถึง controller ทุกครั้ง ไม่ได้เช็กเอาที่หน้าเว็บอย่างเดียวGuest, hotel admin and super admin permissions are enforced in middleware before every controller, not just checked in the frontend.

02

Rules in the backend

เงื่อนไขอย่างจองได้ไม่เกินสามคืน วันเช็กเอาต์ต้องอยู่หลังวันเช็กอิน และห้องต้องว่างจริง ถูกตรวจที่ API พร้อมคืนรหัสสถานะที่ต่างกันในแต่ละกรณีRules like the three-night limit, check-out falling after check-in, and the room actually being free are validated at the API, each returning its own status code.

03

Designed before built

เริ่มจากเขียน use case diagram และ sequence diagram ให้ครบก่อน แล้วค่อยลงมือเขียนโค้ด ทำให้เห็นเส้นทางของ request ตั้งแต่หน้าเว็บไปจนถึงฐานข้อมูลUse case and sequence diagrams came first and were finished before any code, which made the path of a request visible from the page all the way to the database.

ภาพหน้าจอScreens

หน้ารวมโรงแรมที่ทำด้วยข้อมูลจำลองThe hotel listing page, built with mock data.
Sequence diagram ของขั้นตอนการจองSequence diagram of the booking flow.
Use case diagram ของผู้ใช้ทั้งสามระดับUse case diagram covering all three levels of user.
โปรเจกต์ถัดไปNext project

Croissant Revenger

เกมเทิร์นเบสสามด่าน ที่ใช้แถบเลื่อนจับจังหวะในการโจมตีA three-stage turn-based game where attacks are timed on a sliding bar.