← プロジェクトに戻る ウェブアプリケーション・自動車

Car Market Node.js

検索、フィルタリング、詳細なリスティング機能を備えた車両マーケットプレイス。

Car Market Node.js
プロジェクト

プロジェクト

Car Marketは、車両カタログを中心に構築されたウェブアプリケーションで、検索、フィルタリング、詳細な車両ページを備えています。レスポンシブデザインと直感的なナビゲーションを備えたモダンなアーキテクチャを実証しています。

システムアーキテクチャ & 主要構造

Car Marketは、疎結合なNode.js・Express REST APIと、超高速なReact（Vite）シングルページアプリケーションを組み合わせ、1秒未満の車両検索と快適な出品管理を実現しています。

┌─────────────────────────────────────────────────────────────────────────────┐
│                    Car Market Full-Stack Architecture                       │
└──────────────────────────────────────┬──────────────────────────────────────┘
                                       │
           ┌───────────────────────────┼───────────────────────────┐
           ▼                           ▼                           ▼
  🔍 スマート検索エンジン       📸 メディア & 出品管理ハブ       🛡️ セキュリティ & GDPR準拠
  • DB連動デュアルスライダー      • 最大15枚ドラッグ＆ドロップ      • 審査待ちキューシステム
  • メーカー ➔ モデル連動選択      • SortableJSカバー写真選択   • 高解像度車両検査ビュー
  • 検索結果0件の防止      • Sharp自動WebP変換        • GDPR 第17条 & 第20条
  • リアルタイム在庫数表示      • YouTube & Shorts埋め込み       • JWT & Bcrypt暗号化

リアルタイム車両検索

ページを再読み込みすることなく、瞬時に条件を絞り込める非同期マルチフィルター。

自動化された最適化

ドラッグ＆ドロップによる画像の並び替えと、サーバー側での自動WebP変換・軽量化処理。

欧州GDPR完全準拠

ワンクリックでのJSONデータエクスポート機能と、サーバーからの完全データ抹消（忘れられる権利）に対応。

1. 高度な検索エンジン & 動的フィルター

MySQLデータベース内の実際の在庫上限・下限値を自動計算し、無駄のない快適な検索体験を提供します：

  • DB連動デュアルスライダー (rc-slider): 価格、走行距離、年式のスライダーが、データベース内の最小値・最大値に合わせて自動的にレンジを調整。
  • 連動型 メーカー ➔ モデルセレクター:
    • 検索結果ゼロ防止: 現在有効な在庫車両が存在するメーカーとモデルのみを選択肢として動的に表示。
    • 在庫数バッジ: 各選択肢の横に現在の該当在庫数をリアルタイムで表示（例：Renault (4) ➔ Clio V (2)）。
  • スペック絞り込みフィルター: カテゴリー（乗用車、バイク、商用車）、ボディタイプ（セダン、SUV、ワゴン等）、燃料種別、トランスミッションごとの絞り込み。
  • 非同期ソート機能: 新着順、価格の昇順/降順、走行距離順、年式順に瞬時に並び替え。

2. 詳細スペックシート & マルチメディア体験

成約率（CVR）を高める2カラムレイアウトで構成された車両詳細ページ (/vehicule/:slugOrId)：

インタラクティブメディアギャラリー

カルーセルの先頭にYouTube動画・Shortsを配置し、高解像度WebP写真とサムネイルナビゲーションを統合。

詳細スペック一覧

排気量（cm³）、馬力（hp）、燃費、排出ガス基準（Euro 1〜7）、車体番号（VIN）、ドア数、乗車定員を網羅。

出品者へのダイレクト連絡

ワンタップで発信できる国際形式のtel:リンクと、車両IDが自動入力される問い合わせフォーム。

3. 出品機能 & 画像処理パイプライン

個人・法人出品者の双方が直感的に操作できる効率的な出品ワークスペース：

  • 自動車データマスター（120ブランド・1,890以上のモデル）: 網羅的な車両データベースにより、正確なカテゴリー分けと出品登録をサポート。
  • プロフィール入力必須チェック: 氏名や電話番号の確認が完了するまで出品公開を制限し、不正出品を防止。
  • ドラッグ＆ドロップ画像並び替え (SortableJS): 最大15枚の画像を一括アップロードし、直感的なドラッグ操作でメインカバー写真を指定可能 ⭐ カバー写真.
  • Sharp自動WebP変換: サーバー上でモダンなWebP形式（品質80%）へ自動変換し、EXIF向き情報も自動補正。
  • 「出品管理」ダッシュボード: ステータス別タブ（すべて、公開中、審査待ち）、直接編集、削除機能を備えた管理画面。

4. 品質管理 & 管理者審査ダッシュボード

スパムや不正な車両出品を排除するための管理者向け審査システム：

審査待ちキュー

ユーザーが投稿した新規出品は、管理者の承認を受けるまで保留状態で保護。

詳細検査ビュー

写真の拡大確認、VINの検証、詳細仕様や出品者情報を確認できる専用検査画面 (/admin/vehicule/:id)。

ワンクリック管理アクション

承認・公開、非承認・無効化、内容の直接修正を即座に実行可能。

5. セキュリティ & 欧州GDPR完全準拠

EU一般データ保護規則（GDPR 2016/679）の厳格なプライバシー基準に対応：

  • ステートレスJWT認証: Bcryptハッシュ化（8文字以上、大文字・小文字・数字・記号必須）による堅牢なBearerトークン認証。
  • データポータビリティ（GDPR 第20条）: ユーザー情報および全出品履歴を構造化JSONとしてワンクリックで一括エクスポート (/api/gdpr/export)。
  • 忘れられる権利（GDPR 第17条）: アカウント削除時に、DB内の個人データおよびサーバー上の全画像ファイルを完全に物理削除。

6. 技術仕様・機能マトリクス

機能 技術的実装 SEO & パフォーマンス上の利点
動的スライダー rc-slider + Prisma DB Aggregations 高エンゲージメント ページリロード不要の高速フィルタリング
連動カタログ選択 Prisma vehicles: { some: { isApproved: true } } 低品質ページの防止 該当なしの無駄な検索結果ページのインデックスを防止
画像最適化 Sharp Node.js library to WebP 80% Core Web Vitals FCP（初回コンテンツ描画）の大幅な高速化
動画埋め込み Responsive 16:9 YouTube iframe embeds 滞在時間の向上 ユーザーのサイト内平均滞在時間を延長
URLスラッグ slugify with unique ID suffixes クロール性向上 キーワードを含んだクリーンな検索エンジン向けURL
セキュリティ & プライバシー JWT Tokens + Bcrypt + GDPR Art. 17 & 20 法的コンプライアンス EUの厳格な個人情報保護規制への完全対応

実際のプラットフォームを体験する

リアルタイム検索フィルター、車両一覧、レスポンシブなUIを実際にご確認ください。

Webサイトを見る ↗