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

E-commerce sneakers shop | Updated version

Jo89 😈 380

@AhmadYousif89

Desktop design screenshot for the E-commerce product page coding challenge

This is a solution for...

  • HTML
  • CSS
  • JS
3intermediate
View challenge

Design comparison


SolutionDesign

Solution retrospective


Hi There 👋

It's been a while 😅, I just had some spare time and thought of coming back and give this challenge some upgrades, it's not much but maybe the biggest change is with using Nextjs framework and experimenting with it's latest features in the app directory.

Update summary

  • general code refactoring and moving to Nextjs 13.
  • general improvements in the app performance, accessibility, SEO, and page load time, check out the performance test report.
  • improved accessibility in the Carousel and Lightbox.
  • improved CSS and accessibility in the modals (cart, profile, and action modals).
  • implemented the promo code feature on the cart page.
  • now removing the last item in the cart triggers the action modal on the cart page.
  • added an Accordion to display the product description.
  • and more ...

Todo

  • Adding an API and utilizing a real user authentication with both regular authentication (email and password) and Google OAuth2.0 using next-auth js.

That's it for now, feel free to leave your feedback or suggestions that you might find helpful to the application, Thanks.

btw, you might experience a lag while a page is displaying the loading transition component, if so you can refresh the page, I don't really know what is causing this issue but I guess it's a Next 13 thing (after all using the beta version and the experimental app directory is still not the best option and is subject to any change 😐).

Community feedback

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