Skip to content
OverviewSolutions
21
Comments
7

Kenny Ng

@kennylun123UK400 points

🔥 Ambition on web development.

I’m currently learning...

Next.js, React.js, TailwindCSS, TypeScript, SCSS, Cube-css

Latest solutions

View more solutions

Latest comments

  • Kenny Ng•400
    @kennylun123

    It is a very good use case of using NextJS server side component. I took a reference from your fetching too.

    One question for me, how do you manage to scroll to top when every time we go into detail page? Did you do something to keep this behaviour?

  • Mazen Hassan•600
    @Mazz100
    What are you most proud of, and what would you do differently next time?

    I achieved the render of DropDownMenu and Dialog using React Portal and referenced states with useContext hook.

    I could not implement full interaction of dialog and dropdown I think in future projects I will consider using 3rd-party to assist in creating a proper dialog with correct accessibility.

    useContext was really useful for minimizing prop pass drilling but depending on a bigger project scope I could use 3rd-party plugin to store and manage states.

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

    The biggest challenge I kept facing was to properly pass the correct array value of cards and when to and not to recreate a new .map copy of it.

    I learned how to work with map in states and compare the original cards object with a copy and check for the intended conditionals.

    Crowdfund product page using React.js and SASS

    #accessibility#react#sass/scss
    1
    Kenny Ng•400
    @kennylun123

    Good work! Keep going :)

  • Kenny Ng•400
    @kennylun123

    Hi Frida,

    I hope you're doing well! I wanted to take a moment to congratulate you on completing the coding challenge. Great job! 😊

    I also wanted to provide some feedback on your code:

    Imagine that each of your category-card is a reusable component. Inside of it you just need one div for category-card-stats. And you could set background image to category-card (parent container). You could either set the background using in-line style or assign an id to each component and use CSS selector as you did. After that you can finish the category-card-stats.

    Keep up the great work! I'm looking forward to seeing what you'll create next.

    Best regards,

    Kenny

    Marked as helpful
  • Kenny Ng•400
    @kennylun123

    Hi everyone, I've added page transition effects to have a smoother experience. By using a React animation library called framer-motion. I hope you enjoy it!

    *If you are using NextJS 13 like mine, please note that this library is compatible on client component only.

  • Kenny Ng•400
    @kennylun123

    Hi Garcia, do you prefer Vite or CRA? I've seen the original docs for CRA has been replaced by NextJS / Remix etc. I'm considering what should I start with on next challenge.

    https://react.dev/learn/start-a-new-react-project

  • Kenny Ng•400
    @kennylun123

    Congratulation on completing the challenge! It's always good to finish the mobile version first then work on the desktop or tablet version using media query. Also I saw that two of the flex item are reversed in between 500px ~ 700px width.

    @media screen and (max-width: 700px) and (min-width: 500px)
.newsletter-container {
flex-direction: column;  // Delete this should work. **
justify-content: center;
}
View more comments