├── .gitignore
├── LICENSE
├── README.md
├── db.json
├── design
    ├── details.png
    └── home.png
├── package-lock.json
├── package.json
├── previews
    ├── mobile.gif
    └── web.gif
├── public
    ├── favicon.ico
    ├── index.html
    ├── logo192.png
    ├── logo512.png
    ├── manifest.json
    ├── profile.jpg
    └── robots.txt
└── src
    ├── App.js
    ├── App.test.js
    ├── BASE_URL.js
    ├── components
        ├── About.js
        ├── Search.js
        ├── base
        │   ├── Footer.js
        │   └── Nav.js
        └── products
        │   ├── ProductCard.js
        │   └── TableItem.js
    ├── index.css
    ├── index.js
    ├── logo.svg
    ├── pages
        ├── AboutPage.js
        ├── Home.css
        ├── Home.js
        ├── ProductDetails.js
        ├── Products.js
        └── SearchPage.js
    ├── reportWebVitals.js
    ├── routes.js
    ├── setupTests.js
    └── technologies.js


/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | 
25 | .vercel
26 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2021 Merve Karabulut
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Dummy Amazon Clone with React - NozamA :joy:
 2 | 
 3 | In this assignment, I tried to build a responsive dummy amazon clone.
 4 | 
 5 | Its name is NozamA, very creative, I know :sunglasses:
 6 | 
 7 | You can see all products, search specific product and display each product details.
 8 | 
 9 | **[DEMO](https://react-product-app.vercel.app/)**
10 | 
11 | ## Technologies :rocket:
12 | - React
13 | - React Router Dom
14 | - Bootstrap 5
15 | - axios
16 | - React Paginate
17 | - Fake Store API
18 | - JSON-Server 
19 | 
20 | ## Design
21 | | Homepage| Details |
22 | | ------ | ----- |
23 | | <img src="design/home.png" width="200"> | <img src="design/details.png" width="200"> |
24 | 
25 | 
26 | ## Previews
27 | 
28 | - Desktop
29 | 
30 | ![Desktop Preview](previews/web.gif)
31 | 
32 | - Mobile
33 | 
34 | ![Mobile Preview](previews/mobile.gif)
35 | 
36 | ## How to install
37 | 
38 | ```bash
39 | git pull https://github.com/mervekrblt/upschool-react-assignment.git
40 | 
41 | npm install
42 | 
43 | npm start
44 | ```
45 | ## Run local database
46 | ```bash
47 | npm run database
48 | ```
49 | 
50 | ### Task Lists
51 | 
52 | - [x] Create Routes and components
53 |   - [x] Create all routes
54 |   - [x] Home Page
55 |     - [x] Navbar
56 |     - [x] Footer
57 |   - [x] Products Page
58 |     - [x] Product Card components
59 |   - [x] About Page
60 |   - [x] Search Page
61 |     - [x] Search component
62 |   - [x] Product Details Page
63 |     - [x] Product Details Card component
64 | - [x] Products in home page with pagination


--------------------------------------------------------------------------------
/db.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "products": [
  3 |     {
  4 |       "id": 1,
  5 |       "title": "laptop",
  6 |       "price": 109.95,
  7 |       "description": "Your perfect pack for everyday use and walks in the forest. Stash your laptop (up to 15 inches) in the padded sleeve, your everyday",
  8 |       "category": ["men's clothing", "clothing"],
  9 |       "image": "https://fakestoreapi.com/img/81fPKd-2AYL._AC_SL1500_.jpg",
 10 |       "rating": {
 11 |         "rate": 3.9,
 12 |         "count": 120
 13 |       }
 14 |     },
 15 |     {
 16 |       "id": 2,
 17 |       "title": "tshirt",
 18 |       "price": 22.3,
 19 |       "description": "Slim-fitting style, contrast raglan long sleeve, three-button henley placket, light weight & soft fabric for breathable and comfortable wearing. And Solid stitched shirts with round neck made for durability and a great fit for casual fashion wear and diehard baseball fans. The Henley style round neckline includes a three-button placket.",
 20 |       "category": [
 21 |         "men's clothing",
 22 |         "clothing"
 23 |       ],
 24 |       "image": "https://fakestoreapi.com/img/71-3HjGNDUL._AC_SY879._SX._UX._SY._UY_.jpg",
 25 |       "rating": {
 26 |         "rate": 4.1,
 27 |         "count": 259
 28 |       }
 29 |     },
 30 |     {
 31 |       "id": 3,
 32 |       "title": "jacket",
 33 |       "price": 55.99,
 34 |       "description": "great outerwear jackets for Spring/Autumn/Winter, suitable for many occasions, such as working, hiking, camping, mountain/rock climbing, cycling, traveling or other outdoors. Good gift choice for you or your family member. A warm hearted love to Father, husband or son in this thanksgiving or Christmas Day.",
 35 |       "category": [
 36 |         "men's clothing",
 37 |         "clothing"
 38 |       ],
 39 |       "image": "https://fakestoreapi.com/img/71li-ujtlUL._AC_UX679_.jpg",
 40 |       "rating": {
 41 |         "rate": 4.7,
 42 |         "count": 500
 43 |       }
 44 |     },
 45 |     {
 46 |       "id": 4,
 47 |       "title": "jacket",
 48 |       "price": 15.99,
 49 |       "description": "The color could be slightly different between on the screen and in practice. / Please note that body builds vary by person, therefore, detailed size information should be reviewed below on the product description.",
 50 |       "category": [
 51 |         "men's clothing",
 52 |         "clothing"
 53 |       ],
 54 |       "image": "https://fakestoreapi.com/img/71YXzeOuslL._AC_UY879_.jpg",
 55 |       "rating": {
 56 |         "rate": 2.1,
 57 |         "count": 430
 58 |       }
 59 |     },
 60 |     {
 61 |       "id": 5,
 62 |       "title": "bracelet",
 63 |       "price": 695,
 64 |       "description": "From our Legends Collection, the Naga was inspired by the mythical water dragon that protects the ocean's pearl. Wear facing inward to be bestowed with love and abundance, or outward for protection.",
 65 |       "category": [
 66 |         "jewelery",
 67 |         "bracelet"
 68 |       ],
 69 |       "image": "https://fakestoreapi.com/img/71pWzhdJNwL._AC_UL640_QL65_ML3_.jpg",
 70 |       "rating": {
 71 |         "rate": 4.6,
 72 |         "count": 400
 73 |       }
 74 |     },
 75 |     {
 76 |       "id": 6,
 77 |       "title": "micropave",
 78 |       "price": 168,
 79 |       "description": "Satisfaction Guaranteed. Return or exchange any order within 30 days.Designed and sold by Hafeez Center in the United States. Satisfaction Guaranteed. Return or exchange any order within 30 days.",
 80 |       "category": [
 81 |         "jewelery",
 82 |         "micropave"
 83 |       ],
 84 |       "image": "https://fakestoreapi.com/img/61sbMiUnoGL._AC_UL640_QL65_ML3_.jpg",
 85 |       "rating": {
 86 |         "rate": 3.9,
 87 |         "count": 70
 88 |       }
 89 |     },
 90 |     {
 91 |       "id": 7,
 92 |       "title": "ring",
 93 |       "price": 9.99,
 94 |       "description": "Classic Created Wedding Engagement Solitaire Diamond Promise Ring for Her. Gifts to spoil your love more for Engagement, Wedding, Anniversary, Valentine's Day...",
 95 |       "category": [
 96 |         "jewelery",
 97 |         "ring"
 98 |       ],
 99 |       "image": "https://fakestoreapi.com/img/71YAIFU48IL._AC_UL640_QL65_ML3_.jpg",
100 |       "rating": {
101 |         "rate": 3,
102 |         "count": 400
103 |       }
104 |     },
105 |     {
106 |       "id": 8,
107 |       "title": "earring",
108 |       "price": 10.99,
109 |       "description": "Rose Gold Plated Double Flared Tunnel Plug Earrings. Made of 316L Stainless Steel",
110 |       "category": ["jewelery", "earring"],
111 |       "image": "https://fakestoreapi.com/img/51UDEzMJVpL._AC_UL640_QL65_ML3_.jpg",
112 |       "rating": {
113 |         "rate": 1.9,
114 |         "count": 100
115 |       }
116 |     },
117 |     {
118 |       "id": 9,
119 |       "title": "usb",
120 |       "price": 64,
121 |       "description": "USB 3.0 and USB 2.0 Compatibility Fast data transfers Improve PC Performance High Capacity; Compatibility Formatted NTFS for Windows 10, Windows 8.1, Windows 7; Reformatting may be required for other operating systems; Compatibility may vary depending on user’s hardware configuration and operating system",
122 |       "category": [
123 |         "electronics",
124 |         "device"
125 |       ],
126 |       "image": "https://fakestoreapi.com/img/61IBBVJvSDL._AC_SY879_.jpg",
127 |       "rating": {
128 |         "rate": 3.3,
129 |         "count": 203
130 |       }
131 |     },
132 |     {
133 |       "id": 10,
134 |       "title": "ssd",
135 |       "price": 109,
136 |       "description": "Easy upgrade for faster boot up, shutdown, application load and response (As compared to 5400 RPM SATA 2.5” hard drive; Based on published specifications and internal benchmarking tests using PCMark vantage scores) Boosts burst write performance, making it ideal for typical PC workloads The perfect balance of performance and reliability Read/write speeds of up to 535MB/s/450MB/s (Based on internal testing; Performance may vary depending upon drive capacity, host device, OS and application.)",
137 |       "category": [
138 |         "electronics",
139 |         "device"
140 |       ],
141 |       "image": "https://fakestoreapi.com/img/61U7T1koQqL._AC_SX679_.jpg",
142 |       "rating": {
143 |         "rate": 2.9,
144 |         "count": 470
145 |       }
146 |     },
147 |     {
148 |       "id": 11,
149 |       "title": "ssd",
150 |       "price": 109,
151 |       "description": "3D NAND flash are applied to deliver high transfer speeds Remarkable transfer speeds that enable faster bootup and improved overall system performance. The advanced SLC Cache Technology allows performance boost and longer lifespan 7mm slim design suitable for Ultrabooks and Ultra-slim notebooks. Supports TRIM command, Garbage Collection technology, RAID, and ECC (Error Checking & Correction) to provide the optimized performance and enhanced reliability.",
152 |       "category": [
153 |         "electronics",
154 |         "device"
155 |       ],
156 |       "image": "https://fakestoreapi.com/img/71kWymZ+c+L._AC_SX679_.jpg",
157 |       "rating": {
158 |         "rate": 4.8,
159 |         "count": 319
160 |       }
161 |     },
162 |     {
163 |       "id": 12,
164 |       "title": "ssd",
165 |       "price": 114,
166 |       "description": "Expand your PS4 gaming experience, Play anywhere Fast and easy, setup Sleek design with high capacity, 3-year manufacturer's limited warranty",
167 |       "category": [
168 |         "electronics",
169 |         "device"
170 |       ],
171 |       "image": "https://fakestoreapi.com/img/61mtL65D4cL._AC_SX679_.jpg",
172 |       "rating": {
173 |         "rate": 4.8,
174 |         "count": 400
175 |       }
176 |     },
177 |     {
178 |       "id": 13,
179 |       "title": "laptop",
180 |       "price": 599,
181 |       "description": "21. 5 inches Full HD (1920 x 1080) widescreen IPS display And Radeon free Sync technology. No compatibility for VESA Mount Refresh Rate: 75Hz - Using HDMI port Zero-frame design | ultra-thin | 4ms response time | IPS panel Aspect ratio - 16: 9. Color Supported - 16. 7 million colors. Brightness - 250 nit Tilt angle -5 degree to 15 degree. Horizontal viewing angle-178 degree. Vertical viewing angle-178 degree 75 hertz",
182 |       "category": [
183 |         "electronics",
184 |         "device"
185 |       ],
186 |       "image": "https://fakestoreapi.com/img/81QpkIctqPL._AC_SX679_.jpg",
187 |       "rating": {
188 |         "rate": 2.9,
189 |         "count": 250
190 |       }
191 |     },
192 |     {
193 |       "id": 14,
194 |       "title": "monitor ",
195 |       "price": 999.99,
196 |       "description": "49 INCH SUPER ULTRAWIDE 32:9 CURVED GAMING MONITOR with dual 27 inch screen side by side QUANTUM DOT (QLED) TECHNOLOGY, HDR support and factory calibration provides stunningly realistic and accurate color and contrast 144HZ HIGH REFRESH RATE and 1ms ultra fast response time work to eliminate motion blur, ghosting, and reduce input lag",
197 |       "category": ["electronics", "device"],
198 |       "image": "https://fakestoreapi.com/img/81Zt42ioCgL._AC_SX679_.jpg",
199 |       "rating": {
200 |         "rate": 2.2,
201 |         "count": 140
202 |       }
203 |     },
204 |     {
205 |       "id": 15,
206 |       "title": "snowboard",
207 |       "price": 56.99,
208 |       "description": "Note:The Jackets is US standard size, Please choose size as your usual wear Material: 100% Polyester; Detachable Liner Fabric: Warm Fleece. Detachable Functional Liner: Skin Friendly, Lightweigt and Warm.Stand Collar Liner jacket, keep you warm in cold weather. Zippered Pockets: 2 Zippered Hand Pockets, 2 Zippered Pockets on Chest (enough to keep cards or keys)and 1 Hidden Pocket Inside.Zippered Hand Pockets and Hidden Pocket keep your things secure. Humanized Design: Adjustable and Detachable Hood and Adjustable cuff to prevent the wind and water,for a comfortable fit. 3 in 1 Detachable Design provide more convenience, you can separate the coat and inner as needed, or wear it together. It is suitable for different season and help you adapt to different climates",
209 |       "category": ["women's clothing", "clothing"],
210 |       "image": "https://fakestoreapi.com/img/51Y5NI-I5jL._AC_UX679_.jpg",
211 |       "rating": {
212 |         "rate": 2.6,
213 |         "count": 235
214 |       }
215 |     }
216 |   ]
217 | }


