My solution to the multi-step form challenge.
Using Next.js 13 for routing between steps while maintaining the form with react-hook-form in the layout.
Added TailwindCSS for easy styling.
Probably a little over-engineered but wanted to test some of Next 13's features
Looks perfect! I took a look at your code and it's how I imagine a code written by an actual developer would look like.
Not much to criticize about the front-end side, but if I were to nitpick, it would be the fact that you can still navigate through different steps even after confirming your order. I don't think a real application would let you do that.
Just wondering how long did it take you to learn NextJS?
I had a problem with files structure in this project, what is the best solution to deal with that?
Hello, can you please clarify which file are you having an issue with?
If it is on the frontend side, I think a grid layout works best on the homepage. And a combination of flex and grid on the detail page. I'd be happy to elaborate more on this, I'll see to your reply.
But if I have to guess, you're probably having an issue with the response of the API. I noticed your border displays the whole name of the country instead of their country code. I think your approach solves the problem of the outdated country code from the API's response which makes other countries inaccessible if you were to navigate through them using the border buttons. But you'd probably want to display the actual country code, for example, Jordan = JOR.
const response = await fetch("https://restcountries.com/v3.1/all");
const data = await response.json(); // this will return an array of all countries
const countryCode = data[0].cioc // will return the country code of the country at index 0
I have to ask, did you encode the borders yourself?
Hello, I took a look at the site and found an issue where the background doesn't extend all the way to the bottom when there is not enough content to render. Here is a screenshot, img. This error could be prevented by adding a min-height of 100vh to your app.
I've also noticed the lack of error handling. The problem with the API that is provided by the challenge is that, it also return countries from Antarctic region where there is a lot missing data. It could cause the website to break if a user clicks on them. Much like what you did when a country doesn't have a border, I would also suggest doing the same for countries that are from Antarctic region. Here's what it looks like if the website fails to retrieve data, img2.
Error handling could be as simple as checking whether a data is available.
const countryPopulation = document.getElementById("countryPopulation"); if (country.population) { return countryPopulation.textContent = country.population; } else { return countryPopulation.textContent = "No inhabitants"; }
Hope this helps!
Hiiiii, I’m Abdeslam and this is my solution for this challenge
Hello, There is an issue with the first step that doesn't allow me to get to the next step. It keeps throwing the "field is required" error even after I type something into the input box. The phone number input box also has an initial value instead of a proper placeholder.
I also took a look at your scripts and while your solution is interesting, to say the least, I think it's a little too hard for javascript alone to achieve what the challenge demands. I would suggest looking into libraries to make it easy to go from page to page.
This is my second challenge. I would really appreciate any feedback . Any constructive criticism is welcomed
You got a little bit of typo in your text. The css could use a bit of improvement to make it look more identical. If you're using the free version, I would give this an almost perfect rating as I understand that copying the exact sizes can make you develop a bad habit of writing css codes. Especially since it forces you to declare everything from widths to heights.
