-
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.mdfile, 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 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.
- Font-size:
16px - Font-color:
rgb(33, 37, 41) - 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 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) |
- Font-size:
12px - Border-color:
rgb(222, 226, 230) - Border-radius:
2px - Height:
24px - Padding left/right:
4px
- Padding for td/th:
8px - Border color:
rgb(222, 226, 230) - Header font-weight:
700 - Should show only three items per page by default
- 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]
- Once user types and presses enter, start showing results in the table
- Keyboard shortcut
CTRL/CMD + /should work, it will make search box focused
- In table there will be 3 columns:
#- static counter starting from 1Place NameCountry- Show country with flag- For flag, use
CountryIDfrom response and get flag from https://flagsapi.com/
- For flag, use
- 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.
- In pagination depending upon search result the pagination numbers should get update.
- If no result found hide pagination box.
- 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
- 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.
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);
}{
"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
}
}
first commit