--------------------------------------------------------------------------------
/design/details.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mervekrblt/upschool-react-assignment/97b5e279c142100eec2aa58bd2b4f29c93f6d51e/design/details.png


--------------------------------------------------------------------------------
/design/home.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mervekrblt/upschool-react-assignment/97b5e279c142100eec2aa58bd2b4f29c93f6d51e/design/home.png


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "react-product-app",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@testing-library/jest-dom": "^5.16.1",
 7 |     "@testing-library/react": "^12.1.2",
 8 |     "@testing-library/user-event": "^13.5.0",
 9 |     "axios": "^0.24.0",
10 |     "bootstrap": "^5.1.3",
11 |     "json-server": "^0.17.0",
12 |     "react": "^17.0.2",
13 |     "react-dom": "^17.0.2",
14 |     "react-paginate": "^8.1.0",
15 |     "react-router-dom": "^6.2.1",
16 |     "react-scripts": "5.0.0",
17 |     "web-vitals": "^2.1.2"
18 |   },
19 |   "scripts": {
20 |     "database": "json-server --watch database.json --port 4000",
21 |     "start": "react-scripts start",
22 |     "build": "react-scripts build",
23 |     "test": "react-scripts test",
24 |     "eject": "react-scripts eject"
25 |   },
26 |   "eslintConfig": {
27 |     "extends": [
28 |       "react-app",
29 |       "react-app/jest"
30 |     ]
31 |   },
32 |   "browserslist": {
33 |     "production": [
34 |       ">0.2%",
35 |       "not dead",
36 |       "not op_mini all"
37 |     ],
38 |     "development": [
39 |       "last 1 chrome version",
40 |       "last 1 firefox version",
41 |       "last 1 safari version"
42 |     ]
43 |   }
44 | }
45 | 


