🏨 Giao diện đặt phòng khách sạn tương thích với mọi thiết bị — hoàn toàn thân thiện với thiết bị di động
⚡ Sử dụng công nghệ Vite giúp phát triển nhanh và nạp đạn nhanh chóng
🎨 Phong cách TailwindCSS cho thiết kế tùy chỉnh, ưu tiên tính tiện dụng
🔄 API React Context để quản lý trạng thái (lọc phòng, chọn phòng, v.v.)
🧩 Các thành phần React có thể tái sử dụng như Thẻ phòng, Biểu mẫu đặt phòng, Menu thả xuống
📅 Công cụ chọn ngày React để chọn ngày nhận/trả phòng
🚀 Thanh trượt Swiper cho hình ảnh anh hùng
🔗 React Router dành cho điều hướng SPA và chi tiết phòng
🌀 Biểu tượng tải xoay tròn để mô phỏng quá trình lấy dữ liệu
⬆️ Cuộn lên đầu trang để xem các thay đổi về tuyến đường
🛠️ Ví dụ về dữ liệu , tiện nghi và hình ảnh khách sạn
☑️ Nội quy khách sạn và thông tin chi tiết trên mỗi trang phòng.
XEM THÊM ==> Hướng dẫn cài đặt chi tiết
Nguồn: Sharecode.vn
2. Cài đặt NodeJS
Tải xuống và cài đặt từ nodejs.org
3. Cài đặt các thư viện phụ thuộc của dự án
npm install
4. (Tùy chọn) Tạo dự án React Vite + TailwindCSS của riêng bạn
npm create vite@latest my-project -- --template react
cd my-project
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
Biên tập tailwind.config.js:
/** @type {import('tailwindcss').Config} */
export default {
content: [
"./index.html",
"./src/**/*.{js,ts,jsx,tsx}",
],
theme: { extend: {} },
plugins: [],
}
Thêm những điều sau vào src/index.css:
@tailwind base;
@tailwind components;
@tailwind utilities;
5. Chạy dự án cục bộ
npm run dev