Skip to content
Submitted 11 months ago

Implemented QR code challenge using React and SASS

Rupali•780
@rupali317
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...QR code component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

In the previous version of my QR code implementation, I used plain HTML and CSS.

In this version, I implemented using React and SASS. It has been quite some time since I worked on the mentioned tech stack.

I have the following questions:

  1. Is it acceptable for node_modules to appear in the GitHub repository? Or should it be part of the .gitignore? I am concerned that there are many packages in the node_modules folder but then again it sets the stage for the project.
  2. In terms of testing, I am checking the presence of texts (please refer to src/card-component/Card.test.js and src/footer-component/Footer.test.js). One potential test that I can consider is to see if the footer links are functional. Are there any other tests that are recommended?
  3. I have noticed that when I drag and drop my build folder on Netlify and then run my live URL on PageSpeed Insights, I get x-robots-tag:no index (Page is blocked from indexing warning). However, I later integrated my GitHub code into Netlify instead of relying on drag and drop method. In this scenario, "The page was blocked from indexing" warning no longer appeared. I wonder why it happens. Has anyone encountered this?

Looking forward to your thoughts

Community feedback

  • Melvin Aguilar 🧑🏻‍💻•61,140
    @MelvinAguilarPosted 11 months ago

    Hello there 👋. Good job on completing the challenge !

    • It is generally not recommended to include the /node_modules directory in your GitHub repository because the folder can be quite large, and including it in your repository would increase the size significantly. Also, that folder contains dependencies, and these dependencies can be installed on the local machine by running npm i or yarn install. Including node_modules in the repository is redundant.

      To avoid including that files in your GitHub repository:

      • Create a new file in the root directory of your project and name it .gitignore.
      • Add the word node_modules to your .gitignore file.

      The .gitignore file serves the purpose of specifying patterns of files and directories that Git should ignore.

    I hope you find it useful! 😄

    Happy coding!

    Marked as helpful
    3
    Rupali•780
    @rupali317Posted 11 months ago

    Thank you so much for your explanation of why the node_modules is redundant @MelvinAguilar !

    1

Please log in to post a comment

Log in with GitHub

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