cake delivery

ケーキ配達ウェブサイト

導入

ケーキ配信アプリは、バックエンド用の.NET 0.8を使用して構築されたフルスタックWebアプリケーション、Web API、データベース管理用のSQL、およびフロントエンドの対応です。このアプリにより、顧客はケーキのカタログを閲覧し、注文をカスタマイズし、自動化された場所検出で安全な注文を配置できます。このシステムには、ケーキ、カテゴリ、顧客、ユーザーを管理するための管理パネルも含まれており、顧客と管理者の両方にスムーズなエクスペリエンスを提供します。

特徴

顧客アプリ

• ケーキカタログ
  顧客は、カテゴリごとに整理された幅広いケーキを探索することができ、完璧なケーキを簡単に見つけることができます。

• カスタマイズを注文します
  顧客は、特定のケーキサイズと数量を選択して注文をパーソナライズし、チェックアウトする前に簡単な管理のためにこれらのカスタマイズされたケーキをショッピングカートに追加できます。

• 場所の自動検出
  Leaflet React統合により、アプリはチェックアウト中に顧客の場所を自動的に検出し、特にモバイルユーザーに役立つアドレスを手動で入力する必要性を排除することでプロセスを簡素化します。

• 安全なチェックアウト
  チェックアウトプロセスは、重要な顧客の連絡先の詳細、支払い情報を収集し、自動検出された配信アドレスを確認し、スムーズで安全な注文体験を確保します。

• フィードバックシステム
  注文を完了した後、顧客は自分の経験についてフィードバックを残すよう招待されます。これらのレビューはホームページに表示され、新しい訪問者が他の顧客からの実際の証言を見ることができます。

• ダイナミックホームページ

  • 最近追加されたケーキ：カタログへの最新の追加を強調し、顧客が新鮮なオプションを返して探索することを奨励しています。
  • 顧客のフィードバックと証言：顧客からの本当のフィードバックを表示し、信頼性を追加し、新しいユーザーが情報に基づいた意思決定を支援します。
  • 連絡先情報：必須の連絡先の詳細が顕著に表示されるため、顧客が質問や特別なリクエストで簡単に手を差し伸べることができます。

管理パネル

• Admin Login Pageは、管理者パネルへの安全なログインアクセスを提供し、認定ユーザーのみがアプリのデータと機能を管理できるようにします。
• ダッシュボードの概要Admin Dashboardは、その週の販売の簡単な要約を提供し、管理者が一目でビジネスパフォーマンスメトリックを確認し、傾向を特定し、データ駆動型の決定を下すことができます。
• ケーキ管理専用のケーキページにより、管理者はカタログからケーキを表示、追加、更新、または削除することができます。在庫数量管理：管理者は、在庫のある各ケーキの量を調整して、顧客に正確な可用性を確保することができます。
• カテゴリ管理カテゴリページは、ケーキを分類（誕生日、記念日、除草など）に整理し、顧客が簡単にナビゲートできるようにします。管理者は、新しいカテゴリを追加したり、既存のカテゴリを編集したり、古いカテゴリを削除したりできます。
• 顧客管理管理者は、注文を行った顧客の完全なリストにアクセスし、顧客の行動に関する洞察を提供し、アカウント固有の問い合わせや問題に対処できるようにすることができます。

• ユーザー管理管理者は、追加のスタッフメンバーの新しいユーザーアカウントを作成し、既存のユーザー情報を管理し、必要に応じて電子メールアドレスを更新したり、パスワードをリセットしたりして、スムーズで安全なシステム操作を確認できます。

使用されたテクノロジー

データベース

• データベース：ADO.NETを備えたMicrosoft SQL Server。

フロントエンド

• ビルドツール：効率的なプロジェクト構築のためのVite。
• Reactクエリ：リモート状態管理とデータフェッチの場合。
• UI状態管理のコンテキストAPI。
• Reactルーター：ルーティングを実装します。
• Tailwindcss：スタイリング用。
• フォームを管理するための反応フックフォーム。
• リチャート：統計を示すチャートのライブラリ。
• React-Hot-Toast：トースト通知用。
• React-Icons：UIアイコン用。

バックエンド

• コントローラー：

  • リソースのHTTP要求（ケーキ、注文など）を整理および処理します。
  • HTTPメソッドを介してCRUDアクションを定義します（get、post、put、削除）。

• モデル/DTO：

  • データ構造を定義して、クライアントサーバーデータ転送を合理化します。

• HTTPメソッド：

  • 取得：リソースを取得します（例、ケーキのリスト）。
  • 投稿：新しいリソースを作成します（たとえば、注文を送信します）。
  • PUT：既存のリソースを更新します（例、ケーキの詳細を変更します）。
  • 削除：リソースを削除します（たとえば、ケーキを削除します）。

• ステータスコード：

  • 200 OK：データ取得/更新の成功。
  • 作成された201：リソース作成は成功しました。
  • 204コンテンツなし：リソースが正常に削除されました。
  • 400悪いリクエスト：受信した無効なデータ。
  • 404見つかりません：リソースは存在しません。

• 検証：

  • 着信データが正確で安全であることを保証します。
  • モデル属性とカスタムロジックがデータ要件を強制します。

ライブデモ

私をクリックしてください！