--------------------------------------------------------------------------------
/previews/mobile.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mervekrblt/upschool-react-assignment/97b5e279c142100eec2aa58bd2b4f29c93f6d51e/previews/mobile.gif


--------------------------------------------------------------------------------
/previews/web.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mervekrblt/upschool-react-assignment/97b5e279c142100eec2aa58bd2b4f29c93f6d51e/previews/web.gif


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mervekrblt/upschool-react-assignment/97b5e279c142100eec2aa58bd2b4f29c93f6d51e/public/favicon.ico


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8" />
 5 |     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
 6 |     <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |     <meta name="theme-color" content="#000000" />
 8 |     <meta
 9 |       name="description"
10 |       content="Web site created using create-react-app"
11 |     />
12 |     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 |     <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css"
14 |       integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous" />
15 |     <!--
16 |       manifest.json provides metadata used when your web app is installed on a
17 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
18 |     -->
19 |     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
20 |     <!--
21 |       Notice the use of %PUBLIC_URL% in the tags above.
22 |       It will be replaced with the URL of the `public` folder during the build.
23 |       Only files inside the `public` folder can be referenced from the HTML.
24 | 
25 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
26 |       work correctly both with client-side routing and a non-root public URL.
27 |       Learn how to configure a non-root public URL by running `npm run build`.
28 |     -->
29 |     <title>NozamA</title>
30 |   </head>
31 |   <body>
32 |     <noscript>You need to enable JavaScript to run this app.</noscript>
33 |     <div id="root"></div>
34 |     <!--
35 |       This HTML file is a template.
36 |       If you open it directly in the browser, you will see an empty page.
37 | 
38 |       You can add webfonts, meta tags, or analytics to this file.
39 |       The build step will place the bundled scripts into the <body> tag.
40 | 
41 |       To begin the development, run `npm start` or `yarn start`.
42 |       To create a production bundle, use `npm run build` or `yarn build`.
43 |     -->
44 |   </body>
45 | </html>
46 | 


