What challenges did you encounter, and how did you overcome them?
Hadn't mess with fetch request in a while, wasn't much of an issue, but I actually had never deployed a website with data fetch from a Json. I knew it would cause issue because I previously always booted up a local server to practice fetching from Json.
Had to find a way to make it work, but in the end I did.
During your try/catch, you should pass your setIsLoading(false) in the finally (you can read an article here) because this code will be executed at the end while the catch executes when you have an error.
In your Country.jsx and CountryList.jsx files, during your try/catch, you should pass your setLoading(false) in the finally (you can read an article here) because this code will be executed at the end while the catch executes when you have an error.
As for your HTML syntax, for your footer and navbar you should use the correct semantics for your tags (footer/header and nav)
🤖 This is my solution for the Pricing component with toggle challenge using React and TypeScript.
Built switch toggle only using CSS
Dynamically generated data using JSON
CSS custom properties are always here to save my day
Learned not to put centering styles in the <body> element, but rather in the <div id="root"> in React. It took me some time to figure that out
❓ Questions:
How can I improve the accessibility of the switch toggle? Because it's hard to know whether it's set to "annually" or "monthly" except for the visual representation.
I used the useState hook to pass down the value to the Toggle component along with its function to update its state. Is it a good idea to implement it this way?
Which one would have worked better to pass the data: State or Context? And, why?
And, I am open to other suggestions.
📈 Updates:
Based on received feedback and suggestions, improved the accessibility of the website.
Thanks for reading. Really appreciate any feedback and advice!
Took me awhile as I wanted to try my hand at using NextJS - 13 specifically the experimental app directory and a lightweight state-management using Zustand (I usually use RTK). Also learned how to implement TailwindCss custom theme properly-ish. Moved away from github pages and used Vercel for hosting the live site since Next is SSR, it was quite painless and I might have a contender for AWS Amplify. Anyway I am still learning TailWindCSS but so far it is leagues faster and less of a head ache than styled components so far, haven't had a project with complex animations yet so i can't say for sure.
As per usual please leave me some feedback, as long as there are no profanities you can be as blunt as you want to be, trying to learn industry best practices.
Use a solution like prettier if you're on vscode to make your code a bit more readable
You could also use the form tag to wrap the input and the button of your searchbar so that we can use the tab to do our search. So you could also put the input value into a state using the onChange event and use it in your handleClick function rather than using getElementsByClassName.
Avoid using any type, you can create a related type for ˋuser`
Your custom hook CallCountriesAPI should be named with the prefix use (so useCountries for example) to respect the convention rules and allow the linter to check if you are using the hook according to the rules of the react hooks
You can type your states in the following way: const [state, setState] = useState<YOUR_TYPE_HERE>(defaultValue)
Avoid using the type any, maybe use unknown or create the real types
A little feedback that has nothing to do with the code itself. You can install prettier if you are on vscode, it will allow you to format your code and make it more readable
-It was a challenging project to build, especially making responsive design was took some time but helped me to sharpen my skills.
-I think i should have create more re-usable scss components for repeative structures.
And i purposely did not change the font-family and added some differences to my UI.
-If you have any feedback about design and the code, feel free to comment or mail to me.
