Đây là phiên bản phía khách hàng của ứng dụng Airbnb Clone, được phát triển nhằm tái hiện và mô phỏng các tính năng của nền tảng Airbnb. Dự án này sử dụng công nghệ tiên tiến như Next.js, React và TypeScript để cung cấp một giao diện người dùng hiện đại, mượt mà và dễ sử dụng.
Dự án này được xây dựng với các công nghệ sau:
| Công nghệ | Phiên bản | Mô tả |
|---|---|---|
| Next.js | 14.2.9 | Tạo giao diện server-side rendering (SSR) và static site generation (SSG). |
| React | 18 | Thư viện front-end mạnh mẽ giúp xây dựng các thành phần giao diện người dùng linh hoạt. |
| TypeScript | 5 | Cung cấp kiểm tra kiểu tĩnh và tăng cường độ tin cậy trong quá trình phát triển. |
| TailwindCSS | 3.4.1 | Framework CSS tiện dụng giúp nhanh chóng tạo giao diện đẹp mắt. |
| Auth.js (next-auth) | 5.0.0-beta.21 | Quản lý xác thực và quyền truy cập cho người dùng. |
| ShadcnUI | - | Thư viện thành phần UI phong cách, dễ sử dụng. |
| Prettier | 3.3.3 | Định dạng mã nguồn để đảm bảo mã tuân thủ các tiêu chuẩn tốt nhất. |
| Eslint | 8.57.0 | Kiểm tra mã nguồn để đảm bảo mã tuân thủ các tiêu chuẩn tốt nhất. |
| Fontawesome | 6.6.0 | Biểu tượng đẹp mắt, dễ dàng tích hợp vào ứng dụng. |
| Lottie React | 2.4.0 | Tích hợp hoạt hình Lottie để làm phong phú thêm trải nghiệm người dùng. |
| React Toastify | 10.0.5 | Hiển thị thông báo đẹp mắt, dễ cấu hình. |
| SweetAlert2 | 11.14.0 | Hiển thị hộp thoại tùy chỉnh với giao diện đẹp và trực quan. |
| React Hook Form | 7.53.0 | Quản lý form đơn giản, hiệu quả với React. |
| Zod | 3.23.8 | Kiểm tra dữ liệu và tạo hình dạng trong TypeScript. |
| Axios | 1.7.7 | Gửi yêu cầu HTTP để giao tiếp với API. |
| Zustand | 4.5.5 | Quản lý trạng thái nhẹ nhàng và dễ hiểu cho ứng dụng React. |
- Đăng ký và đăng nhập người dùng với xác thực bảo mật.
- Tìm kiếm và duyệt qua các danh sách nhà/phòng cho thuê.
- Đặt phòng và quản lý các giao dịch đã thực hiện.
- Thêm, chỉnh sửa và xóa danh sách nhà/phòng cho thuê.
- Tích hợp với các API để lấy dữ liệu thời gian thực.
-
Sao chép repository về máy:
git clone https://github.com/MeiCloudie/airbnb-clone-client
-
Cài đặt các phụ thuộc:
npm install
-
Chạy ứng dụng ở môi trường phát triển:
npm run dev
-
Truy cập ứng dụng tại
http://localhost:3000