--------------------------------------------------------------------------------
/public/logo192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mervekrblt/upschool-react-assignment/97b5e279c142100eec2aa58bd2b4f29c93f6d51e/public/logo192.png


--------------------------------------------------------------------------------
/public/logo512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mervekrblt/upschool-react-assignment/97b5e279c142100eec2aa58bd2b4f29c93f6d51e/public/logo512.png


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/public/profile.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/mervekrblt/upschool-react-assignment/97b5e279c142100eec2aa58bd2b4f29c93f6d51e/public/profile.jpg


--------------------------------------------------------------------------------
/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/src/App.js:
--------------------------------------------------------------------------------
 1 | //import { useState } from 'react'
 2 | 
 3 | import { Route, Routes } from "react-router-dom";
 4 | import Footer from "./components/base/Footer";
 5 | import Nav from "./components/base/Nav";
 6 | import routes from "./routes"
 7 | 
 8 | function App() {
 9 |   //const [data, setData] = useState(null)
10 |   
11 |   /*fetch("http://localhost:4000/products")
12 |   .then(response => response.json())
13 |   .then(data => setData(data))*/
14 | 
15 |   return (
16 |     <>
17 |     <Nav></Nav>
18 |     <Routes>
19 |       {routes.map(route => <Route path={route.path} key={route.title} element={< route.element/>}></Route> )}
20 |     </Routes>
21 |     <Footer></Footer>
22 |     </>
23 |   );
24 | }
25 | 
26 | export default App;
27 | 


--------------------------------------------------------------------------------
/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(<App />);
6 |   const linkElement = screen.getByText(/learn react/i);
7 |   expect(linkElement).toBeInTheDocument();
8 | });
9 | 


--------------------------------------------------------------------------------
/src/BASE_URL.js:
--------------------------------------------------------------------------------
1 | const BASE_URL = "https://my-json-server.typicode.com/mervekrblt/upschool-react-assignment/products"
2 | 
3 | export default BASE_URL


