search_places.md

Table of Contents

• Readme first!
• Search Places
  • Styles
    • Search Box
    • Keyboard Shortcut
    • Table
  • Functionality
    • Search box
    • Table

Readme first!

• Try to use less number of 3rd party packages/libraries

• Keep your code clean, maintainable and readable, usage of formatters and linters might come handy here

• Follow best practices for particular framework/library

• Your project should have a README.md file, which should contain at-least a getting started guide, you can use below for example (below content will change based on your project and technology, below is given just for example):

  # Getting Started

  
    ```bash
    # after cloning the repo
    
    cd backend
    npm i
    npm start
    
    # new terminal
    
    cd frontend
    npm i
    npm start
    ```
    

• It is ok if you can't complete all the tasks/features, but each individual task should be in considerably complete state

• You will need to push all of your code to a public GitHub repo and share the link of the same

• You will get 2-2.5 hours to do the exercise

Search Places

Search Places allows users to search through places.

• We are only looking for decent UI, which can just work.
• Please do not use any css framework like bootstrap, tailwind, etc.
• All views should be fully responsive upto 300px width.
• You can use any technology from: Ruby on Rails, React, Vue, Angular, vanilla HTML/CSS/JavaScript or as mentioned by the interviewer/recruiter
• Inline styles not allowed.

Styles

1. Font-size: 16px
2. Font-color: rgb(33, 37, 41)
3. Font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"

Search Box

Search box should look like below for various states, click on image to see it properly:

State	UI	Styling
Default		Width: 241px, Height: 38px, Font-size: 16px, Background-color: rgb(255, 255, 255), Border-color: rgb(206, 212, 218), Padding-top/bottom: 6px, Padding-left: 12px, Padding-right: as-needed, Border-radius: 4px
Filled		.
Active/Focus		border-color: #7952b3; box-shadow: 0 0 0 3px rgb(121 82 179 / 25%);
Disabled		Background-color: rgb(233, 236, 239)

Keyboard Shortcut

• Font-size: 12px
• Border-color: rgb(222, 226, 230)
• Border-radius: 2px
• Height: 24px
• Padding left/right: 4px

Table

• Padding for td/th: 8px
• Border color: rgb(222, 226, 230)
• Header font-weight: 700
• Should show only three items per page by default

Functionality

• You have create layout, where
  • Search box is on top-left side of page
  • Table is at bottom of search box
  • Pagination box below the table
  • Besides pagination a user input to let user decide how many cities data user want from server [ Default is 5 and max is 10]

Search box

• Once user types and presses enter, start showing results in the table
• Keyboard shortcut CTRL/CMD + / should work, it will make search box focused

Table

• In table there will be 3 columns:
  • # - static counter starting from 1
  • Place Name
  • Country - Show country with flag
    • For flag, use CountryID from response and get flag from https://flagsapi.com/
• For no result, simply say "No result found" in table
• For null/undefined/blank search, display "Start searching" in table
• When results are getting fetched, show a spinner on top of table.

Pagination

• In pagination depending upon search result the pagination numbers should get update.
• If no result found hide pagination box.

Limit API data

• A input box preferably on the far right side on the level of pagination box to let user decide how much data it should fetch from server.
• Default data fetched by API is 5 and max it can fetch 10 items and user should be limited and some kind of warning should be given if user enters input above 10.
• Using the limit key in the params in API we can limit the data fetched from server

Bonus

• Implement a way that API calls are not made on every keystroke.
• Provide an option to user to let user view as many items as user want on a page instead of default 3.

API

Please use environment variables to store/read API url and secrets.

const axios = require('axios');

const options = {
  method: 'GET',
  url: 'https://wft-geo-db.p.rapidapi.com/v1/geo/cities',
  headers: {
    'x-rapidapi-key': 'API_KEY', // get your key from https://rapidapi.com/wirefreethought/api/geodb-cities
    'x-rapidapi-host': 'wft-geo-db.p.rapidapi.com'
  }
};

try {
	const response = await axios.request(options);
	console.log(response.data);
} catch (error) {
	console.error(error);
}

API Documentation.

Example Response

{
  "data": [
    {
      "id": 3350606,
      "wikiDataId": "Q24668",
      "type": "CITY",
      "city": "Aixirivall",
      "name": "Aixirivall",
      "country": "Andorra",
      "countryCode": "AD",
      "region": "Sant Julià de Lòria",
      "regionCode": "06",
      "latitude": 42.46245,
      "longitude": 1.50209,
      "population": 0
    },
    {
      "id": 3216144,
      "wikiDataId": "Q24656",
      "type": "CITY",
      "city": "Aixovall",
      "name": "Aixovall",
      "country": "Andorra",
      "countryCode": "AD",
      "region": "Sant Julià de Lòria",
      "regionCode": "06",
      "latitude": 42.47635833,
      "longitude": 1.48949167,
      "population": 0
    },
    {
      "id": 3406038,
      "wikiDataId": "Q4699394",
      "type": "CITY",
      "city": "Aixàs",
      "name": "Aixàs",
      "country": "Andorra",
      "countryCode": "AD",
      "region": "Sant Julià de Lòria",
      "regionCode": "06",
      "latitude": 42.48638889,
      "longitude": 1.46722222,
      "population": 0
    },
    {
      "id": 397,
      "wikiDataId": "Q1863",
      "type": "CITY",
      "city": "Andorra la Vella",
      "name": "Andorra la Vella",
      "country": "Andorra",
      "countryCode": "AD",
      "region": "Andorra la Vella",
      "regionCode": "07",
      "latitude": 42.5,
      "longitude": 1.5,
      "population": 22151
    },
    {
      "id": 3360277,
      "wikiDataId": "Q24475",
      "type": "CITY",
      "city": "Ansalonga",
      "name": "Ansalonga",
      "country": "Andorra",
      "countryCode": "AD",
      "region": "Ordino",
      "regionCode": "05",
      "latitude": 42.568443,
      "longitude": 1.521571,
      "population": 0
    }
  ],
  "links": [
    {
      "rel": "first",
      "href": "/v1/geo/cities?offset=0&limit=5"
    },
    {
      "rel": "next",
      "href": "/v1/geo/cities?offset=5&limit=5"
    },
    {
      "rel": "last",
      "href": "/v1/geo/cities?offset=543930&limit=5"
    }
  ],
  "metadata": {
    "currentOffset": 0,
    "totalCount": 543934
  }
}

yes i am start working on it

first commit

first commit

first commit

first commit

first commit

first commit

First Commit

First Commit

First Commit

first commit

first commit

first commit

first commit

first commit

first commit

first commit

first commit

first commit

first commit