Travel Planner

このプロジェクトはNext.jsを使用し、create-next-appでブートストラップされたウェブアプリケーションです。

旅行計画を簡単に作成・管理できるウェブアプリケーションです。

プロジェクト概要

このアプリケーションは、最新のウェブ技術を活用した旅行計画プラットフォームです。

主要な機能

• 地図表示と操作（Google Maps API連携）
• 旅行プランの作成と管理
• GraphQLを使用したデータの取得と操作
• レスポンシブデザイン対応

技術スタック

• フロントエンド

  • Next.js 15.2.0
  • React 19.0.0
  • TailwindCSS
  • Radix UI（UIコンポーネント）
  • Google Maps API

• バックエンド/API

  • GraphQL (Apollo Server & Client)
  • Next.js API Routes

• 開発環境

  • TypeScript
  • ESLint
  • Turbopack
  • GraphQL Code Generator

はじめに

まず、開発サーバーを起動します：

npm run dev
# または
yarn dev
# または
pnpm dev
# または
bun dev

ブラウザでhttp://localhost:3000を開くと、アプリケーションが表示されます。

app/page.tsxを編集することでページの内容を変更できます。ファイルを編集すると、ページは自動的に更新されます。

このプロジェクトでは、next/fontを使用して、Vercelの新しいフォントファミリーであるGeistを自動的に最適化して読み込んでいます。

開発環境のセットアップ

1. リポジトリのクローン

git clone [repository-url]
cd travel-planner

2. 依存関係のインストール

npm install

3. 開発サーバーの起動

npm run dev

4. ブラウザで以下のURLにアクセス

http://localhost:3000

詳細情報

Next.jsについて詳しく学ぶには、以下のリソースをご覧ください：

• Next.jsドキュメント - Next.jsの機能とAPIについて学ぶ
• Next.jsラーニングガイド - インタラクティブなNext.jsチュートリアル

Next.jsのGitHubリポジトリもご覧ください。フィードバックや貢献を歓迎しています！

Vercelへのデプロイ

Next.jsアプリをデプロイする最も簡単な方法は、Next.jsの作者が提供するVercelプラットフォームを使用することです。

詳しくはNext.jsデプロイメントドキュメントをご覧ください。

データベース設定

このプロジェクトではHasura GraphQL EngineとPostgreSQLを使用しています。

必要な環境変数

.envファイルを作成し、以下の環境変数を設定してください：

# Database Configuration
# docker-compose の postgres が初回起動時に使うパスワード（未設定なら postgrespassword）
POSTGRES_PASSWORD="your-local-db-password"
DATABASE_URL="postgresql://masaaki:your-local-db-password@localhost:5432/mydb?schema=public"

# Hasura Configuration
NEXT_PUBLIC_HASURA_GRAPHQL_ENDPOINT="http://localhost:8080/v1/graphql"
# 管理シークレットは NEXT_PUBLIC_ を付けないこと（付けるとビルド出力に埋め込まれる）
HASURA_GRAPHQL_ADMIN_SECRET="your-local-admin-secret"

# API Keys
OPENAI_API_KEY="your-openai-api-key"
NEXT_PUBLIC_GOOGLE_MAPS_API_KEY="your-google-maps-api-key"

ローカル開発環境のセットアップ

1. PostgreSQLとHasuraの起動

   # Docker Composeを使用する場合
   docker-compose up -d postgres graphql-engine data-connector-agent
   
   # 手動でセットアップする場合はDATABASE_SETUP.mdを参照
   

2. マイグレーションの適用

   cd hasura-project
   hasura migrate apply --endpoint http://localhost:8080 --admin-secret travelplanner9032
   

3. メタデータの適用

   hasura metadata apply --endpoint http://localhost:8080 --admin-secret travelplanner9032
   

4. Hasuraコンソールへのアクセス

   # CLIを使用（推奨）
   hasura console --endpoint http://localhost:8080 --admin-secret travelplanner9032
   
   # またはブラウザで直接アクセス
   # http://localhost:8080/console
   

詳細なデータベース設定については、DATABASE_SETUP.mdを参照してください。

ライセンス

このプロジェクトはMITライセンスの下で公開されています。