273* Logo

    ©2023-2026 273DoWorks

    2024-02-20

    Web ServiceFrontend

    25

    83

    25

    23

    1

    Vercel
    Docker
    Tailwind CSS
    Next.js
    TypeScript
    Vercel
    Docker
    Tailwind CSS
    Next.js
    TypeScript
    Vercel
    Docker
    Tailwind CSS
    Next.js
    TypeScript
    Vercel
    Docker
    Tailwind CSS
    Next.js
    TypeScript
    Vercel
    Docker
    Tailwind CSS
    Next.js
    TypeScript
    Vercel
    Docker
    Tailwind CSS
    Next.js
    TypeScript
    Vercel
    Docker
    Tailwind CSS
    Next.js
    TypeScript
    Vercel
    Docker
    Tailwind CSS
    Next.js
    TypeScript
    Vercel
    Docker
    Tailwind CSS
    Next.js
    TypeScript
    Vercel
    Docker
    Tailwind CSS
    Next.js
    TypeScript

    概要

    検索半径とオプションを指定して、現在地からレストランを検索することができます。オプションは、キーワード検索(「店名かな、店名、住所、駅名、お店ジャンルキャッチ、キャッチのフリーワード」)、「おすすめ順」と「距離順」で検索結果の並び順を指定することができます。 ブラウザの位置情報をオンにしましょう。

    工夫

    使っていて楽しいと思える UI や仕掛け を用意しました。また、ボタンなどを極力排除して、直感的でシンプルなデザインに仕上げました。現在地が取得できない場合は操作できないように視覚的に分かるようにしました。リンクで共有できるようにしたいため、 検索クエリを暗号化 することでセキュリティ面に配慮しました。

    アプリ機能

    1. レストラン検索

    検索半径とオプションを指定して,現在地からレストランを検索することができます. オプションは,キーワード検索(「店名かな,店名,住所,駅名,お店ジャンルキャッチ,キャッチのフリーワード」),「おすすめ順」と「距離順」で検索結果の並び順を指定することができます. ブラウザの位置情報をオンにしましょう.

    c9153793-67cc-4498-b7e4-09e534b20851 /3023102e-5eff-48ae-a05d-26f9d0882311

    2. レストラン一覧表示

    検索条件をもとに得られたレストランを一覧で表示します.レストランが見つからなかった場合は NoData ページが表示されるので,検索画面まで戻りましょう. b94adc6a-f3f7-43dc-98ea-61ece892c3d7) プライバシーのためぼかし処理をしています.

    3. レストラン詳細表示

    一覧ページからレストランを選択すると,詳細な情報を閲覧することができます.予約リンクもありますので,簡単に予約を行うことも可能です. 748974c2-56f8-45c0-a0b8-8ea6bf1fc71c プライバシーのためぼかし処理をしています.

    4. 例外処理

    レストラン一覧のデータがなかったり,クエリに存在しないレストランの id が指定された場合,特定のページを返すようになっています.

    5005c1ac-1a8b-4ed2-8b23-44eeba3f9a65 d1287e56-d0f5-4e87-8ca9-83c77401b829

    免責事項

    この作成物および同梱物を使用したことによって生じたすべての障害・損害・不具合等に関しては,私と私の関係者および私の所属するいかなる団体・組織とも,一切の責任を負いません.各自の責任においてご使用ください.


    2024-02-20