https://github.com/umutplvn/product_list-app
Product List App
https://github.com/umutplvn/product_list-app
boottrap react react-filter useeffect usestate
Last synced: about 2 months ago
JSON representation
Product List App
- Host: GitHub
- URL: https://github.com/umutplvn/product_list-app
- Owner: Umutplvn
- Created: 2023-07-21T16:16:58.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-09-08T02:02:26.000Z (over 1 year ago)
- Last Synced: 2025-02-10T09:42:02.680Z (4 months ago)
- Topics: boottrap, react, react-filter, useeffect, usestate
- Language: JavaScript
- Homepage: https://product-list-umut.netlify.app/
- Size: 5.15 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Product List (RP-03)
## Live at: https://product-list-umut.netlify.app/
## Description
Project aims to create a Product List App.
## Problem Statement
- We are adding a new project to our portfolios. So you and your colleagues have started to work on the project.
## Project Skeleton
```
Product List App(folder)
|
|----readme.md # Given to the students (Definition of the project)
SOLUTION
├── public
│ └── index.html
├── src
│ ├── components
│ │ ├── Header.jsx
│ │ └── ProductCard.jsx
│ ├── pages
│ │ └── Home.jsx
│ ├── App.js
│ ├── index.js
│ └── index.css
├── package.json
└── yarn.lock
```
## Expected Outcome
## Objective
Build a Product List App using ReactJS.
### At the end of the project, following topics are to be covered;
- HTML
- CSS
- JS
- ReactJS
### 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`
- Step 2 : Install `axios` package to your `package.json`.
- Step 3: Build Product List App. Place the filtering buttons in the header component. Display the carts in the ProductCard component. Perform the distribution from the Home component.
- Step 4: You can use CSS frameworks like Bootstrap, React Bootstrap, TailwindCss or Native Css, Sass, Module Css.
- Step 5: You can use https://fakestoreapi.com/products for data.
- Step 6: You can use https://fakestoreapi.com/products/categories for categories.
- Step 7: Push your application into your own public repo on Github
- Step 8: Add project gif to your project and README.md file.
## Notes
- You can add additional functionalities to your app.
**
☺ Happy Coding ✍
**