TripDoU ~Do U Trip?~

https://github.com/ojiro-doi/progate-hato

React

CSS

JavaScript

HTML

TailwindCSS

旅行準備をさらに楽しく、簡単にしてくれるアプリ

Hayato Yamagata (Gata)

推しアイデア

行き先をランダムで提案してれる部分と自分で選択できる部分。具体的に行きたい場所がなくても、人数、予算、日数を選択するだけで行き先を提案してくれる他、行きたい場所が決まっている場合は、その場所の情報を提供してくれる点。

作った背景

今回のハッカソンに参加する際に、全員がAPIを使った開発を経験したことがなかったため、何らかのAPIを叩いてみたいという意見からMAP APIを使ったアプリを作成した。また今回のテーマ「ドウ」を道と解釈し、旅行支援にたどり着いたため。

推し技術

APIを数多く使っている点。行き先のマップを表示するためのGoogleMapまもちろん、その場所の情報を添付するためにYoutubeとWikiのAPIを使用している。また、旅行プランの提案や不明点の解決のためにOpenAIのAPIを使っており、ChatGPT4を利用できる。

プロジェクト詳細

このサービスの機能

  • ランダムな行き先を提案してくれ、その行き先の情報をMAP、動画、等で提供してくれる。
  • 行き先が決まっている場合も、条件等を添付することで条件に合った旅行プランを提案してくれる。
  • ランダム以外に、自分の要求を元に行き先を決めることもできる(綺麗な海が見たい->オーストラリア等)

技術の無駄使い

  • 1画面を実装するために4種類のAPIを叩いて、情報を表示した(-5$+二徹)
  • OpenAIのAPIを酷使(検索、提案、問題解決etc...)
  • Tailwind cssを利用してレスポンシブデザインに対応

苦労した点

  • APIの利用回数を把握しておらず、開発中にAPIを叩きすぎて怒られる。
  • OpenAIのAPIが有料ということを知らず、勝手に課金してしまった
  • メンバー全員のコンディジョンが最悪な状態で開発(不眠3体調不良1)
  • メンバーの一人が5/4->5/5の間で大阪から東京まで夜行バスで大移動(不眠)
  • Reactのライフサイクルの管理に苦戦
  • ランダムで受け取った値の受け渡しに翻弄される
  • 入力フォームで入力した値、選ばれた国の名前、緯度、経度の情報をデータベースなしでの渡し方と、chat-gptでテキストとして返された回答からどうやって国の情報を結果画面に送るかに苦戦.

Hayato Yamagata (Gata)

@1264e539702df5ae