Product List V2

Description

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

Project Skeleton

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

Expected Outcome

Objective

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.

At the end of the project, following topics are to be covered;

• HTML

• CSS

• JS

• ReactJS

-SASS

At the end of the project, students will be able to;

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

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

Steps to Solution

• 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.

Demo

Live

Notes

• You can add additional functions to the application.

☺ Happy Coding ✍