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

React, redux, node, express, mongoDb, stripe api

#axios#node#react#redux#bootstrap
P
cooper 70

@Coops023

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


I found the overall page designs not so difficult, however i had some issues with the cart and i went off design a bit to implement the stripe api for real payement's, this i found quite difficult and it is not currently working as i would like. any feedback appreciated

Community feedback

@MartinEichinger

Posted

Hi Cooper,

I also think the design is already quite good. I found some smaller topics, which I would like to share with you:

  • Viewing the website on bigger screens > 1600px, the website gets a little out of joint. To solve that you could limit the max-width of your body to e.g. 1440px.
  • Using the same web font (> manrope) and also the exact same sizing of headings and paras would give the design a bit more perfect look

Bests, Martin

0

@Skidragon

Posted

Hi @cooper, good job on making it full stack. I do have a couple of suggestions, since it's an e-commerce site, SEO is very important, I would look into Next.js because it helps with dealing with SEO, lazy loading images, and even if the user has javascript disabled, they can still see the web page since javascript can build the page on the server rather than client side. Also for the height of the footer, I would use padding with em units instead of height, it adjusts to the content inside the footer rather than a fixed height. I would watch Kevin Powel's em vs rem on youtube. I would make the stepper field input box as disabled and I think there is a type conversion happening because I'm able to add more items then the max. Here is my solution if you want to take a look:

https://www.frontendmentor.io/solutions/nx-nextjs-typescript-graphcms-nestjs-and-styled-components-cPFj72mX9

I didn't do every section since I would need to upload more images/content to the CMS.

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