Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 2 years ago

E-commerce sneakers shop | Updated version

accessibility, next, typescript, zustand, tailwind-css
P
Jo89 😈•710
@AhmadYousif89
A solution to the E-commerce product page challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

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 😐).

Code
Loading...

Please log in to post a comment

Log in with GitHub

Community feedback

No feedback yet. Be the first to give feedback on Jo89 😈's solution.

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

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner
  • Use cases

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License