ハッカソンテンプレート (Express.js + React)

React + React Router + Tailwind CSS + Express.js の最低構成テンプレートアプリです。

機能

• 画面表示: React + Tailwind CSSによるレスポンシブUI
• 状態管理: React Hooksによるローカル状態管理（カウンター）
• 画面遷移: React Routerによるページ遷移（Home ↔ About）
• API連携: Express.js バックエンドとの簡単な通信デモ

開発環境セットアップ

前提条件

• Node.js 18以上
• npm

ローカル開発

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

# ルートディレクトリで
npm install

# バックエンドの依存関係
cd backend && npm install

# フロントエンドの依存関係  
cd ../frontend && npm install

2. 開発サーバー起動

# ルートディレクトリから（フロントエンド・バックエンド同時起動）
npm run dev

# または個別起動
npm run dev:backend  # バックエンドのみ (localhost:3001)
npm run dev:frontend # フロントエンドのみ (localhost:5173)

Docker環境

# Docker Compose で起動
docker-compose up --build

# アクセス
# フロントエンド: http://localhost:3000
# バックエンドAPI: http://localhost:3001

API エンドポイント

Hello World デモ

• GET /api/hello - Hello Worldメッセージ取得

その他

• GET /api/health - ヘルスチェック

プロジェクト構成

dohack-template-express/
├── backend/           # Express.js API サーバー
│   ├── server.js     # メインサーバーファイル
│   └── package.json  # バックエンド依存関係
├── frontend/         # React アプリケーション
│   ├── app/         # React Router v7 アプリ
│   │   └── routes/  # ページコンポーネント
│   │       ├── home.tsx   # ホームページ（カウンター + API）
│   │       └── about.tsx  # このアプリについて
│   ├── public/      # 静的ファイル
│   └── package.json # フロントエンド依存関係
├── docker-compose.yml
├── Dockerfile.backend
├── Dockerfile.frontend
└── package.json     # ルート設定

本番環境デプロイ

# フロントエンドビルド
cd frontend && npm run build

# バックエンド起動
cd ../backend && npm start

このテンプレートを元に、ハッカソンでの迅速な開発を始められます！