Skip to content
OverviewSolutions
21
Comments
7
Kenny Ng
@kennylun123

All comments

  • Kenny Ng•400
    @kennylun123Posted 7 months ago

    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?

    0
  • Mazen Hassan•600
    @Mazz100Submitted 8 months ago
    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

    1
    Kenny Ng•400
    @kennylun123Posted 8 months ago

    Good work! Keep going :)

    1
  • Frida 🌼•90
    @FridaWaldtSubmitted about 1 year ago

    One of the questions I had for this project was if there's a better way to place the images in the banners than I did by using #id for each and adding a background-image? I'd love any feedback really regarding best practices in any capacity, I'm here to learn and improve! Thank you all in advice for being so kind to review my work.

    Mobile-first Time Tracker Challenge using NextJS

    2
    Kenny Ng•400
    @kennylun123Posted about 1 year ago

    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
    0
  • Kenny Ng•400
    @kennylun123Submitted about 1 year ago

    Hi everyone, this is my solution of Responsive Space-Tourism-Website using NextJS(App Router). I managed to complete this challenge in one week. I really enjoy the way to handle routes with NextJS (App Router) by just creating a new directory and page.js. Considered a better user experience. I would like to add fade-in animation to components rendering.

    Any comment would be appreciated. Thanks for your help!! :D

    Responsive Space Tourism Website using NextJS 13(App Router)

    1
    Kenny Ng•400
    @kennylun123Posted about 1 year ago

    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.

    0
  • FrontendBy-GJ•430
    @FrontendBy-GJSubmitted over 1 year ago

    I would appreciate any feedback on my solution. What do you think of my approach and implementation? Thank you in advance for your input!

    Loopstudios landing page

    1
    Kenny Ng•400
    @kennylun123Posted over 1 year ago

    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

    0
  • antben59•40
    @antben59Submitted over 1 year ago

    I had difficulties with the responsive of the site, especially the mobile version. I didn't know if i only had to do with 375px width screen or all the width screen from 1440px to 375px. I finally decided to do it from 1440 to 375px.

    Do you have any advice for me for my future challenges for the responsive? Especially on the screen sizes that i must focus on, or websites that can help me to improve it.

    Thanks !

    Responsive newsletter with ReactJs (Junior's solution)

    2
    Kenny Ng•400
    @kennylun123Posted over 1 year ago

    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;
}
    0
  • Kenny Ng•400
    @kennylun123Posted over 1 year ago

    Hi Iago, you can try <picture> tag in HTML which can load different image url in different resolution.

    This is my case,

    <picture>
      <source media="(min-width: 40em)" srcset="images/image-product-desktop.jpg">
      <img src="images/image-product-mobile.jpg" alt="Perfume_image"/>
</picture>
    Marked as helpful
    0