Countries App using React, Vite, TS, Vitest, React Router y MSW
Design comparison
Solution retrospective
Hello everyone. 👋
This is the Frontend Mentor challenge to search information of all countries around the world.
The challenge is to build out this app, integrate with the REST Countries API to pull country data and display it like in the designs.
It is built on React , Vite , TypeScript , Vitest, React Router & Mock Service Worker.
I am open to any suggestion to improve code or carry out good practices. 😄
Thanks for watching. 🤓
Hola a todos. 👋
Este es el reto de Frontend Mentor para buscar información de todos los países del mundo.
El reto es desarrollar esta aplicación, integrarla con la API de REST Countries para extraer los datos de los países y mostrarlos como en los diseños.
Está construido en React, Vite, TypeScript, Vitest, React Router y Mock Service Worker.
Estoy abierto a cualquier sugerencia para mejorar código o realizar buenas prácticas. 😄
Gracias por ver. 🤓
Community feedback
- @LucianoDLimaPosted 10 months ago
Hey, well done on completing this challenge!
- There is currently an issue where if a user loads your page, it re-directs them to a 404 error page (you can try it yourself, just reload the page and an error will occur). There is a config to fix that, since you are using netlify I honestly don't know how to do it, but in vercel you can fix by creating a file called vercel.json and adding
{ "routes": [{ "src": "/[^.]+", "dest": "/", "status": 200 }] }to it. So try and look up if netlify would be the same way or if they have a different config file. - I see that you have added local storage for the theme switch. It would be nice if you also added a
prefers-color-schemeso that the first time a user opens your page, the theme will be switched automatically to whatever the user's device is on. In my case, my device is always on dark mode, so your page should be in dark mode on a first visit, and then store this value in the local storage too. You can see more here - Another tip would be to add a max-width to your containers, that way your page will not stretch all the way when a user zooms out or, in my case, has a wider screen. A
max-width: 90rem; margin-inline: auto;on your<body>tag will show you more or less what I mean.
All in all this is a very good project, well done, I see that you even added testing cases, so I'll definitely take a deeper look at your project to see if I can learn how to implement that myself haha good job
Marked as helpful0@AlanPinhonPosted 10 months ago@LucianoDLima
Greetings and thanks for analyzing my project! 😀
I hadn't noticed that when the page reloaded it showed a 404 error. I'll see if that tip you gave me can help solve the problem.
Regarding the dark theme it is also a good suggestion. I will apply it so that it can be adjusted to the user's device preferences.
And with test cases, you can feel free to analyze it in depth. They are also some of my first projects doing testing haha.
Thanks again for your suggestions and comments. 🤓
1 - There is currently an issue where if a user loads your page, it re-directs them to a 404 error page (you can try it yourself, just reload the page and an error will occur). There is a config to fix that, since you are using netlify I honestly don't know how to do it, but in vercel you can fix by creating a file called vercel.json and adding
Please log in to post a comment
Log in with GitHub
Join 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