--------------------------------------------------------------------------------
/src/components/About.js:
--------------------------------------------------------------------------------
 1 | import { useLocation } from "react-router-dom"
 2 | import { useState, useEffect } from "react"
 3 | import technologies from "../technologies"
 4 | 
 5 | const About = () =>
 6 | {
 7 |   const [show, setShow] = useState(true)
 8 |   const location = useLocation()
 9 |   useEffect(() =>
10 |   {
11 |     if (location.pathname === "/")
12 |     {
13 |       setShow(false)
14 |     }
15 |   }, [location.pathname])
16 |   //console.log(show, location)
17 |   return <>
18 |     <section className="text-secondary my-5">
19 |       <div className="container">
20 |         <div className="row">
21 |           <div className="col-md-7">
22 |             <h2>Project Details</h2>
23 |             <p>In this assignment, I tried to build a dummy amazon clone.<br /> Well, I know that it looks like nonprofessional<br /></p>
24 |             <p>I used Fake Store data. I got data from there and used it with JSON-Server. <br /> Why did I do this? <br /> I just wanted to try JSON-Server and its API that Fake Store API doesn't have.</p>
25 |             <p>You can see all products, search specific product and display each product details.</p>
26 |           </div>
27 |           <div className="col-md-5 drop-cap-text">
28 |             <h2>Technologies That I Used</h2>
29 |             <div className="list-group">
30 |               {technologies.map(data =>
31 |                 // eslint-disable-next-line react/jsx-no-target-blank
32 |                 <a href={data.url} key={data.id} target="_blank" rel="noopener   noreferrer" className="list-group-item list-group-item-action list-group-item-light">
33 |                   {data.title}
34 |                 </a>)
35 |               }
36 |             </div>
37 |           </div>
38 |         </div>
39 |       </div>
40 |     </section>
41 | 
42 |     {show && <div className="container">
43 |       <div className="text-center ">
44 |         <img src="profile.jpg" className="rounded-circle" style={{ width: "20vh" }} alt="Profile" />
45 |         <h3>About Merve</h3>
46 |         <p>Merve is a self-taught developer, and she works as a front-end developer in a company. After she graduated from food engineering, she found her passion in coding. She is one of the women of 25 who graduated from Women Developer Academy Turkey 2021. She is also a Women Techmakers Ambassador.
47 | 
48 |           <br /> Fun facts about her, she can center a div without "google it" sometimes, well she said "sometimes". Also, she likes to watch anime, learn new things, challenge herself.</p>
49 |       </div>
50 |     </div>}
51 |   </>
52 | }
53 | export default About


--------------------------------------------------------------------------------
/src/components/Search.js:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from 'react'
 2 | import { useLocation, useNavigate } from 'react-router-dom'
 3 | 
 4 | const Search = (props) =>
 5 | {
 6 |   const location = useLocation()
 7 |   const navigation = useNavigate()
 8 |   //const urlParams = new URLSearchParams(location.search)
 9 |   //const search = urlParams.get("q")
10 |   const [q, setQ] = useState("")
11 |   //console.log(location)
12 | 
13 |   const inputHandler = (e) =>
14 |   {
15 |     e.preventDefault()
16 |     // PROBLEMMM
17 |     //console.log(e.target.search.value)
18 |     setQ(e.target.search.value)
19 |     console.log(q)
20 |     navigation(`/search?q=${(e.target.search.value).toLowerCase()}`)
21 |   }
22 | 
23 |   useEffect(() => {
24 |     //if(location.search === "")
25 |     if(location.search.length === 0) {
26 |       console.log("setQ sıfırla")
27 |       setQ("")
28 |       console.log(q)
29 |     }
30 |   }, [location, q])
31 | 
32 | 
33 |   return <>
34 |     <div className="container my-5">
35 |       <form onSubmit={inputHandler} className="mx-auto">
36 |         <input type="search" className="form-control w-75 my-3 mx-auto clear" autocomplete="off" name="search" defaultValue={q} />
37 |         <div className="text-center">
38 |           <button className="btn btn-success me-3" type="submit">Search</button>
39 |         </div>
40 |       </form>
41 |     </div>
42 |   </>
43 | }
44 | export default Search


--------------------------------------------------------------------------------
/src/components/base/Footer.js:
--------------------------------------------------------------------------------
 1 | const Footer = () =>
 2 | {
 3 |   return <>
 4 |     <footer className="bg-dark text-center text-white">
 5 | 
 6 |       <div className="container p-4 pb-0">
 7 | 
 8 |         <section className="mb-4">
 9 | 
10 |           <a
11 |             className="btn btn-primary btn-floating m-1"
12 |             style={{ backgroundColor: "#55acee" }}
13 |             href="https://twitter.com/esrikhaller"
14 |             role="button"
15 |           ><i className="fab fa-twitter"></i
16 |           ></a>
17 | 
18 | 
19 |           <a
20 |             className="btn btn-primary btn-floating m-1"
21 |             style={{ backgroundColor: "#0082ca" }}
22 |             href="https://www.linkedin.com/in/merve-karabulut"
23 |             role="button"
24 |           ><i className="fab fa-linkedin-in"></i
25 |           ></a>
26 | 
27 |           <a
28 |             className="btn btn-primary btn-floating m-1"
29 |             style={{ backgroundColor: "#333333" }}
30 |             href="https://github.com/mervekrblt"
31 |             role="button"
32 |           ><i className="fab fa-github"></i
33 |           ></a>
34 |         </section>
35 | 
36 |       </div>
37 | 
38 | 
39 | 
40 |       <div className="text-center p-3" >
41 |         © 2021 Copyright {' '}
42 |         <a className="text-white" href="https://www.linkedin.com/in/merve-karabulut">Merve Karabulut</a>
43 |       </div>
44 | 
45 |     </footer>
46 |   </>
47 | }
48 | export default Footer


