Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

All comments

  • Maxence• 170

    @MaeWolff

    Posted

    Hi! Congrats on your challenge :)

    I noticed a few things you could improve:

    • In app/country/[countryName]/page.js, you wrote porps instead of props.
    • You could separate your data logic from the rest of your app by creating hooks to fetch your data, e.g. useCountries would fetch all countries.
    • You can use Tanstack Query (documentation) for your state management with your data fetching.
    • Use a solution like prettier if you're on vscode to make your code a bit more readable

    Next step is to start using TypeScript :)

    Marked as helpful

    0
  • Maxence• 170

    @MaeWolff

    Posted

    Hi ! Congrats on your challenge :)

    I noticed a few things you could improve:

    • 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)
    0
  • Doston Nabotov• 950

    @dostonnabotov

    Submitted

    Hey, there! 👋

    🤖 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!

    Pricing component with toggle using React and TypeScript

    #react#typescript#accessibility

    2

    Maxence• 170

    @MaeWolff

    Posted

    Hi Doston :) !

    Congrats on your posting

    Marked as helpful

    1
  • P
    Mikhail Lorenzo Aniel• 230

    @lorenzoaniel

    Submitted

    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.

    Github User Search App - NEXTJS13/REACTJS/TS/TAILWINDCSS/ZUSTAND

    #next#react#tailwind-css#typescript#zustand

    1

    Maxence• 170

    @MaeWolff

    Posted

    Hi, congrats on your project post :) !

    I have noted a few points that you could improve:

    • 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`

    Marked as helpful

    0
  • Matheus• 240

    @MatheusVSN

    Submitted

    Hello world🤗, this is my solution for the challenge Rest countries API with theme switcher

    What did you find difficult while building the project?

    • The most difficult part for me was the routing part. As I've never experimented with that, I had a lot of trouble building it

    Wich areas of your code are you unsure of?

    • None, but feedbacks are always welcome if you find something that isn't a good practice

    Do you have any questions about best practices?

    • None

    Rest countries API with theme switcher

    #next#typescript#tailwind-css

    1

    Maxence• 170

    @MaeWolff

    Posted

    Hi Matheus!

    I've identified a few things to improve:

    • 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

    Congrats on your post :)

    Marked as helpful

    1
  • Maxence• 170

    @MaeWolff

    Posted

    Hi Tyler! Congrats on your post :)

    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

    Marked as helpful

    1
  • Yiğithan Çolak• 90

    @yigithancolak

    Submitted

    -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.

    Active Steps Form

    #react#sass/scss#vite

    2

    Maxence• 170

    @MaeWolff

    Posted

    Hi ! Congrats on posting your challenge :)

    You can improve the accessibility of the add ons step by using the label tag on your card to select the checkbox by clicking anywhere on the card.

    You can check this example: https://flowbite.com/docs/forms/checkbox/#advanced-layout

    0