├── src
├── App.css
├── setupTests.js
├── App.test.js
├── index.css
├── reportWebVitals.js
├── index.js
├── App.js
├── components
│ ├── Footer.js
│ ├── Navbar.js
│ ├── Home.js
│ ├── Products.js
│ └── Product.js
└── logo.svg
├── thumbnail.png
├── public
├── favicon.png
├── robots.txt
├── FakeShop.png
├── banners
│ ├── 1.png
│ ├── 2.png
│ ├── 3.png
│ └── 4.png
├── manifest.json
└── index.html
├── README.md
└── package.json
/src/App.css:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/thumbnail.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/neerajadhav/ReactFakeShop/HEAD/thumbnail.png
--------------------------------------------------------------------------------
/public/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/neerajadhav/ReactFakeShop/HEAD/public/favicon.png
--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 |
--------------------------------------------------------------------------------
/public/FakeShop.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/neerajadhav/ReactFakeShop/HEAD/public/FakeShop.png
--------------------------------------------------------------------------------
/public/banners/1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/neerajadhav/ReactFakeShop/HEAD/public/banners/1.png
--------------------------------------------------------------------------------
/public/banners/2.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/neerajadhav/ReactFakeShop/HEAD/public/banners/2.png
--------------------------------------------------------------------------------
/public/banners/3.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/neerajadhav/ReactFakeShop/HEAD/public/banners/3.png
--------------------------------------------------------------------------------
/public/banners/4.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/neerajadhav/ReactFakeShop/HEAD/public/banners/4.png
--------------------------------------------------------------------------------
/src/setupTests.js:
--------------------------------------------------------------------------------
1 | // jest-dom adds custom jest matchers for asserting on DOM nodes.
2 | // allows you to do things like:
3 | // expect(element).toHaveTextContent(/react/i)
4 | // learn more: https://github.com/testing-library/jest-dom
5 | import '@testing-library/jest-dom';
6 |
--------------------------------------------------------------------------------
/src/App.test.js:
--------------------------------------------------------------------------------
1 | import { render, screen } from '@testing-library/react';
2 | import App from './App';
3 |
4 | test('renders learn react link', () => {
5 | render();
6 | const linkElement = screen.getByText(/learn react/i);
7 | expect(linkElement).toBeInTheDocument();
8 | });
9 |
--------------------------------------------------------------------------------
/src/index.css:
--------------------------------------------------------------------------------
1 | body {
2 | margin: 0;
3 | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
4 | 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
5 | sans-serif;
6 | -webkit-font-smoothing: antialiased;
7 | -moz-osx-font-smoothing: grayscale;
8 | }
9 |
10 | code {
11 | font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
12 | monospace;
13 | }
14 |
--------------------------------------------------------------------------------
/src/reportWebVitals.js:
--------------------------------------------------------------------------------
1 | const reportWebVitals = onPerfEntry => {
2 | if (onPerfEntry && onPerfEntry instanceof Function) {
3 | import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
4 | getCLS(onPerfEntry);
5 | getFID(onPerfEntry);
6 | getFCP(onPerfEntry);
7 | getLCP(onPerfEntry);
8 | getTTFB(onPerfEntry);
9 | });
10 | }
11 | };
12 |
13 | export default reportWebVitals;
14 |
--------------------------------------------------------------------------------
/public/manifest.json:
--------------------------------------------------------------------------------
1 | {
2 | "short_name": "React App",
3 | "name": "Create React App Sample",
4 | "icons": [
5 | {
6 | "src": "favicon.ico",
7 | "sizes": "64x64 32x32 24x24 16x16",
8 | "type": "image/x-icon"
9 | },
10 | {
11 | "src": "logo192.png",
12 | "type": "image/png",
13 | "sizes": "192x192"
14 | },
15 | {
16 | "src": "logo512.png",
17 | "type": "image/png",
18 | "sizes": "512x512"
19 | }
20 | ],
21 | "start_url": ".",
22 | "display": "standalone",
23 | "theme_color": "#000000",
24 | "background_color": "#ffffff"
25 | }
26 |
--------------------------------------------------------------------------------
/src/index.js:
--------------------------------------------------------------------------------
1 | import React from 'react';
2 | import ReactDOM from 'react-dom/client';
3 | import './index.css';
4 | import App from './App';
5 | import reportWebVitals from './reportWebVitals';
6 | import 'bootstrap/dist/css/bootstrap.css';
7 | import 'bootstrap/dist/js/bootstrap.js';
8 | import 'font-awesome/css/font-awesome.css';
9 | import 'react-loading-skeleton/dist/skeleton.css'
10 | import { BrowserRouter } from 'react-router-dom';
11 |
12 | const root = ReactDOM.createRoot(document.getElementById('root'));
13 | root.render(
14 |
15 |
16 |
17 | );
18 | reportWebVitals();
19 |
--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
1 | import './App.css';
2 | import Navbar from './components/Navbar';
3 | import Home from './components/Home';
4 | import Products from './components/Products';
5 | import Product from './components/Product';
6 | import Footer from './components/Footer';
7 | import { Route, Routes } from 'react-router-dom';
8 |
9 | function App() {
10 | return (
11 | <>
12 |
13 |
14 | } />
15 | } />
16 | } />
17 |
18 |
19 | >
20 | );
21 | }
22 |
23 | export default App;
24 |
--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
12 |
13 |
14 | FakeShop
15 |
16 |
17 |
18 |
19 |
20 |
21 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # FakeShop
2 | 
3 |
4 | A React Js e-commerce website. It includes two pages, the homepage to display the list of products and page 2 to display the details of the selected product.
5 |
6 | ## Tech Stack
7 | 1. HTML
8 | 2. CSS
9 | 3. JavaScript
10 |
11 | ## Frameworks and Libraries
12 | 1. React
13 | 2. Bootsrap
14 | 3. Font-Awesome
15 |
16 | ## API's
17 |
18 | ### Get all products
19 | ``` javascript
20 | fetch('https://fakestoreapi.com/products')
21 | .then(res=>res.json())
22 | .then(json=>console.log(json))
23 | ```
24 |
25 | ### Get a single product
26 | ``` javascript
27 | fetch('https://fakestoreapi.com/products/1')
28 | .then(res=>res.json())
29 | .then(json=>console.log(json))
30 | ```
31 |
--------------------------------------------------------------------------------
/src/components/Footer.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { NavLink } from 'react-router-dom';
3 |
4 | const Footer = () => {
5 | return (
6 |
19 | )
20 | }
21 |
22 | export default Footer;
23 |
--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "fakeshop",
3 | "version": "0.1.0",
4 | "private": true,
5 | "dependencies": {
6 | "@testing-library/jest-dom": "^5.16.4",
7 | "@testing-library/react": "^13.3.0",
8 | "@testing-library/user-event": "^13.5.0",
9 | "autoprefixer": "10.4.5",
10 | "bootstrap": "^5.1.3",
11 | "font-awesome": "^4.7.0",
12 | "react": "^18.2.0",
13 | "react-dom": "^18.2.0",
14 | "react-loading-skeleton": "^3.1.0",
15 | "react-redux": "^8.0.2",
16 | "react-router-dom": "^6.3.0",
17 | "react-scripts": "^5.0.1",
18 | "redux": "^4.2.0",
19 | "web-vitals": "^2.1.4"
20 | },
21 | "scripts": {
22 | "start": "react-scripts start",
23 | "build": "react-scripts build",
24 | "test": "react-scripts test",
25 | "eject": "react-scripts eject"
26 | },
27 | "eslintConfig": {
28 | "extends": [
29 | "react-app",
30 | "react-app/jest"
31 | ]
32 | },
33 | "browserslist": {
34 | "production": [
35 | ">0.2%",
36 | "not dead",
37 | "not op_mini all"
38 | ],
39 | "development": [
40 | "last 1 chrome version",
41 | "last 1 firefox version",
42 | "last 1 safari version"
43 | ]
44 | },
45 | "overrides": {
46 | "autoprefixer": "10.4.5"
47 | }
48 | }
49 |
--------------------------------------------------------------------------------
/src/components/Navbar.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { NavLink } from 'react-router-dom';
3 |
4 | const Navbar = () => {
5 | return (
6 |
7 |
8 |
9 |
33 |
34 |
35 |
36 | )
37 | }
38 |
39 | export default Navbar;
--------------------------------------------------------------------------------
/src/components/Home.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Products from './Products';
3 |
4 | const Home = () => {
5 | return (
6 | <>
7 |
8 |
9 |
10 |
11 |

12 |
13 |
14 |

15 |
16 |
17 |

18 |
19 |
20 |

21 |
22 |
23 |
27 |
31 |
32 |
33 |
34 | >
35 | )
36 | }
37 |
38 | export default Home;
--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/Products.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react'
2 | import Skeleton from 'react-loading-skeleton';
3 | import { NavLink } from 'react-router-dom';
4 |
5 | function Products() {
6 |
7 | const [data, setData] = useState([]);
8 | const [loading, setLoading] = useState(false);
9 | const [filter, setFilter] = useState(data);
10 |
11 | useEffect(() => {
12 | let componentMounted = true;
13 | const getProdcuts = async () => {
14 | setLoading(true);
15 | const response = await fetch('https://fakestoreapi.com/products');
16 | if (componentMounted) {
17 | const data = await response.json();
18 | setData(data);
19 | setFilter(data);
20 | setLoading(false);
21 | }
22 | return () => {
23 | componentMounted = false;
24 | }
25 | }
26 | getProdcuts();
27 | }, []);
28 |
29 | const Loading = () => {
30 | return (
31 | <>
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 | >
73 | )
74 | }
75 |
76 | const filterProduct = (category) => {
77 | const updateList = data.filter((x) => x.category === category);
78 | setFilter(updateList);
79 | }
80 |
81 | const ShowProducts = () => {
82 | return (
83 | <>
84 |
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |
96 |
97 |
98 | {filter.map((product) => {
99 | return (
100 |
101 |
102 |
103 |

104 |
105 | {product.title.substring(0, 50)}...
106 |
107 |
108 |
109 |
${product.price}
110 |
111 |
114 |
115 |
116 |
117 |
118 |
119 | )
120 | })}
121 |
122 |
123 |
124 |
125 |
126 | >
127 | )
128 | }
129 |
130 | return (
131 |
132 |
133 | {loading ? : }
134 |
135 |
136 | )
137 | }
138 |
139 | export default Products
--------------------------------------------------------------------------------
/src/components/Product.js:
--------------------------------------------------------------------------------
1 | import React, { useState, useEffect } from 'react'
2 | import { useParams } from 'react-router';
3 | import Skeleton from 'react-loading-skeleton';
4 | import { NavLink } from 'react-router-dom';
5 |
6 | function Product() {
7 |
8 | const { id } = useParams();
9 | const [product, setProduct] = useState([]);
10 | const [loading, setLoading] = useState(false);
11 |
12 | useEffect(() => {
13 | const getProduct = async () => {
14 | setLoading(true);
15 | const response = await fetch(`https://fakestoreapi.com/products/${id}`);
16 | const data = await response.json();
17 | setProduct(data);
18 | setLoading(false);
19 | }
20 | getProduct();
21 | }, [id]);
22 |
23 | const Loading = () => {
24 | return (
25 | <>
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
42 |
43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |
70 |
71 |
72 | >
73 | )
74 | }
75 |
76 | const ShowDetails = () => {
77 | return (
78 | <>
79 |
80 |
81 |
82 |
83 |
84 | Back
85 |
86 |
87 |
88 |
89 |
90 |
91 |
92 |

93 |
94 |
95 |
96 |
97 |
98 |
99 |
100 |
in {product.category}
101 |
102 |
103 | {product.title}
104 |
105 |
106 | Rating {product.rating && product.rating.rate}
107 |
108 |
109 |
110 | ${product.price}
111 |
112 |
113 |
{product.description}
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 | >
122 | )
123 | }
124 |
125 | return (
126 | <>
127 |
128 |
129 | {loading ? : }
130 |
131 |
132 | >
133 | )
134 | }
135 |
136 | export default Product
--------------------------------------------------------------------------------