OverviewI built Good Night Hostel, a web project for a fictional hostel in Chiang Mai. It brings together a public site where visitors can learn about the property and complete a room search and booking flow, a simple guest account area (bookings, profile, notifications, loyalty), and a separate admin dashboard that behaves like a small property-management console. The main goal was to show how a real hostel might present itself online and how staff could track bookings, rooms, housekeeping, maintenance, and finances in one place — without relying on a production backend for this version.
On the guest side, I focused on a clear path from home and room pages through booking (dates, guests, room choice, contact and details) to a confirmation screen that reflects what the guest submitted. I used CSS variables and shared typography (including Thai-friendly fonts) so the look stays consistent and easier to adjust. The admin side uses a sidebar layout, dashboard charts (Chart.js and CanvasJS), and dedicated screens for room and booking management, housekeeping, maintenance, finance, customers, staff, and security, with EN/TH language hooks on the dashboard to match the hostel's audience.
The stack is plain HTML, CSS, and JavaScript — no separate server or database in the repo. Content and room metadata live in shared static data (for example a central hostelData object), while the booking confirmation and customer account behavior use localStorage so the flow feels persistent in the browser. The admin modules use their own JavaScript engines with mock booking and operations data to drive tables, filters, and UI updates, which keeps the dashboard interactive without wiring up a real API yet.
A practical challenge was keeping a multi-step booking experience reliable without a server: I had to validate dates (for example ensuring check-out is after check-in and enforcing sensible minimums), pass state between pages, and redirect away from the confirmation page if confirmation data was missing, so users never saw an empty or broken summary. On the admin side, splitting features into focused JS modules next to matching CSS helped me avoid one huge file and made it easier to extend screens like booking or housekeeping independently.
