Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/meicloudie/airbnb-clone-client

Airbnb clone client app with Next.js 14 (App Router), React 18, TypeScript, TailwindCSS, Auth.js, ShadcnUI, Prettier & Eslint, Fontawesome, Lottie React, React Toastify, SweetAlert2, React Hook Form, Zod, Axios, Zustand
https://github.com/meicloudie/airbnb-clone-client

app-router-nextjs authjs axios fontawesome lottie-react next-auth-v5 nextjs prettier-eslint react-hook-form react-toastify shadcn-ui sweetalert2 tailwindcss typescript vercel zod zustand

Last synced: 4 days ago
JSON representation

Airbnb clone client app with Next.js 14 (App Router), React 18, TypeScript, TailwindCSS, Auth.js, ShadcnUI, Prettier & Eslint, Fontawesome, Lottie React, React Toastify, SweetAlert2, React Hook Form, Zod, Axios, Zustand

Awesome Lists containing this project

README

        

# Airbnb Clone Client (Vẫn đang trong quá trình phát triển)


Logo

## Giới thiệu

Đâ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.

## Công nghệ 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. |

## Chức năng chính

- Đă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.

## Cài đặt

1. Sao chép repository về máy:

```sh
git clone https://github.com/MeiCloudie/airbnb-clone-client
```

2. Cài đặt các phụ thuộc:

```sh
npm install
```

3. Chạy ứng dụng ở môi trường phát triển:

```sh
npm run dev
```

4. Truy cập ứng dụng tại `http://localhost:3000`