Newer
Older
2024-hinata / fanfarm-share / fanfarm-frontend / README.md

FanFarm - フロントエンド(React)

Fanfarm は、募集者と応募者をマッチングするシステムです。
このリポジトリはそのフロントエンド部分で、React を用いて構築されています。

主な機能

  • 募集登録フォーム:作業の募集を登録
  • 応募登録フォーム:募集に対する応募の登録
  • 一覧表示:募集、応募、マッチの一覧表示
  • メッセージボード:マッチごとのチャット機能

使用技術

  • フレームワーク: React
  • 状態管理: useState / useEffect(React Hooks)
  • API通信: Fetch API(Sinatraバックエンドと通信)
  • スタイリング: CSSファイル(fanfarm.App.css)

セットアップ手順

  1. 依存パッケージをインストール: bash npm install

  2. 開発サーバーを起動: npm start

  3. ブラウザでアクセス: http://localhost:3000

バックエンドとの連携

このフロントエンドは、以下のようなエンドポイントにHTTP通信を行います:

主なAPIエンドポイントと連携関数

エンドポイント HTTPメソッド フロントエンド関数名 説明
/api/recruitments GET getRecruitments() 募集一覧を取得
/api/recruitments POST postRecruitment(data) 募集を新規登録
/api/applies GET getApplies() 応募一覧を取得
/api/applies POST postApply(data) 応募を新規登録
/api/matches GET getMatches() マッチング一覧を取得
/api/matches POST postMatch(data) マッチングを新規登録
/api/messages GET getMessages(match_id) マッチングIDに紐づくメッセージ取得
/api/messages POST postMessage(data) 新規メッセージを送信