Skip to content

Commit 659f91e

Browse files
snehalgadgesnehalgadge
authored
Merge pull request #6 from jwala-anirudh/main
Project build issues and code refactoring
2 parents 762717b + 578fe1d commit 659f91e

27 files changed

+1136
-1069
lines changed

‎.vscode/settings.json‎

Lines changed: 0 additions & 3 deletions
This file was deleted.

‎04_REACT/ecommerce-app/.env‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
REACT_APP_BACKEND_URL='https://fakestoreapi.com/products'

‎04_REACT/ecommerce-app/package-lock.json‎

Lines changed: 300 additions & 178 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎04_REACT/ecommerce-app/package.json‎

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -5,27 +5,24 @@
55
"dependencies": {
66
"@emotion/react": "^11.11.1",
77
"@emotion/styled": "^11.11.0",
8-
"@mui/icons-material": "^5.13.7",
9-
"@mui/material": "^5.13.7",
8+
"@mui/icons-material": "^5.14.3",
9+
"@mui/material": "^5.14.3",
1010
"@reduxjs/toolkit": "^1.9.5",
11-
"@testing-library/jest-dom": "^5.16.5",
12-
"@testing-library/react": "^13.4.0",
13-
"@testing-library/user-event": "^14.4.3",
1411
"axios": "^1.4.0",
1512
"firebase": "^10.1.0",
1613
"framer-motion": "^10.15.0",
1714
"hero-slider": "^3.2.0",
1815
"react": "^18.2.0",
1916
"react-dom": "^18.2.0",
20-
"react-icons": "^4.9.0",
17+
"react-icons": "^4.10.1",
2118
"react-loader-spinner": "^5.3.4",
22-
"react-redux": "^8.0.7",
23-
"react-router-dom": "^6.14.1",
19+
"react-redux": "^8.1.2",
20+
"react-router-dom": "^6.14.2",
2421
"react-scripts": "5.0.1",
2522
"react-slick": "^0.29.0",
2623
"redux-persist": "^6.0.0",
2724
"slick-carousel": "^1.8.1",
28-
"swiper": "^10.0.3",
25+
"swiper": "^10.1.0",
2926
"uuid": "^9.0.0",
3027
"web-vitals": "^2.1.4"
3128
},
@@ -54,6 +51,9 @@
5451
]
5552
},
5653
"devDependencies": {
54+
"@testing-library/jest-dom": "^5.16.5",
55+
"@testing-library/react": "^13.4.0",
56+
"@testing-library/user-event": "^14.4.3",
5757
"tailwindcss": "^3.3.2"
5858
}
5959
}

‎04_REACT/ecommerce-app/public/index.html‎

Lines changed: 2 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -10,34 +10,11 @@
1010
content="Web site created using create-react-app"
1111
/>
1212
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13-
<link rel="preconnect" href="https://fonts.googleapis.com">
14-
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
15-
<link href="https://fonts.googleapis.com/css2?
16-
family=Outfit:wght@100;200;300;400;500;600;700;800;900&family=Poppins:wght@400;500;600;700&family=Rubik:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300&display=swap" rel="stylesheet">
1713
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18-
<!--
19-
Notice the use of %PUBLIC_URL% in the tags above.
20-
It will be replaced with the URL of the `public` folder during the build.
21-
Only files inside the `public` folder can be referenced from the HTML.
22-
23-
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
24-
work correctly both with client-side routing and a non-root public URL.
25-
Learn how to configure a non-root public URL by running `npm run build`.
26-
-->
27-
<title>E Commerce</title>
14+
<title>E-Commerce</title>
2815
</head>
2916
<body>
30-
<noscript>You need to enable JavaScript to run this app.</noscript>
17+
<noscript>Enable JavaScript to shop.</noscript>
3118
<div id="root"></div>
32-
<!--
33-
This HTML file is a template.
34-
If you open it directly in the browser, you will see an empty page.
35-
36-
You can add webfonts, meta tags, or analytics to this file.
37-
The build step will place the bundled scripts into the <body> tag.
38-
39-
To begin the development, run `npm start` or `yarn start`.
40-
To create a production bundle, use `npm run build` or `yarn build`.
41-
-->
4219
</body>
4320
</html>

