VacationVibe : 民泊予約アプリ
VacationVibeは、ユーザーがバケーションレンタルを予約できるようにするフルスタック予約アプリで、宿泊施設を予約するためのシームレスなエクスペリエンスを提供します。このアプリを使用すると、ユーザーは自分の不動産のリスティングを作成できるため、不動産所有者は潜在的なゲストに賃貸物件を紹介する機会が得られます。 VacationVibeを使用すると、ユーザーは利用可能な物件の検索、物件の詳細の表示、予約、予約の管理を簡単に行うことができます。
VacationVibe直接体験するには、当社の Web サイトにアクセスしてライブ デモをご覧ください。
ウェブサイトにアクセスしてライブデモをご覧ください
主な特長
- 予約システム:ユーザーは空室のある物件を簡単に検索し、予約することができます。
- リスティングの作成:不動産所有者はリスティングを作成および管理できます。
- ダッシュボード:不動産所有者はダッシュボードにアクセスして、リスティングを管理したり、予約リクエストを表示したりできます。
- ユーザー アカウント:ユーザーはアカウントを作成して、お気に入りの宿泊施設を保存し、予約を管理できます。
テクノロジースタック
このアプリケーションは次のテクノロジーを使用して開発されました。
- MongoDB:プロパティとユーザー データを保存するために使用される NoSQL データベース。
- Express.js: RESTful API を構築し、サーバー側ロジックを処理するためのサーバー側フレームワーク。
- React:ユーザー インターフェイスを構築するための JavaScript ライブラリ。
- Tailwind CSS:フロントエンドのスタイル設定に使用されるユーティリティファーストの CSS フレームワーク。
- Node.js:サーバー側のコードを実行するために使用される JavaScript ランタイム環境。
- Vercel:静的サイトのホスティングと展開のためのクラウド プラットフォーム。アプリケーションのフロントエンドの展開に使用されます。
- AWS S3:ファイルストレージ用の Amazon Simple Storage Service (S3)。ユーザーはプロパティ画像をアップロードおよび取得できます。これにより、安全でスケーラブルなファイル ストレージが可能になり、プロパティ イメージを処理するための信頼性が高く効率的なシステムが保証されます。
はじめる
VacationVibeアプリをローカルで実行するには、次の手順に従います。
- リポジトリのクローンを作成します:
git clone https://github.com/junaidsaleem10144/VacationVibe.git - プロジェクト ディレクトリに移動します:
cd VacationVibe - 依存関係をインストールします。
- バックエンド:
apiフォルダーに移動し、 npm install実行します。 - フロントエンド:
clientフォルダーに移動し、 npm install実行します。
-
apiフォルダーに.envファイルを作成し、必要な環境変数を指定します。必要な変数については、 .env.exampleファイルを参照してください。 - 開発サーバーを起動します。
- バックエンド:
apiフォルダーで、 npm run devを実行します。 - フロントエンド:
clientフォルダーでnpm run startを実行します。
これで、ブラウザを開いてhttp://localhost:4000にアクセスすることで、 VacationVibeアプリにアクセスできるようになります。
フォルダー構造
プロジェクトは特定のフォルダー構造に従います。
-
api/ : サーバーのセットアップ、ルート、モデルを含むバックエンド コードが含まれます。 -
client/ : React コンポーネント、スタイル、アセットなどのフロントエンド コードが含まれます。
謝辞
VacationVibeの開発に貢献した次のリソースとライブラリに感謝の意を表します。
バックエンド
- bcryptjs: パスワードをハッシュして比較するためのライブラリ。
- cookie-parser: Express で Cookie を解析するためのミドルウェア。
- cors: Cross-Origin Resource Sharing (CORS) を有効にするためのミドルウェア。
- dotenv: .env ファイルから環境変数をロードするためのモジュール。
- jsonwebtoken: JSON Web トークン (JWT) を生成および検証するためのライブラリ。
- mongoose: MongoDB 用のオブジェクト データ モデリング (ODM) ライブラリ。
- multer: Express でファイルのアップロードを処理するためのミドルウェア。
- @aws-sdk/client-s3: ファイルを保存するために Amazon S3 と対話するためのクライアント ライブラリ。
- image-downloader: URL から画像をダウンロードするためのライブラリ。
- mime-types: MIME タイプを操作するためのライブラリ。
- Express: Node.js 用の Web フレームワーク。
開発依存関係 (バックエンド):
- nodemon: ファイルの変更が検出されたときに Node.js サーバーを自動的に再起動するユーティリティ。
フロントエンド
- axios: HTTP リクエストを行うためのライブラリ。
- date-fns: 日付を操作およびフォーマットするためのライブラリ。
- act-router-dom: React アプリケーションでルーティングを処理するためのライブラリ。
- 反応: ユーザーインターフェイスを構築するための JavaScript ライブラリ。
- React-dom: React コンポーネントをレンダリングするためのパッケージ。
開発の依存関係 (フロントエンド):
- @types/react: React の型定義。
- @types/react-dom: React DOM の型定義。
- @vitejs/plugin-react: React サポート用の Vite プラグイン。
- autoprefixer: CSS にベンダープレフィックスを追加するための PostCSS プラグイン。
- postcss: CSS ポストプロセッサ ツール。
- tailwindcss: ユーティリティファーストの CSS フレームワーク。
- vite: 最新の Web 開発用のビルド ツール。
VacationVibeお選びいただきありがとうございます。ご質問やご意見がございましたら、お気軽にお問い合わせください。
貢献する
VacationVibeアプリへの貢献は大歓迎です。問題を見つけた場合、または新しい機能を追加したい場合は、お気軽にプル リクエストを開いてください。
ライセンス
このプロジェクトは MIT ライセンスに基づいてライセンスされています。
