All solutions

Hi, I would love some feedback on this project.

The parts I found the hardest -

• setting up Vite for the first time there are lots of bits to get right
• writing tests for the parsing of the JSON input from the RestCountries API while using Typescript, where the incoming data is of unknown type
• what behaviors to implement for the search input

I have one specific question - I implemented 'dark mode' with Tailwind. It worked perfectly on my desktop but on my mobile the dark and light themes were reversed i.e. the colors were dark when dark-mode was off and vice versa. No idea why???

Any feedback at all is greatly appreciated.

One of the tricky parts to this project was managing the state as the user moved forward and backwards between the forms. I used react context to share state between the form components, and to re-hydrate the form inputs when the user went back.

I included what seemed to me fairly exhaustive unit tests, using react testing library. It would be great to get some feedback about the amount of tests I used and the different techniques.

I do have one specific question I have regarding validation of the form fields. I validated the field data on blur. This seems to work well, except when you do the last field on the form. The validation doesn't happen until the field loses focus but there is nowhere for the user to click because the submit button is still disabled at that time. The user has to click away to make the button enabled. How do people normally deal with this?

This project took a long time, following along with Kevin Powel, then adapting the things he did to work with react.js and a component centric way of building. It took me a couple of false starts until I worked out a way to adapt what he was doing.

I learned a huge amount from this project, a lot more than I thought I would! I highly recommend it to anyone thinking of doing it.

Kevin explains everything very well, but there was one thing I didn't understand. When developing his font size system, he calls the font sizes --fs-900, --fs-800, --fs-700 etc. down to --fs-400. I have no idea where he got these names/numbers from?? There was nothing in the Figma design file like this, and I couldn't find anything on google about it.

One thing I couldn't figure out, when you display an SVG by importing it as a ReactComponent, (used when you need to style it, like changing the fill color etc.) how do you then center the SVG inside the component? Mine kept appearing at the top left.

For me the tricky bits were -

Including a div with a fixed class name ('leaflet-container') while using CSS modules which normally decorates the class names.

Figuring out how to cause the map to update to a new location.

Styling the background images was a little tricky, I didn't realise I had to style the img element inside the picture element.

Getting the input element to resize properly from inside a flex-box.

Getting the vertical separator bars between the list of geo-location data.

One thing I couldn't fix, when I create a reply to a top level comment, it doesn't size correctly. Replies to existing comments, and new top level comments both size correctly. I couldn't figure it out.

This one felt pretty straightforward but all feedback is welcome.

The advice received from adviceslip.com doesn't seem to update for the github-pages deployed site. Maybe there is a call rate limiter or something? It updates every time on my local machine.

This is my improved attempt. I did the mobile version first without considering the desktop version enough. I am unsure of the process of working with the CSS properties and the media queries. It gets very confusing.

This is my initial attempt. There is more work to do yet.

I am submitting so I can peek at some other solutions to figure out how to re-use the drop-down menus in desktop and in mobile.

Also there is a problem with the hero image. No matter how small I make it, I get horizontal scroll bars. If I commend out the image, the scroll bars disappear.

The date validations were tricky. Accounting for leap years, the dependency between the year, day and month because of leap years etc. I thought maybe all of this date validation code could have gone into a separate module as my component file became a bit bloated. I probably had some code duplication I could have got rid of.

My first React challenge done. Should I have used redux? I passed some props up through a few levels, but I wanted to keep it simple. Is the email validation good enough? All feedback welcome.

I'm still not comfortable with positioning the whole component on the screen for the different cases of mobile and desktop. Just not sure if I'm doing it correctly. Also I have only added one media query break-point, not sure if I need to add more or how to tell how many I need. All feedback welcome. Thanks to Front End Mentor, what a great resource for learning!

I had difficulty sizing the whole thing to the body. I'm still not sure if the mobile view is correct, is seems to be clipped but I can't work out how to fix it.

I'm not sure if I got the responsiveness correct. Also I tried to use Block Element Modifier naming for the CSS classes, not sure if I got this correct.

Hi I'm not sure if I got the responsive sizing done correctly.