- This is a Product Review website.
- Customers Reviews are given.
- Display analytical information about Investment Vs Revenue according to charts in dashboard.
- Blogs contains some modern web development technology related posts.
- Meaningful documentations of this project.
- Header or Navigation contains (HOME, REVIEWS, DASHBOARD, BLOGS, ABOUT, NOT FOUND)
- Use Vanilla CSS or Tailwind-React or React-Bootstrap or other CSS Framework
- Customer Reviews (3) with See All Reviews button, if you clicked, then it take you to another route called Reviews.
- Create Review Related Data like name, description, rating, image, date
- Meaningful commit, minimum six commit should be required
- 404 or Not Found Route
- Fix the Page Not found error when reload the page
- Dashboard contain at least 2 chart like Line, Area, Bar, Column, Pie, Donut chart.
- Chart data could be found in data.json, it is modifiable.
- Give the meaningful title name and change the favicon.
- Live demo button
- Header or Navigation style is optional, functionality is mandatory.
- favicon
- Active Route (Custom Active Link)
- Responsive the site
- Conditional Rendering
- Create more route as your wish
- Modify README.md file
- Project-Name
- Live-Website Link
- What I did in this project (minimum 4 bullet point)
- Destructuring
- Meaningful components and variable names
- Custom Hook for Home-Reviews & Review route
- Home-Reviews route shows 3 reviews
- Reviews route shows all reviews (12)
- Answer the three (3) questions in the blogs route (at least 2)
- What is Context API? What is the purpose of Context API?
- What is Semantic Tag?
- Difference among inline, block, inline-block elements?
- Product Review Website except Phone
- Use meaningful text rather than Lorem Ipsum
-
To install recharts run:
npm install recharts --force(if I got error)npm install recharts(otherwise)
-
If you see the following warning, ignore it for now.
Warning: ReactDOM.render is no longer supported in React 18. Use createRoot instead. Until you switch to the new API, your app will behave as if it's running React 17. Learn more: https://reactjs.org/link/switch-to-createroot
-
For the dashboard, you can modify the data provided in
data.jsonand you can load the data the way you want. -
[optional] To display ratings, you can use
font-awesome starsor you can usereact ratings website[class component might make it confusing]
react rating github
npm install --save react-rating
install font-awesome for react
import Rating from 'react-rating';
import { faStar } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
<Rating
initialRating={3.5}
emptySymbol={<FontAwesomeIcon icon={faStar} />}
fullSymbol={<FontAwesomeIcon style={{color: 'goldenrod'}} icon={faStar} />}
readonly
></Rating>Please note, you will see an warning while using react rating
react-dom.development.js:86 Warning: Using UNSAFE_componentWillReceiveProps in strict mode is not recommended and may indicate bugs in your code. See https://reactjs.org/link/unsafe-component-lifecycles for details.
- Help, npm audit says I have a vulnerability in react-scripts!
- github Dependabot alert: Inefficient Regular Expression Complexity in nth-check
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.