Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mehmet-github06/react-product-list-v2
An application where you can filter products and sort products into categories.
https://github.com/mehmet-github06/react-product-list-v2
filter html-css-javascript map mockdata react react-bootstrap-components react-icons responsive sass-framework
Last synced: about 1 month ago
JSON representation
An application where you can filter products and sort products into categories.
- Host: GitHub
- URL: https://github.com/mehmet-github06/react-product-list-v2
- Owner: Mehmet-github06
- Created: 2023-12-10T11:22:33.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-12-15T18:03:15.000Z (about 1 year ago)
- Last Synced: 2024-12-19T00:41:22.540Z (about 1 month ago)
- Topics: filter, html-css-javascript, map, mockdata, react, react-bootstrap-components, react-icons, responsive, sass-framework
- Language: JavaScript
- Homepage: https://react-products-list-app.netlify.app/
- Size: 24.3 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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`](./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](https://react-products-list-app.netlify.app/)
## Notes
- You can add additional functions to the application.
**
☺ Happy Coding ✍
**