Auction Website
1.0.0
オークションポイントは、ユーザーがアイテムを売買できるWebサイトです。このフルスタックプロジェクトでの私の目的は、eBayと同様のオンラインオークションプラットフォームの設計と開発でした。実装はREST-APIアーキテクチャに従っており、いくつかの重要な機能は次のとおりです。
JavaScriptスタックは、より簡単かつ高速な展開に使用され、バックエンドのExpressおよびnode.js 、データベースのMySQL 、およびフロントエンドで反応しました。データモデリング、関連付け、およびクエリは、後遺症を使用したオブジェクトリレーショナルマッピングで処理されるため、別のリレーショナルデータベースも使用できます。
バックエンドMySQLまたは同様のリレーショナルデータベースの場合、およびnode.jsとnpmのインストールが必要です。
config.jsonファイルに、個人のmysql設定を追加します。
Express、Cors、およびその他の必要なモジュールをインストールするには、APIフォルダーで実行されます： npm install
データベースに続編を接続するには、 sequelize initを実行します。
トランザクションは、SSL/TLSプロトコルを介して暗号化されます。証明書をローカルに作成するには、 mkcert使用して、次のパスを追加できます。
const sslServer = https . createServer ( {
key : fs . readFileSync ( '/yourpath/key.pem' ) ,
cert : fs . readFileSync ( '/yourpath/cert.pem' )
} , app ) ;サーバーを起動するには、APIディレクトリで実行するだけです。
npm start
フロントエンドの場合、必要なすべての依存関係は、 package.jsonファイルで定義されています。それらをインストールするには、フロントディレクトリで単に実行するだけです： npm install
フロントディレクトリの実行でフロントエンドを起動するには：
npm start
アプリケーションの設計には、純粋なCSSといくつかの材料UIコンポーネントを使用しました。ページの遷移と編集ページにいくつかのアニメーションが追加されました。タイトルと主な要素には、シンプルで時代を超越した書体であるFuturaを使用しましたが、ボディと詳細にはRobotoやその他の同様のSans-Serifフォントを使用しました。
サイトのウェルカムページはかなりシンプルで、新しい訪問者にサイトへの参加に興味を持ってもらうことを目指しています。ログインボタンと提供されるサービスの簡単な要約のみがあるため、情報に圧倒されません。
オークションページから、ユーザーはカテゴリ、検索、またはフィルターごとにリストを閲覧できます。カテゴリには階層構造があります。これは、自己参照外部キーを使用し、必要に応じてフロントエンドとバックエンドの両方に再帰的にツリーを構築することにより、MySQLで達成されました。
オークションページにはアイテムのすべての詳細があり、買い手または売り手がそれを表示している場合に異なるオプションが表示されます。写真はカルーセルに表示され、写真のアップロードにはバックエンドでマルターAPIを使用しました。場所を表示するには、 OpenStreetMapとリーフレットを使用しました。ユーザーは、ピンをドロップするか、検索して正確な場所を追加できます。上記のスクリーンショットで見られるように、マップ用のポラロイドのような容器を設計しました。そこでは、座標がDMS形式で表示されます。
登録フィールドとWebサイトの他のフォームについては、 YUPを使用して、 Formikライブラリと組み合わせてスキーマ検証を実行しました。ユーザーのパスワードは、 BCRYPT関数を使用してデータベースに保存されます。
プロフィールページでは、買い手は売り手のすべての利用可能なアイテムを見ることができます。ユーザーごとに同様のダッシュボードページが提供されており、アイテムも推奨されます。推奨システムでは、マトリックス因数分解アルゴリズムを使用しますが、ユーザーがオークションにアクセスしたり入札しているときに、そのデータが収集されます。
受信トレイ、アウトボックス、新しいメッセージを送信する機能は別として、メールクライアントにはメッセージングインターフェイスもあります。そこには、メッセージは別として、買い手はアイテムが到着したときに売り手を評価し、売り手はそれぞれ支払いを完了したときに買い手を評価できます。
管理者にログインすると、ユーザーアプリケーションを承認したり、eBay DTDテンプレートに続いてXML、JSON、またはCSV形式でオークションの詳細をエクスポートできます。また、データベースに入力して[推奨]アルゴリズムをトレーニングするために、UCLAが提供するXML形式のeBay Webサイトの実際のデータを使用しました。
このウェブサイトは、Express、node.js、mysql、Sequelize and Reactを使用して構築されました。
