マーケットプレイスの検索ページ

主な機能:

     ユーザーがアーティストや曲名を入力することで、関連する結果を表示します。

制作期間: １ヶ月

担当分野:フロントエンド

使用技術: 主にtypescriptを使用し、フレームワークはReact,Next.jsを利用しました。

開発したページ：

苦労した点：

設計段階では、検索欄に文字が入力される度に検索を表示する、リアルタイム検索を採用しました。しかし、アーティストの名前や作品名に頻繁に出現する文字を入力すると、大量の結果が返され、サーバーの負荷が増大するという問題が浮上しました。この課題に対処するため、ユーザーがフォームを提出した時にのみ、検索を実行するように仕組みを変更しました。この改善により、サイトの応答性が向上し、ユーザーはより迅速な検索体験を享受できるようになりました。また、サーバーへの負荷も軽減され、サイト全体のパフォーマンスが向上しました。

工夫した点:

• 空の結果の処理：検索結果が空の場合、カスタマーには該当するデータがないことを示すメッセージが表示されます。
• レスポンシブデザイン：ページはレスポンシブデザインに対応しており、ウィンドウの高さに応じて検索ボックスの高さが調整されます。
• 多言語対応：ページのテキストは多言語化されており、ユーザーの地域や言語設定に応じて表示言語を切り替えることができます。
• 直感的な操作性：ユーザーは直感的な操作で検索を行い、検索結果を素早く閲覧できます