CRM 予約プラットフォームフロントエンド

CRM 予約プラットフォームの Next.js フロントエンドです。

このアプリケーションは、ログイン、登録、予約管理、サービス閲覧、アカウント状態処理のユーザーおよび管理画面を提供します。NestJS バックエンドと /v1 API で連携し、クライアント状態管理には Redux Toolkit を使用しています。

詳細なエンドポイント仕様: docs/assets/api-contract.md

ドキュメント

docs/assets/ に API 契約とフロントエンド設計ドキュメントを整備しています。

api-contract.md — エンドポイント単位の API 契約(英語・原文)
api-contract.ja.md — API 契約(日本語版)
frontend-nextjs-hierarchy-permission.ja.md — ファイル階層とページ遷移・権限システムの全体構造
frontend-nextjs-js-boundary.ja.md — フロント/バック JS 混在の境界
frontend-nextjs-middleware.ja.md — Middleware の責務・実行タイミング・所在階層
frontend-pages-inventory.ja.md — 画面一覧(全ルートの棚卸し)
frontend-screen-transition.ja.md — イベント駆動の画面遷移図(認証イベント → AuthGuard → ルーティング)

技術スタック

Next.js 15 (Pages Router)
React 19
TypeScript
Redux Toolkit
Axios
React Hook Form
Zod
Tailwind CSS
Framer Motion
Jest
React Testing Library

画面デモ

動画はこのページ内でそのまま再生できます。元ファイルは docs/images/ にあります。

ユーザーログイン

booking-login-flow.mp4

ユーザー登録

booking-register-flow.mp4

管理者コンソール

booking-admin-login-flow.mp4

現在のアプリ構成

src 配下の主要フォルダ:

pages/ — ルートエントリポイント
components/ — UI コンポーネントの組み立て
services/ — API クライアント
store/ — Redux スライスとストア設定
contexts/ — UI / 予約関連のコンテキスト
hooks/ — 共通クライアントフック
types/ — 共通 TypeScript モデル
utils/ — ヘルパー関数

実装済みルート

現在のページファイルが定義するルート:

/
/login
/register
/bookings
/admin/bookings
/account-disabled

補足:

/ は未認証ユーザーにはログインページを表示し、認証済みユーザーをアプリ内へリダイレクトします。
/bookings は保護されています。
/admin/bookings が現在の管理画面エントリーページです。
ミドルウェアには /my-bookings のロジックも含まれていますが、現在のコードベースには該当ページファイルがありません。

ランタイム機能

ログイン・登録フロー
HttpOnly Cookie ベースの JWT + リフレッシュトークン認証
変更リクエストに対する CSRF トークン転送
認証状態に基づくルート保護
ロールベースの管理者ルーティング
予約の作成・更新 UI
API クライアント経由のサービス・スロット取得
管理者用予約管理ページ
アカウント無効化 / ロール変更のハンドリング
アプリ全体の Redux ストア
アプリ状態と UI コンテキストによる通知表示

状態管理

現在のアプリは src/store/index.ts で以下の Redux スライスを設定しています:

user
booking
service
slotTime
notification
admin

アプリは src/pages/_app.tsx で Redux の Provider と UIProvider でラップされています。

フォームとバリデーション

現在のコードベースで実際に使用されているもの:

react-hook-form
zod

例:

src/components/molecules/LoginForm.tsx
src/components/molecules/RegisterForm.tsx
src/components/molecules/BookingCreateModal.tsx
src/components/molecules/BookingUpdateModal.tsx

スタイリング

現在の実装で使用しているもの:

Tailwind CSS ユーティリティ
src/components 配下のカスタムコンポーネント
一部のアニメーション UI に対する Framer Motion

依存関係には antd と @tanstack/react-query も含まれていますが、現在のコードベースでは主要なアプリの配線に明確に使われていないため、ここでの主なランタイムフローには含めていません。

環境

サンプル env ファイルが用意されています:

.env.development.example
.env.production.example

プロジェクトのルートに .env.development を作成してください:

NEXT_PUBLIC_API_URL=http://localhost:3001/v1
NEXT_PUBLIC_WS_URL=ws://localhost:3001/ws
NEXT_PUBLIC_INSTANCE_NAME=dev

これにより、ローカルフロントエンドのリクエストは http://localhost:3001/v1 のバックエンド契約と整合します。

Name		Name	Last commit message	Last commit date
.github/workflows		.github/workflows
__mocks__		__mocks__
__tests__		__tests__
docs		docs
e2e		e2e
public		public
scripts		scripts
src		src
.dockerignore		.dockerignore
.env.development.example		.env.development.example
.env.example		.env.example
.env.production.example		.env.production.example
.gitattributes		.gitattributes
.gitignore		.gitignore
Dockerfile		Dockerfile
LICENSE		LICENSE
README.en.md		README.en.md
README.md		README.md
README.zh.md		README.zh.md
docker-compose.yml		docker-compose.yml
eslint.config.mjs		eslint.config.mjs
jest.config.ts		jest.config.ts
jest.setup.js		jest.setup.js
next.config.container.mjs		next.config.container.mjs
next.config.ts		next.config.ts
package-lock.json		package-lock.json
package.json		package.json
playwright.config.ts		playwright.config.ts
postcss.config.mjs		postcss.config.mjs
run-ci-local.ps1		run-ci-local.ps1
tailwind.config.js		tailwind.config.js
tsconfig.json		tsconfig.json

Navigation Menu

Repository files navigation

CRM 予約プラットフォームフロントエンド

ドキュメント

技術スタック