アプリの説明

アプリの概要

【アプリ概要】

「わらしべ」は、使わなくなった物と欲しい物を交換できる物々交換アプリです。

現在、多くの物がまだ使える状態であるにもかかわらず、「不要になった」という理由だけで廃棄されています。そこで私たちは、お金による売買ではなく、物と物を交換する仕組みを通して、廃棄物の削減と資源の有効活用を目指します。

本アプリでは、ユーザーが不要になった物を出品し、自分の欲しい物を登録することで、条件に合った相手と交換することができます。商品一覧やカテゴリ検索から交換相手を探せるほか、商品詳細画面では相手の希望条件を確認し、自分の商品を使って交換申請を行うことができます。

また、「わらしべ」の最大の特徴は、昔話の「わらしべ長者」のように、物を次々と交換して価値を高めていく体験をオンラインで実現できる点です。将来的にはAIを活用し、複数人をつなぐ交換ルートを提案することで、従来では成立しなかった交換を実現したいと考えています。

まずは10代から20代を主なターゲットとし、SNSを通じて新しい交換体験を広げながら、「捨てる前に交換する」という新しい価値観を社会に浸透させることを目指しています。

アプリの使用方法

「アカウント作成」をクリック ↓ ユーザー名、メールアドレス、パスワードを入力 ↓ 住所を入力してプランを選択 ↓ 利用開始！ ↓ まずは商品登録！商品の写真・カテゴリ・商品の状態・価格・交換で欲しいもの・コメントを入力

1.普通に交換する場合

商品を登録したらホーム画面から交換したい商品を探す 交換したい商品が見つかったら「詳しく見る」をクリック ↓ 「交換を申請する」をクリック 自分が出す商品を選択する ↓ 「リクエスト」をクリックすると申請したものと申請を受けとったものが見れます 申請をうけたものが欲しいと思ったら「承認」を、いらないと思ったら「拒否」をクリック ↓ 「交換成立」をクリック ↓ 交換成立！！

2.欲しいものに向けてAIに手伝ってほしい場合

2.1自分でもある程度ルート選択をしたいとき 上の「AI提案」をクリックし、開始する商品、到達したい商品を入力 例として「ニットビーニー」から「NIKEE エアフォース1」にしたいと入力すると上の写真のようにAIがまず交換する商品を提案してくれ、提案理由、申請文案を提示してくれる 交換してもいいと思ったら、「ルートに追加」をクリック 他のものの方がいいと思ったら「別候補を見る」をクリック これを繰り返し、画面を下にスクロールすると... ↓ このようにルートが表示され、ユーザーはこれをもとに目標の商品に向けわらしべする 2.2AIに全て任せたいとき この画面で「オートモード」をクリック ↓ 目標、開始商品を入力（今回は例として目標をNIKEE エアフォース1、開始商品スウェットパーカーを入力） ↓ 下にスクロールして「開始」をクリック 画面の右に進行ログが表示される この画面の「再開」、「一時停止」でいつでも止められる

3.自分のものがランダムなものに変わるスリルを味わいたいとき

上の「ガチャ」をクリックし、回すための商品を選択 商品の価格帯によってガチャから排出される商品の価格帯が変わる ↓ 「交換する」をクリック ↓ 確認が入るので「ガチャを回す」をクリック ↓ ガチャ結果が表示される

コード説明

このアプリは、「わらしべ長者」をモチーフにした物々交換アプリです。 ユーザーは自分の持っている物を登録し、ほかの人の商品に対して交換申請を送ることができます。 コードは React と TypeScript を使っていて、商品を表す Item と、交換申請を表す TradeRequest を中心に設計しています。商品や申請には「交換可能」「申請中」「承認」「完了」などの状態を持たせています。 今はデモデータで動く形にしていて、あとから実際の API に差し替えやすい構成にしています。ハッカソンでもフロントとバックを分担して進めやすいように、機能ごとにコードを分けています。 説明： 「これは商品データの型です。商品名や説明、出品者、ほしい物、画像などを持たせています。status で交換可能、交渉中、交換完了を管理しています。」 説明： 「交換申請には状態を持たせています。申請中、承認、拒否、完了という流れをコード上で管理できるようにしています。」

技術

アーキテクチャ

ユーザー ↓ React 19 + TypeScript + Vite ↓ API通信 Node.js + Express 5 + TypeScript

インフラ

フロントエンド： React 19 / TypeScript / Vite バックエンド： Node.js / Express 5 / TypeScript/gemini API/fire base

開発で工夫した点

今回のチームメンバーは全員が開発初心者であり、コーディング経験もほとんどありませんでした。そのため、いきなりアプリ開発に取り組むのではなく、まずはハッカソンで使用するプログラミング言語や開発の基礎を体系的に学ぶ期間を設けました。学習にはProgateの教材を活用し、それぞれが基本的な文法やプログラミングの考え方、Webアプリ開発の流れについて理解を深めました。また、分からない部分についてはメンバー同士で教え合いながら学習を進めることで、全員が最低限の開発スキルを身につけた状態で開発に入ることができました。

開発期間中は、円滑なコミュニケーションを実現するためにDiscordを活用しました。日々の進捗報告や技術的な質問、アイデアの共有をオンライン上で行うことで、対面で集まれない時間帯でも効率的に開発を進めることができました。また、重要な決定事項やタスクについてはチャンネルを分けて管理し、情報が埋もれないよう工夫しました。

さらに、ソースコードの管理にはGitHubを利用しました。開発初心者にとってはGitやGitHubの操作も新たな学習内容でしたが、ブランチを切って作業を行う方法やプルリクエストを用いたコード共有の方法を学びながら活用しました。これにより、複数人が同時に開発を行ってもコードの競合を最小限に抑え、安全に開発を進めることができました。また、作業内容を記録として残せるため、誰がどの機能を担当しているのかも把握しやすくなりました。

加えて、チーム全員の予定を調整するために調整さんを利用しました。大学の授業やアルバイトなどで全員の予定を合わせることが難しい中でも、定期的にミーティングの時間を確保し、進捗確認や課題の共有を行いました。特に開発終盤は細かな修正や機能追加が多く発生したため、スケジュール管理ツールを活用したことがチーム全体の効率向上につながりました。

このように、開発スキルの学習にはProgate、コミュニケーションにはDiscord、コード管理にはGitHub、スケジュール調整には調整さんを活用することで、全員が初心者でありながらも協力して開発を進めることができました。技術面だけでなく、チーム開発に必要なコミュニケーションやプロジェクト管理の重要性についても学ぶことができ、アプリ開発を通じて大きく成長する貴重な経験となりました。