Project aims to create a Product List App with search and filter functionality.

02 - Product List App(folder)
|
|----readme.md         # Given to the students (Definition of the project)
SOLUTION
├── public
│     └── index.html
├── src
┣ 📂components
┃ ┣ 📂Header
┃ ┃ ┣ 📜Header.jsx
┃ ┃ ┗ 📜Header.scss
┃ ┗ 📂Products
┃ ┃ ┣ 📜ProductList.jsx
┃ ┃ ┣ 📜ProductCard.jsx
┃ ┃ ┗ 📜ProductCard.scss
┣ 📂helper
┃ ┗ 📜data.js
┣ 📂scss
┃ ┣ 📜_reset.scss
┃ ┗ 📜_variables.scss
┣ 📜App.js
┣ 📜App.scss
┗ 📜index.js

As a continuation of the previous product-list project, the buttons have been made functional and the products in the current section can be filtered with the search section.

• HTML

• CSS

• JS

• ReactJS

-SASS

• improve coding skills within HTML & CSS & JS & ReactJS.

• use git commands (push, pull, commit, add etc.) and Github as Version Control System.

• Step 1: Create React App using npx create-react-app product-list-app or yarn create-react-app product-list-app

• Step 2: Build product-list-app using data.js.

• Step 4: Push your application into your own public repo on Github

• Step 5: Add project gif to your project and README.md file.

Live

• You can add additional functions to the application.

☺ Happy Coding ✍