‎04_REACT/ecommerce-app/public/manifest.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
2-
"short_name": "React App",
3-
"name": "Create React App Sample",
2+
"short_name": "E-Commerce",
3+
"name": "E-Commerce application to shop",
44
"icons": [
55
{
66
"src": "favicon.ico",

‎04_REACT/ecommerce-app/src/App.js‎

Lines changed: 34 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,53 @@
1-
import React from 'react'
2-
import{
1+
import React from 'react';
2+
import {
33
createBrowserRouter,
44
createRoutesFromElements,
55
Outlet,
66
Route,
77
RouterProvider,
88
ScrollRestoration,
9-
} from "react-router-dom"
10-
import Header from './components/Header/Header'
11-
import Footer from './components/Footer/Footer'
12-
import Home from './pages/Home'
13-
import { productsData } from './api/api'
14-
import Signin from './pages/Signin'
15-
import Registration from './pages/Registration'
16-
import Cart from './pages/Cart'
9+
} from 'react-router-dom';
1710

18-
const Layout =() =>{
19-
return(
20-
<div className='bg-gray-100'>
21-
<Header />
22-
<ScrollRestoration />
23-
<Outlet />
24-
<Footer />
25-
</div>
11+
// Components
12+
import Header from './components/Header/Header';
13+
import Footer from './components/Footer/Footer';
14+
15+
// Pages
16+
import Home from './pages/Home';
17+
import Signin from './pages/Signin';
18+
import Registration from './pages/Registration';
19+
import Cart from './pages/Cart';
20+
21+
// API
22+
import { productsData } from './api/api';
23+
24+
const RootLayout = () => {
25+
return (
26+
<React.Fragment className="bg-gray-100">
27+
<Header />
28+
<ScrollRestoration />
29+
<Outlet />
30+
<Footer />
31+
</React.Fragment>
2632
);
2733
};
2834

2935
const App = () => {
30-
const router = createBrowserRouter(createRoutesFromElements(
31-
<Route>
32-
<Route path="/" element={<Layout />}>
36+
const router = createBrowserRouter(
37+
createRoutesFromElements(
38+
<Route>
39+
<Route path="/" element={<RootLayout />}>
3340
<Route index element={<Home />} loader={productsData}></Route>
3441
<Route path="/cart" element={<Cart />}></Route>
3542
</Route>
3643
<Route path="/signin" element={<Signin />}></Route>
3744
<Route path="/registration" element={<Registration />}></Route>
3845
{/* <Route path="/checkout" element={<Checkout />}></Route> */}
3946
</Route>
40-
))
41-
return (
42-
<>
43-
<RouterProvider router={router}></RouterProvider>
44-
</>
45-
)
46-
}
47+
)
48+
);
49+
50+
return <RouterProvider router={router} />;
51+
};
4752

48-
export default App
53+
export default App;

‎04_REACT/ecommerce-app/src/api/api.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
1-
import axios from "axios"
1+
import axios from 'axios';
22

3-
export async function productsData(){
4-
const products = await axios.get("https://fakestoreapi.com/products");
5-
return products;
6-
}
3+
export async function productsData() {
4+
const products = await axios.get(process.env.REACT_APP_BACKEND_URL);
5+
return products;
6+
}

‎04_REACT/ecommerce-app/src/components/Footer/Footer.js‎

Lines changed: 13 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
1-
import React from 'react'
2-
import FooterTop from './FooterTop'
3-
import FooterMiddle from './FooterMiddle'
4-
import FooterBottom from './FooterBottom'
1+
import React from 'react';
2+
3+
import FooterTop from './FooterTop';
4+
import FooterMiddle from './FooterMiddle';
5+
import FooterBottom from './FooterBottom';
56

67
const Footer = () => {
78
return (
8-
<div className='font-titleFont'>
9-
<FooterTop/>
10-
<FooterMiddle/>
11-
<FooterBottom/>
12-
</div>
13-
)
14-
}
9+
<React.Fragment className="font-titleFont">
10+
<FooterTop />
11+
<FooterMiddle />
12+
<FooterBottom />
13+
</React.Fragment>
14+
);
15+
};
1516

16-
export default Footer
17+
export default Footer;

‎04_REACT/ecommerce-app/src/components/Footer/FooterBottom.js‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
1-
import React from 'react'
2-
31
const FooterBottom = () => {
42
return (
5-
<div className='w-full bg-footerBottom p-4'>
6-
<div className='flex gap-3 mdl:gap-6 justify-center items-center text-white
7-
font-bodyFont'>
8-
<p className='footerLink text-[10px] mdl:text-sm'>Conditions of Use</p>
9-
<p className='footerLink text-[10px] mdl:text-sm'>Privacy Notice </p>
10-
<p className='footerLink text-[10px] mdl:text-sm'>Your Ads Privacy Choices</p>
3+
<div className="w-full bg-footerBottom p-4">
4+
<div className="flex gap-3 mdl:gap-6 justify-center items-center text-white font-bodyFont">
5+
<p className="footerLink text-[10px] mdl:text-sm">Conditions of Use</p>
6+
<p className="footerLink text-[10px] mdl:text-sm">Privacy Notice </p>
7+
<p className="footerLink text-[10px] mdl:text-sm">
8+
Your Ads Privacy Choices
9+
</p>
1110
</div>
12-
<div className='flex justify-center text-white tracking-wide font-bodyFont
13-
mdl:text-sm'>
14-
<p className='footerLink text-[10px] mdl:text-sm'>&copy; 1999-2023, Amazon.com, Snehal.com</p>
11+
<div className="flex justify-center text-white tracking-wide font-bodyFont mdl:text-sm">
12+
<p className="footerLink text-[10px] mdl:text-sm">
13+
&copy; 1999-2023, Amazon.com, Snehal.com
14+
</p>
1515
</div>
1616
</div>
17-
)
18-
}
17+
);
18+
};
1919

20-
export default FooterBottom
20+
export default FooterBottom;

0 commit comments

Comments
 (0)