Table of Contents

• lucky-one-crescentpartha
  • Description:
  • What submits: Client-Code & Live-Server Resources
  • What I did in this Project
  • Bonus Marks:
  • Optional tasks:
  • Project Management Secrete:
• Inefficient Regular Expression Complexity in nth-check (Fix vulnerabilities)
  • Solutions

lucky-one-crescentpartha

Description:

This is a React Application called Table Chooser. You can choose your favorite table from here and add to cart for the future recommendations and for buying purpose. You also get a user recommendation after choosing some table items and clicking the CHOOSE 1 FOR ME button. Whether you can clear your all cart items by clicking CHOOSE AGAIN button or you can manually delete one by one clicking trash icon, as your wish. This is fully responsive application.
Thank you for visiting.

🔼Back to Top

What submits: Client-Code & Live-Server Resources

• Repository Link:
• Live Site:

🔼Back to Top

What I did in this Project

• Give different name of your website.
• You can't give cloths related product, try with different like books, shoes or different one.
• Collect photo from freepik or others website.
• Create fake data any one of three way.
• Fake data contains id (for key purpose), name, price, photos.
• Fake data need to contains almost 9 to 12 set of product.
• You need to add a button with icon (React-fontAwesomeIcons or Hero Icons)
• CSS framework like Bootstraps or Tailwind are allowed, if you want to apply or use plain CSS.
• Make your website responsive. (Mobile = 1 columns & regular device = 3 columns)
• Interactive: Add to Card - Selected Products (photo & delete button optional)
• Add "CHOOSE 1 FOR ME" & "CHOOSE AGAIN" Button
  • If clicked "CHOOSE 1 FOR ME", choose 1 product randomly for recommendation.
  • If clicked "CHOOSE AGAIN", clear all products.
• Folder Structure, Meaningful Components Name, everything should organize.
• You don't have to do local storage activities. Although it is optional, you can do it if you want.

🔼Back to Top

Bonus Marks:

• Use destructuring
• At least 6 commit
• Edit your README.md file which contains project name & live website link.
• Project description is optional.
• If clicked "CHOOSE AGAIN", clear all products. (set state with empty array)
• Answer 3 questions by creating components in the bottom of the page. Answer contains 5 to 10 lines. Answer at least 2 out of 3 questions.
  1. How React works?
  2. Props vs State?
  3. How useState works?

🔼Back to Top

Optional tasks:

• Delete button 🗑 - remove the product.
• photo with name
• Same product won't add to cart again. (use alert)
• Cart contains only 4 products. (give warning that (Oops...) Can't select more than 4!)

🔼Back to Top

---

Project Management Secrete:

1. Don't think whole thing at a time. Divide your work to small pieces. Create a checklist what to do next as a sequence.
2. After doing small piece, commit your work in the git repository.
3. If you Stuck anywhere, send 30 minutes to 1 hour, not more than.
4. If does not work anything, start the next small piece.
5. Deploy your site. check it is work properly or not.

🔼Back to Top

Inefficient Regular Expression Complexity in nth-check (Fix vulnerabilities)

• Help, npm audit says I have a vulnerability in react-scripts!
• github Dependabot alert: Inefficient Regular Expression Complexity in nth-check

🔼Back to Top

Solutions

npm audit says there's a warning about vulnerabilities in my project Open package.json. You will find this:

  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2",
    "react-scripts": "4.0.3"
  }

Take react-scripts and move it to devDependencies (if you don't have it, create it):

  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "react-scripts": "4.0.3"
  },

Then, ensure you run npm audit --production rather than npm audit.

This will fix your warnings.

🔼Back to Top