To run, please npm i && npm run dev or click to view the project
You must have a basic understanding of Javascript, and modern front-end frameworks such as React.
Svelte was chosen for this "mini-test"
Use, https://github.com/samayo/country-json or a similar json list of countries, languages and capitals, preferably separate. (You can download the necessary json lists, if you wish)
✅
Create a simple component that shows countries by continent on a single page
✅
If you click, expand into a country you will see Capital, and languages spoken.
✅
feel free to stylize it as you wish.
No Design provided, basic styling provided.
Integrate a top search by country name or capital name, so it traverses the json and only displays relevant results.
✅
Before answering, make an estimate in hours or minutes of how long would it take you to tackle these tasks, and for the following questions, refrain from using AI, as we would value your understanding of these concepts.
Questions: How would you optimize the performance of the list rendering, in these 2 or 3 combined lists.
Content Design, are all of the data needed for the task? Can this be reduced or removed? Pagination, scrolling, splitting the data to be loaded when needed.
Can you explain the difference between state and props in React, and how would you use them for the search?
State manages the UI data state, whereas props are properties passed into Components or functions. Svelte handles state in this project
How does TypeScript enhance the development experience in a React application?
Prevent bugs and help ensure consistent code via type checking.
Extra points questions: How would you handle pagination or infinite scrolling for a large list of countries? Assume only 10 per page are allowed.
When pagination or infinite scrolling is triggered additional data can be fetched.
What are some advanced TypeScript features that could be useful in this project?
Conditional types could be good in this context as the data changes as it's combined.
Can you explain how context API or Redux can be integrated into this project for state management?
For React, Redux would need to be installed and integrated (then I would need to call getters and setters) it would manage the state of of the countries seen within the UI. For this project context API would be more apt as it's part of React, however in this context neither are needed as Svelte handles state in a different way.
Submit an answer github repo inviting @alexanderkustov or @victoriasilberbauer10, otherwise a zip file to alex[@]axate.com, victoria[@]axate.com
With the questions above, either reply to us via email with them or put it in part of your README, as any other instructions to run your project.
- No Design provided
- Responsive, no requirements mentioned.
- Progressive Enhancement, no requirements mentioned.
- Accessibility, no requirements mentioned.