--------------------------------------------------------------------------------
/src/components/base/Nav.js:
--------------------------------------------------------------------------------
 1 | import { Link } from "react-router-dom"
 2 | import routes from '../../routes'
 3 | 
 4 | const Nav = () =>
 5 | {
 6 |   return <>
 7 |     <nav className="navbar navbar-expand-lg navbar-dark bg-dark ">
 8 |       <div className="container">
 9 |         <Link className='navbar-brand' to="/">NozamA</Link>
10 |         <button className="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
11 |           <span className="navbar-toggler-icon"></span>
12 |         </button>
13 |         <div className="collapse navbar-collapse " id="navbarSupportedContent">
14 |           <ul className="navbar-nav ms-auto mb-2 mb-lg-0">
15 |             {routes.filter(item => item.isNav).map((item, index) =>
16 |               <li key={index} className="nav-item">
17 |                 <Link className="nav-link active" aria-current="page" to={item.path}>{item.title}</Link>
18 |               </li>
19 |             )}
20 |           </ul>
21 |         </div>
22 |       </div>
23 |     </nav>
24 |   </>
25 | }
26 | export default Nav


--------------------------------------------------------------------------------
/src/components/products/ProductCard.js:
--------------------------------------------------------------------------------
 1 | import { Link } from "react-router-dom"
 2 | 
 3 | const ProductCard = (props) => {
 4 |   const {image, title, description, id} = props
 5 | return <>
 6 |   <div className="card py-3 h-100">
 7 |     <img className="card-img-top mx-auto" src={image} alt="Card" style={{width: "15vh", height: "20vh"}}/>
 8 |       <div className="card-body">
 9 |         <h5 className="card-title text-center">{title}</h5>
10 |       <p className="card-text text-truncate" style={{}}>{description}</p>
11 |       </div>
12 |     <Link to={`/product-details/${id}`} className="btn btn-dark w-75 mx-auto">Details</Link>
13 |   </div>
14 | </>
15 | }
16 | export default ProductCard


--------------------------------------------------------------------------------
/src/components/products/TableItem.js:
--------------------------------------------------------------------------------
 1 | import { useNavigate } from "react-router-dom"
 2 | 
 3 | const TableItem = (props) =>
 4 | {
 5 |   const { image, title, description, id } = props
 6 | 
 7 |   const navigation = useNavigate()
 8 |   const goDetails = () => {
 9 |     navigation(`/product-details/${id}`)
10 |   }
11 |   
12 |   return <>
13 | 
14 |     <tr role="button" onClick={goDetails}>
15 |       <th scope="row">{id}</th>
16 |       <td><img src={image} alt="products" style={{ width: "10vh", height: "10vh" }}/> </td>
17 |       <td>{title}</td>
18 |       <td className="d-none d-md-table-cell">{description.split(" ").slice(0, 5).join(" ")}...</td>
19 |     </tr>
20 |   </>
21 | }
22 | export default TableItem


--------------------------------------------------------------------------------
/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/index.js:
--------------------------------------------------------------------------------
 1 | import React from 'react';
 2 | import ReactDOM from 'react-dom';
 3 | import './index.css';
 4 | import App from './App';
 5 | import reportWebVitals from './reportWebVitals';
 6 | import { BrowserRouter } from "react-router-dom";
 7 | import 'bootstrap/dist/css/bootstrap.min.css'
 8 | import "bootstrap/dist/js/bootstrap.bundle";
 9 | 
10 | 
11 | ReactDOM.render(
12 |   <BrowserRouter>
13 |     <App />
14 |   </BrowserRouter>
15 |   ,
16 |   document.getElementById('root')
17 | );
18 | 
19 | // If you want to start measuring performance in your app, pass a function
20 | // to log results (for example: reportWebVitals(console.log))
21 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
22 | reportWebVitals();
23 | 


--------------------------------------------------------------------------------
/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>


--------------------------------------------------------------------------------
/src/pages/AboutPage.js:
--------------------------------------------------------------------------------
1 | import About from "../components/About"
2 | 
3 | const AboutPage = () => {
4 | return <>
5 | <About></About>
6 | </>
7 | }
8 | export default AboutPage


--------------------------------------------------------------------------------
/src/pages/Home.css:
--------------------------------------------------------------------------------
 1 | .pagination {
 2 |   margin-top: 45px;
 3 |   display: flex;
 4 |   justify-content: center;
 5 |   list-style: none;
 6 |   outline: none;
 7 | }
 8 | 
 9 | .pagination>.active>a {
10 |   background-color: #0000007a;
11 | }
12 | 
13 | .pagination>li>a {
14 |   border: 1px solid #bd81a586;
15 |   padding: 5px 10px;
16 |   outline: none;
17 |   cursor: pointer;
18 | }
19 | 
20 | .pagination>li>a,
21 | .pagination>li>span {
22 |   color: #070707;
23 |   background-color: rgb(247, 247, 247);
24 | }


