Problem statement

We want to build a dummy restaurant dashboard that has the following features.

  1. Login page
  2. Restaurant search bar with Autocomplete
  3. A map that shows up a list of locations where the restaurant is present on the map.
  4. A bookmark and remove button to each map.
    1. Maps, where we click on like button, should go to a liked restaurants page
    2. Maps, where we click on the remove button, should be removed.
  5. The bookmark/remove button actions need to be stateful on the same device(You need to store and retrieve them from the cookie in the browser).
  6. The UI should look intuitive. Use your best colours/themes.

Details on each page

Sign in page

  1. Take username and password as input.

  2. Check whether username and password are valid by calling an API and comparing against this airtable - link

    1. A sample curl command that can interact with this table is given below
    2. Table name:
    3. Bearer key : keyfXgn8PL6pB3x32
    4. Table name : ”Grid view”
    5. Id : appjWdL7YgpxIxCKA
    curl "<https://api.airtable.com/v0/appjWdL7YgpxIxCKA/credenitals?maxRecords=3&view=Grid%20view>" \\
  -H "Authorization: Bearer keyfXgn8PL6pB3x32"

Output:
{"records":[{"id":"rec7UWjmvv9oDIY2j","createdTime":"2022-06-27T16:20:56.000Z","fields":{"username":"user1","password":"password1"}},{"id":"recupBOdoQu6lDycP","createdTime":"2022-06-27T16:20:56.000Z","fields":{"username":"user2","password":"password2"}},{"id":"recriHz91fVbQlP9o","createdTime":"2022-06-27T16:20:56.000Z","fields":{"username":"user3","password":"password3"}}]}

Home page

  1. Once the user logs in, there will be 2 tabs on the side

    1. It opens with a home page, where you will have an auto complete with restaurant name. Once you click on add on the restaurant name, the map needs to get added to the page in the end.

    2. Below the map of each restaurant you need to have two buttons - bookmark and remove.

      1. Clicking on bookmark needs to move the map to the book mark page.
      2. Clicking on remove restaurant needs to remove the restaurant map from the page.

    3. The bookmark, and home page maps need to be stateful across sessions on the same browser. You need to store the state and retrieve using cookies in the browser.

      Home page.drawio (1).png

Auto complete

List of restaurants can be found in this airtable.

You can use a curl like the following to fetch the list

curl "<https://api.airtable.com/v0/appjWdL7YgpxIxCKA/restaurants?maxRecords=3&view=Grid%20view>" \\
    -H "Authorization: Bearer keyfXgn8PL6pB3x32"

Output 
{"records":[{"id":"recVG5yzp8koxiZ3Z","createdTime":"2022-06-27T16:22:09.000Z","fields":{"Name":"Subway"}},{"id":"recjSYT8fRx52mL6H","createdTime":"2022-06-27T16:22:09.000Z","fields":{"Name":"McDonalds"}},{"id":"recDz8MtN5lrE00bA","createdTime":"2022-06-27T16:22:09.000Z","fields":{"Name":"Taco Bell"}}]}