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

Audiophile ecommerce website - React, Mongodb-realm, Sass

#mongodb#react#react-router#sass/scss
P
Chamu• 12,970

@ChamuMutezva

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


It is one of the complex challenges that i have taken on Frontend Mentor, which i used to learn how to work with Mongodb-realm. I have little knowledge on backend, Realm makes it easy to integrate the backend and the frontend. Some minor changes where made to simplify the project a bit - the mobile navigation in particular and the confirmation modal.

Fetching data from realm is taking about 5 seconds to load on the Frontend, I used a modal box to compensate for the time delay.

An interesting aspect that i learned was to hide fieldsets on a form until the top ones have filled and are valid - this can be done with the css below

/* Hide the fieldset after an invalid fieldset */
fieldset:invalid~fieldset {
    display: none;
}
  • some omissions and improvements may be found and such feedback is welcome

Community feedback

Shashree Samuel• 9,260

@shashreesamuel

Posted

Excellent work Chamu

Keep up the good work

Your solution looks great however I have some feedback

  • The navigation menu items are supposed to have a text-transform: uppercase.

  • The border bottom on the navigation menu is supposed to have less opacity

  • The description under the heading bringing the best for you is supposed to be in a different color, I recommend rechecking the style-guide.md file to be sure.

I hope this helps

Cheers

Marked as helpful

1

Brian• 220

@brian432

Posted

@TheCoderGuru really? Hahaha

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