--------------------------------------------------------------------------------
/src/pages/Home.js:
--------------------------------------------------------------------------------
 1 | import { useState, useEffect } from "react"
 2 | import ReactPaginate from 'react-paginate';
 3 | import BASE_URL from "../BASE_URL"
 4 | import About from "../components/About"
 5 | import Search from "../components/Search"
 6 | import ProductCard from '../components/products/ProductCard'
 7 | import './Home.css'
 8 | 
 9 | const Home = () =>
10 | {
11 |   const [currentPage, setCurrentPage] = useState(0);
12 |   const [data, setData] = useState([]);
13 | 
14 |   const PER_PAGE = 3;
15 |   const offset = currentPage * PER_PAGE;
16 |   const currentPageData = data
17 |     .slice(offset, offset + PER_PAGE)
18 |   const pageCount = Math.ceil(data.length / PER_PAGE);
19 | 
20 |   useEffect(() =>
21 |   {
22 |     fetchData();
23 |   }, []);
24 |   function fetchData()
25 |   {
26 |     fetch(BASE_URL)
27 |       .then((res) => res.json())
28 |       .then((data) =>
29 |       {
30 |         setData(data);
31 |       });
32 |   }
33 | 
34 |   function handlePageClick({ selected: selectedPage })
35 |   {
36 |     setCurrentPage(selectedPage);
37 |   }
38 |   return <>
39 |     <h1 className="text-center my-5">NozamA</h1>
40 |     <Search></Search>
41 |     <div className="container">
42 |       <div className="row">
43 |         {currentPageData.map(product =>
44 |           <div className='col-md-4 py-3' key={product.id}>
45 |             <ProductCard
46 |               image={product.image}
47 |               title={product.title}
48 |               price={product.price}
49 |               id={product.id}
50 |               description={product.description}
51 |             >
52 |             </ProductCard>
53 |           </div>
54 |         )}
55 |       </div>
56 | 
57 |     </div>
58 | 
59 |     <ReactPaginate
60 |       previousLabel={"previous"}
61 |       nextLabel={"next"}
62 |       breakLabel={"..."}
63 |       breakClassName={"break-me"}
64 |       pageCount={pageCount}
65 |       onPageChange={handlePageClick}
66 |       containerClassName={"pagination"}
67 |       subContainerClassName={"pages pagination"}
68 |       activeClassName={"active"}
69 |     />
70 | 
71 |     <About></About>
72 | 
73 |   </>
74 | }
75 | export default Home


--------------------------------------------------------------------------------
/src/pages/ProductDetails.js:
--------------------------------------------------------------------------------
 1 | import { useLocation } from 'react-router-dom'
 2 | import { useEffect, useState } from 'react'
 3 | import BASE_URL from '../BASE_URL'
 4 | 
 5 | const ProductDetails = () =>
 6 | {
 7 |   const location = useLocation()
 8 |   const id = Number(location.pathname.split("/")[2])
 9 |   const [product, setProduct] = useState([])
10 |   const [loading, setLoading] = useState(true)
11 | 
12 |   const getProduct = async () =>
13 |   {
14 |     fetch(`${BASE_URL}/${id}`)
15 |       .then((res) => res.json())
16 |       .then(data =>
17 |       {
18 |         setProduct(data)
19 |         setLoading(false)
20 |       })
21 | 
22 |   }
23 |   //console.log(loading)
24 |   useEffect(() =>
25 |   {
26 |     getProduct()
27 |   // eslint-disable-next-line react-hooks/exhaustive-deps
28 |   }, [])
29 | 
30 |   return <>
31 |     {loading && <div className="text-center">
32 |       <div class="spinner-border text-secondary" role="status">
33 |       <span class="visually-hidden">Loading...</span>
34 |     </div>
35 |     </div>
36 |     }
37 |     {!loading && <div className="container">
38 |       <div className="row my-5">
39 |         <div className="col-md-6 text-center">
40 |           <img src={product.image} className=' h-575 w-75' alt='product' />
41 |         </div>
42 |         <div className="col-md-6">
43 |           <h2>{product.title}</h2>
44 |           <p className="text-wrap">
45 |             {product.description}
46 |           </p>
47 |           <h2>Categories</h2>
48 |           {product.category.map(item => <span class="badge rounded-pill bg-info text-dark mb-3 me-2">{item}</span>)}
49 |           <h2>Price</h2>
50 |           <h4>{product.price} $</h4>
51 |         </div>
52 |       </div>
53 |     </div>}
54 |   </>
55 | }
56 | export default ProductDetails


