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

NX, Next.js, Typescript, GraphCMS, Nest.js, and Styled Components

@Skidragon

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


This is a fullstack site which all the content comes from a CMS which there is a reverse proxy server talking between the client and CMS to add extra security for example DOS attack. I used react-hook-form to build the checkout and the payment endpoint is not connected to stripe or paypal but it does double check prices between the database product prices and what the client sent by checking item ids. I call this MVP since its a usable site but its not styled perfectly or has all the content because its busy work and plan to work on a more challenging project. Will work on it more little by little.

Community feedback

@codingwithriha

Posted

Hello SIMON DAVIS! I took some time to look at your solution. there are some tips for better your code 1.add a link element with an attribute must have a rel attribute that contains the value preload. 2.all img are broken maybe the url is incorrect. overall you have done great.

1

@Skidragon

Posted

@codingwithriha Cool, didn't know about the preload attribute is it because of the styles not loading early at the beginning, and some images loading when the user reaches it? For 2, I tested it on my phone and a couple of other environments, the images come up and the biggest image is the hero image and it takes up 14.5 kB. I will do some performance testing. Thanks for your input!

0

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