I don't know if it looks exactly the same as the preview. I'm still unsure if there are better ways than to use flex all the time. So any suggestions/improvement tips are very welcome, especially the dekstop vs mobile display of the design. I'm also not sure of the correct padding and font size of the texts
Good job,
I would suggest to not use percentage value for width here and instead of that use fixed width, which you'll modify with media queries when you notice it isn't looking right.
Take care!👋
I build this solution with React and React Router, bundling with Vite because Vite offers faster build times, a better development experience, smaller bundle sizes, easier configuration.
This solution is not perfect, there are several bugs that when we search a gibberish country it's still give us some result 😕. I'll be very thankful if one of you guys want to help me fix this bugs.
Thanks . . . 👋
Hello @mahdipratama 👋
Looking over your code I noticed that you use your search term in the function from which you return all your countries.
... const [searchTerm, setSearchTerm] = useState('a'); const fetchAllCountry = useCallback(async () => { setLoading(true); try { const response = await fetch(`${searchCountryURL}${searchTerm}`); ...
You should split the logic for when the user is searching for a country and when all the countries are loaded.
Use this API ENDPOINT to request all of the countries.
Also in the part where you create search term state:
... const [searchTerm, setSearchTerm] = useState('a'); ...
You set the default value to be 'a' which will return many of the countries as a data but not all of them. (You can compare the return data of /all and /name/a)
So to say it shorter split the searching and the initial API requests.
In conclusion the project looks really polished.❤️ Good job and keep going ! 🔥