--------------------------------------------------------------------------------
/src/pages/Products.js:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from 'react'
 2 | import axios from 'axios'
 3 | import BASE_URL from '../BASE_URL'
 4 | //import ProductCard from '../components/products/ProductCard'
 5 | import TableItem from '../components/products/TableItem'
 6 | 
 7 | 
 8 | const Products = () =>
 9 | {
10 |   const [products, setProducts] = useState([])
11 |   const [loading, setLoading] = useState(true)
12 | 
13 |   const getAllProducts = async () =>
14 |   {
15 |     const res = await axios.get(BASE_URL)
16 |     const data = res.data
17 |     setProducts(data)
18 |     setLoading(false)
19 |   }
20 | 
21 |   useEffect(() =>
22 |   {
23 |     // call this function when page is created
24 |     getAllProducts()
25 |     console.log(products)
26 |   // eslint-disable-next-line react-hooks/exhaustive-deps
27 |   }, [])
28 | 
29 |   console.log(products)
30 |   return <>
31 |     {loading && <div className="text-center">
32 |       <div class="spinner-border text-secondary" role="status">
33 |         <span class="visually-hidden">Loading...</span>
34 |       </div>
35 |     </div>
36 |     }
37 | 
38 |     {!loading && 
39 |     <div className="table-responsive container">
40 |       <table className="table table-hover table-dark mt-5">
41 |       <thead>
42 |         <tr>
43 |           <th scope="col">#</th>
44 |           <th scope="col">Product Image</th>
45 |           <th scope="col">Title</th>
46 |           <th scope="col" className='d-none d-md-block'>Description</th>
47 |         </tr>
48 |       </thead>
49 | 
50 |       <tbody>
51 |         {products.map(product =>
52 |           <TableItem
53 |             key={product.id}
54 |             id={product.id}
55 |             image={product.image}
56 |             title={product.title}
57 |             price={product.price}
58 |             description={product.description}
59 |           >
60 |           </TableItem>
61 |         )}
62 |       </tbody>
63 |     </table>
64 |     </div>}
65 |     
66 |   </>
67 | }
68 | export default Products


--------------------------------------------------------------------------------
/src/pages/SearchPage.js:
--------------------------------------------------------------------------------
 1 | import { useLocation } from "react-router-dom"
 2 | import Search from "../components/Search"
 3 | import ProductCard from "../components/products/ProductCard"
 4 | import BASE_URL from "../BASE_URL"
 5 | import { useEffect, useState } from "react"
 6 | 
 7 | const SearchPage = () =>
 8 | {
 9 |   const location = useLocation()
10 |   const urlParams = new URLSearchParams(location.search)
11 |   const search = urlParams.get("q")
12 |   const [products, setProducts] = useState([])
13 |   console.log(search)
14 | 
15 |   /*const filterProducts = () => {
16 |     fetch(`${BASE_URL}?title=${search}`)
17 |       .then(res => res.json())
18 |       .then(data => setProducts(data))
19 |   }*/
20 | 
21 |   useEffect(() =>
22 |   {
23 |     fetch(`${BASE_URL}?title=${search}`)
24 |       .then(res => res.json())
25 |       .then(data => setProducts(data))
26 |   }, [search])
27 | 
28 |   console.log(products)
29 |   console.log(!products.length)
30 |   return <>
31 |     <h1 className="text-center my-5">What are you looking for...</h1>
32 |     <Search ></Search>
33 |     {(!products.length && search !== null) && <div className="container my-5">
34 |       <div className="alert alert-warning" role="alert">
35 |         <h2>There is no item about "{search}" try again</h2>
36 |         <p className="fw-bolder fst-italic">Hint: Search for ssd, laptop etc. </p>
37 |         <p>I am not Amazon, I dont have all products :)</p>
38 |       </div>
39 | 
40 |     </div>}
41 | 
42 |     <div className="container">
43 |       <div className="row">
44 |         {products.map(product => <div className='col-md-4 py-3' key={product.id}>
45 |           <ProductCard
46 |             id={product.id}
47 |             image={product.image}
48 |             title={product.title}
49 |             price={product.price}
50 |             description={product.description}
51 |           >
52 |           </ProductCard>
53 |         </div>)}
54 |       </div>
55 |     </div>
56 |   </>
57 | }
58 | export default SearchPage


--------------------------------------------------------------------------------
/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 | 


--------------------------------------------------------------------------------
/src/routes.js:
--------------------------------------------------------------------------------
 1 | import Home from './pages/Home'
 2 | import AboutPage from './pages/AboutPage'
 3 | import Products from './pages/Products'
 4 | import SearchPage from './pages/SearchPage'
 5 | import ProductDetails from './pages/ProductDetails'
 6 | const routes = [
 7 |   { title: "Home", path: "/", element: Home, isNav: true },
 8 |   { title: "About", path: "about", element: AboutPage, isNav: true },
 9 |   { title: "Products", path: "products", element: Products, isNav: true },
10 |   { title: "Search", path: "search", element: SearchPage, isNav: true },
11 |   { title: "ProductDetails", path: "product-details/:id", element: ProductDetails, isNav: false },
12 |   
13 | ]
14 | 
15 | export default routes


--------------------------------------------------------------------------------
/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/technologies.js:
--------------------------------------------------------------------------------
 1 | const technologies = [
 2 |   { id: 1, title: "React Paginate", url:"https://www.npmjs.com/package/react-paginate" },
 3 |   { id: 2, title: "React", url:"https://reactjs.org/" },
 4 |   { id: 3, title: "Bootstrap 5", url:"hhttps://getbootstrap.com/" },
 5 |   { id: 4, title: "React Router Dom", url:"https://reactrouterdotcom.fly.dev/docs/en/v6" },
 6 |   { id: 5, title: "JSON Server", url:"https://www.npmjs.com/package/json-server" },
 7 |   { id: 6, title: "Fake Store API", url:"https://fakestoreapi.com/" },
 8 | ]
 9 | 
10 | export default technologies


--------------------------------------------------------------------------------