Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted almost 4 years ago

React, Styled Components, React Router, React Helmet, & FormSpree API

Folarin Akinloye•1,240
@folathecoder
A solution to the Designo multi-page website challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


Hi Devs 🐱‍👓!

This is a project I worked on to practice react and react routing. It was fun to build because I had the opportunity to experience how to build reusable and scalable web components like a professional despite the challenging design. It was a good learning experience!

I am currently learning TypeScript and Next JS to build large-scale production-ready applications.

Kindly go through my solution.

I need help with the following: 1.) Accessibility 2.) Folder structure 3.) Check my styled components code 4.) Check the way I pass props 5.) Is my commenting technique OK? 6.) Test the contact form!

Thanks so much! 😎❤👌

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • htmlHxcker•70
    @htmlHxcker
    Posted almost 4 years ago

    Hi Fola, really nice work here, In fact, I had to look very closely to find errors :), anyways here are the things I noticed:

    1. For the file structure: You have a global folder in the Components folder which houses Global components but then there's another folder that houses Global styles, don't you think it'll be better if the global style was in the same folder as the global components?
    2. Some pages take a lot of time to load their Images as much as 4 seconds which end up causing content shifts when the image loads, I think this is because you wait for data to be loaded, do you think you could load all the images once the page loads for the first time before the user starts navigating to other pages as this happens when I go to other pages e,g the about page, Perhaps you could use a preloader too.
    3. On the contact page, If I input a phone number in the international format i.e +1 (408) 735-7638 I get the error: "Phone should be a number!" This is kinda weird, upon inspecting I found that: I. You used a type attribute set to text instead of tel and, ii. You're using isNan to validate the numbers, I think you could fix this one by using RegExp as you did for email. Here's a function to that effect:
      let formatted = (' ' + phoneNumberString).replace(/\D/g, ' ');
      let match = formattedmatch(/^(1|)?(\d{3})(\d{3})(\d{4})$/);
      if (match) {
        let intlCode = (match[1] ? '+1 ' : '');
        return [intlCode, ' (', match[2], ') ', match[3], '-', match[4]].join(' ');
      }
      return null;
    }
    

    Gotten from https://stackoverflow.com/questions/8358084/regular-expression-to-reformat-a-us-phone-number-in-javascript

    That's as many faults as I could find, I have to say the project is very polished and the code is very easy to read so props for that.

    Marked as helpful
  • Raymart Pamplona•16,040
    @pikapikamart
    Posted almost 4 years ago

    Hey, awesome work on this one. Layout is really good in desktop, it is very responsive and the mobile layout looks really great as well.

    I don't usually review react codes since everyone has their own way implementing, but if I do, I just usually check if things are rendered when they are needed, because some including me as well sometimes forget to prevent re-renderings, maybe state are not used properly, memo is not used, context is used for large data, those kinds. But for this one, I would just go with markup or accessibility.

    Suggestions would be that:

    • max-width: 100% and min-height: 100vh on the body is not needed since by default body takes full width and since there is a large content, you won't need min-height: 100vh.
    • Navlinks could use a ul element since those are "list" of links, it will also inform a user on how many items or links are there in the list.
    • You don't need to add extra aria-label on the navlinks, the text inside them is enough to inform a user to where the link would take them.
    • I don't really know about the primary="true" attribute set on the hero-section's a tag. What is that?
    • Also, if the aria-label's value is too long or just any aria-label it would be great to instead use an sr-only element inside them, because aria-label text are not translatable for other languages that is why sr-only is much preferred since text-contents are translatable.
    • I don't know if I would put alt on the hero-section's image. Hmm, now i'm confused haha.
    • You don't need as well aria-labels on the 3 links after the hero-section since the text inside it has the text where the link would take the user.
    • The 3 images used before the cta could be hidden alt="" and aria-hidden="true" since they are just vector images and are just decorations.

    FOOTER

    • To be honest, using homepage as the aria-label is enough to describe where the link would take the user, same for header's website-logo-link.
    • Navlinks should be using nav since those are still your navigational links on your page, nav is not only limited to the uppermost part on the header but on the footer as well. Use ul tag as well on the links since they are "list" of links.
    • Also, when navigating on a different page of the site, it would be great to add an aria-current="page" on the current link where the user is at.
    • On the social media links, ul could be great since again, "list" of links.
    • Each img on the social media should be hidden since they are just icons/decorations so use alt="" and aria-hidden="true" on them.

    MOBILE

    • Dropdown button should have aria-expanded="false" as a default attribute, it will be changed to true if the user toggles the button.
    • Your dropdown is only hidden visually, right now you are transitioning only the opacity to make it seem like invisible, but using only this is not enough. It is still visible for assistive tech and you don't want users to see a supposed hidden items. Instead, add visibility: hidden on the default state, and use visibility: visible on the toggled state, this way it would totally hidden for users.

    I can only review right now the homepage since I am past my bedtime hours :>

    But still, really great work for this one. I only got to see few on these guru challenges so really awesome for you to pull this one off.

    Marked as helpful

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
Frontend Mentor logo

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

Frontend Mentor

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

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

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit all CSS, SCSS and Less files in your repository.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

How does the JavaScript validation report work?

When a solution is submitted, we use eslint to run an automated check on the JavaScript code.

The report picks out common JavaScript issues such as not using semicolons and using var instead of let or const, among others.

The report will audit all JS and JSX files in your repository. We currently do not support Typescript or other frontend frameworks.

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub