MLZ-Advanced
土地および不動産販売向けのエンドツーエンドプラットフォーム：公開リード獲得、地図ベースのカスタマージャーニー、在庫・販売・支払い・承認を管理する大規模な内部コンソール。
Next.js 16
React 19
TypeScript
Prisma + MongoDB
Mapbox GL
SCSS
Recharts
概要
MLZ-Advancedは不動産販売ビジネスを支えるオペレーションプラットフォームです。一方は一般・顧客向けで、ランディングページ、プロジェクトや区画を探索できる地図ベースのブラウザ、電話番号認証付きの購入関心登録フローを備えています。もう一方は高機能な内部管理コンソールで、在庫、顧客、購入リクエスト、支払い、承認、レポーティング、コミュニケーションなど、販売オペレーション全体をスタッフが管理できます。プログレッシブウェブアプリ（PWA）として提供され、アラビア語と英語のバイリンガルで動作する、長期運用を見据えた大規模アプリケーションです。
課題
土地や区画の販売には、正確な整合性の維持が困難な多くの状態管理が伴います。各区画には価格設定、寸法、方角、所有権、ライフライン設備情報、そして販売進行に伴い遷移するステータスが付随します。顧客はリードから案件、購入者へと進み、支払いは多様な体系で発生するため承認が必要となり、転売、キャンセル、権限変更など多くの操作においてサインオフが求められます。これらをスプレッドシートや分散したツールで処理することには限界がありました。ビジネスが求めていたのは、不動産運用に不可欠な監査証跡と承認プロセスを備え、対外的なカスタマージャーニーと内部業務機構を一元的に担える単一のシステムでした。
役割とアプローチ
これは長期にわたって拡張されてきた大規模なチームプロジェクトであり、私はフロントエンドエンジニアとして参画しました。一般ユーザー、顧客、社内スタッフという全く異なる利用層が、単一のデプロイ環境を共有しながらも、ルートグループと権限によって明確に分離されるようコードベースが設計されています。私のフロントエンド業務の多くは、地図、一括編集エディタ、チャート、そしてスタッフが実務を行うデータ密度の高い詳細画面など、インタラクション負荷の高い領域に集中しており、サーバーレンダリングされたアクセス制御データの上にクライアントコンポーネントとして構築しました。
技術スタック
主な機能
ギャラリー
課題と解決策
本プラットフォームは単一のアプリケーションから3つの異なる利用層に対応していますが、これは設計を誤りやすいポイントです。単一のデプロイを維持しながら、公開サイト、カスタマージャーニー、社内ダッシュボードを機能と権限ごとに分離するため、Next.jsのルートグループを基盤とした構造を採用しています。ダッシュボードのレイアウト自体が現在のユーザー情報を読み込み、所属部門に応じたモジュールを導出してナビゲーションを適切にフィルタリングします。
実データ規模でのパフォーマンス確保も、常に求められる要件でした。土地の在庫管理では、大規模なリスト、重い地図表示、データ密度の高い詳細ページが不可欠となります。そのため、本アプリではデータ取得と認可処理をサーバー側にとどめ、クライアントコンポーネントは地図、一括グリッドエディタ、チャート、モーダルなど、真にインタラクティブな要素に限定しました。仮想化リストによって長大なテーブルの応答性を維持し、地図データはGeoJSON変換を経由させることで、区画を静的画像ではなく実空間オブジェクトとして描画しています。
成果
MLZ-Advancedは、一般のウェブ訪問者から承認・決済完了に至る販売プロセス全体をカバーし、現場運用が求める在庫詳細、緻密なCRM機能、承認証跡を備えた包括的なシステムです。複数年にわたる高稼働なコードベースというその持続性と規模は、単なるプロトタイプではなく、実業を力強く支えてきたプラットフォームであることを物語っています。