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

Submitted

Responsive e-commerce website with Next.js 13 App router

#contentful#framer-motion#next#sass/scss#react
kasey 320

@kaseyvee

Desktop design screenshot for the Audiophile e-commerce website coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
5guru
View challenge

Design comparison


SolutionDesign

Solution retrospective


Having some hydration issues on my checkout page when I have items in my cart. In src/app/components/checkout/Cart.tsx, I can fix this by making my cartItems state and setting the state to { ...localstage } in a useEffect, but this doesn't allow me to update my cart in real time without force refreshing, since router.resfresh() doesn't seem to help. Haven't put much time thinking about this but if anybody has any quick feedback, feel free to drop some.

Any other feedback much appreciated! Also more specifically Next.js 13 with app router best practices.

Community feedback

P
ApplePieGiraffe 30,545

@ApplePieGiraffe

Posted

Greetings, kasey! 👋

Nice job on this challenge! The UI looks great 👍

I don't have time to look at all of your code but I had a quick look at the Card component. You don't really want to be using the router to refresh the page to display changes in the UI (that's a bit of anti-pattern as this is what React state is for). Instead, if you store the card data in some state then any time you update that state, React will re-render any components which use that state and update the DOM for you. You can then update local storage with that new state value if you want persist data that way for this project. Also since some of the cart data appears in other places around the site (such as in the product pages), you may want to store that state higher up in your app and pull it into components with React context. If you want to learn more about React state or context, I'd recommend checking out the new React docs as they are very-well written and include a few helpful guides. Hopefully that makes sense 👍

Keep coding (and happy coding, too)! 😁

Marked as helpful

2

kasey 320

@kaseyvee

Posted

@ApplePieGiraffe I really appreciate this! This makes sense and sounds like a good start. I'll look into this soon. Much thanks for the insight!

1

Please log in to post a comment

Log in with GitHub
Discord logo

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord