Country details using REST Countries API, TypeScript, SASS and Vite
Design comparison
Solution retrospective
This was pretty challenging, all because the json response from the API and the data.json didn't have the same structure. That caused me a whole lot of confusion, to say the least. That's why I ended up with only one file. I thought this wouldn't take any more than 200-250 lines of TS code but who would have known that the data.json and the API respone won't match up. I mostly regret tackling this project, not the best experience I've had while coding. I wanted to use data.json to populate the HTML Page and the API for the search function so I had to go through the trouble. I could have just created an interface and then just make a whole new object of that interface every time I had to load a country card, it's details or use the search function but I just winged it. Since the json format had inconsistencies, my code, naturally is also inconsistent but I tried to keep the TS errors to a minimum. For the time being, there aren't any errors that stop compilation.
I also was going to implement the theme switching feature but I just want to be done with this.
And if you are thinking about doing this project, please use only the data.json or the API. Mixing them up will just cost you extra effort and will make you confused.
Community feedback
- @dopoku12Posted over 1 year ago
How did you make that overlay? I see that you're not changing the path or opening up a different page. Currently building this with react js and I can't find a way to display more details when the card is clicked.
0@FexxixPosted over 1 year ago@dopoku12 I have no idea how to whip up a new page by changing the path and I didn't want to know either since I wanted to do the sliding effect. I don't have any experience with react but I imagine you'd want to render a new component on click. In my case, I just utilized the HTML template element.
0@FexxixPosted over 1 year ago@dopoku12 I found out how to do it. I just didn't know what to search. It's called "routing". Apparently, it's a pretty common concept. You need to use the react router library.
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord