Skip to content
OverviewSolutions
3
Comments
9

Maxence

@MaeWolffBordeaux, France190 points

Frontend Engineer

Latest solutions

Latest comments

  • Dickson Preye•30
    @DicksonPreye
    What are you most proud of, and what would you do differently next time?

    i am most proud of the fact that i was able to complete the challenge. i think next time i'd use AI to seek for help faster

    What challenges did you encounter, and how did you overcome them?

    I encountered issues in the addition of functionalities primarily click functionalities, i researched using AI and chat gpt was a great help

    What specific areas of your project would you like help with?

    The nav profile icon and also with transferring the cart quantity and price to the checkout bar after the add to cart button is clicked

    ecommerce-product-page using Typescript, js, css

    #next#typescript
    1
    Maxence•190
    @MaeWolff

    Hi!

    • To improve the imageKey type, you can do this:
    const images = {
 1: "/image-product-1.jpg",
 2: "/image-product-2.jpg",
 3: "/image-product-3.jpg",
 4: "/image-product-4.jpg",
} as const;

// Now `imageKey` is typed as `1 | 2 | 3 | 4`
  const toggleOverlay = (imageKey: keyof typeof images) => {
    setActiveImage(imageKey);
    openModal(images[imageKey]);
  };
  • P
    Timothé Bissonnette•480
    @Fable54321
    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.

    My take on time tracking dashboard

    #react#react-router#sass/scss#vite
    1
    Maxence•190
    @MaeWolff

    Hey ! Congrats on your challenge :)

    • 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.
    • Here's another way of writing your switch/case
    const frequencies = {
 1: 'daily',
 2: 'weekly',
 3: 'monthly',
};

useEffect(() => {
  setFrequency(frequencies[period] || 'daily');
}, [period]);
  • Maxence•190
    @MaeWolff

    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
  • Maxence•190
    @MaeWolff

    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)
  • Maxence•190
    @MaeWolff

    Hi Doston :) !

    Congrats on your posting

    Marked as helpful
  • Maxence•190
    @MaeWolff

    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
View more comments