├── .gitignore ├── README.md ├── package-lock.json ├── package.json ├── public ├── assets │ └── main.png.jpg ├── favicon.ico ├── index.html └── robots.txt └── src ├── components ├── Footer.jsx ├── Navbar.jsx ├── Products.jsx ├── index.js └── main.jsx ├── index.js ├── pages ├── AboutPage.jsx ├── Cart.jsx ├── Checkout.jsx ├── ContactPage.jsx ├── Home.jsx ├── Login.jsx ├── PageNotFound.jsx ├── Product.jsx ├── Products.jsx ├── Register.jsx └── index.js └── redux ├── action └── index.js ├── reducer ├── handleCart.js └── index.js └── store.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 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # E-Commerce Website 2 | 3 | A Ecommerce Website made with React.js Framework. 4 | 5 | 6 | ## Demo 7 | 8 | https://reactjs-ecommerce-app.vercel.app/ 9 | 10 | 11 | ## Features 12 | 13 | - Easy to integrate with Backend 14 | - Fully Responsive 15 | 16 | 17 | ## Run Locally 18 | 19 | Clone the project 20 | 21 | ```bash 22 | git clone https://github.com/ssahibsingh/React_E-Commerce 23 | ``` 24 | 25 | Go to the project directory 26 | 27 | ```bash 28 | cd React_E-Commerce 29 | ``` 30 | 31 | Install dependencies 32 | 33 | ```bash 34 | npm install 35 | ``` 36 | 37 | Start the server 38 | 39 | ```bash 40 | npm start 41 | ``` 42 | 43 | 44 | ## Screenshots 45 | 46 | ![App Screenshot](https://i.ibb.co/fQ293tm/image.png) 47 | 48 | 49 | ## Tech Stack 50 | 51 | * [React](https://reactjs.org/) 52 | * [Redux](https://redux.js.org/) 53 | * [Bootstrap](https://getbootstrap.com/) 54 | * [Fake Store API](https://fakestoreapi.com/) 55 | 56 | 57 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "ecommerce", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@reduxjs/toolkit": "^1.8.5", 7 | "@testing-library/jest-dom": "^5.16.5", 8 | "@testing-library/react": "^13.4.0", 9 | "@testing-library/user-event": "^13.5.0", 10 | "bootstrap": "^5.2.1", 11 | "font-awesome": "^4.7.0", 12 | "react": "^18.2.0", 13 | "react-dom": "^18.2.0", 14 | "react-fast-marquee": "^1.3.5", 15 | "react-loading-skeleton": "^3.1.0", 16 | "react-redux": "^8.0.2", 17 | "react-router-dom": "^6.4.0", 18 | "react-scripts": "5.0.1", 19 | "redux": "^4.2.0", 20 | "web-vitals": "^2.1.4" 21 | }, 22 | "scripts": { 23 | "start": "react-scripts start", 24 | "build": "react-scripts build", 25 | "test": "react-scripts test", 26 | "eject": "react-scripts eject" 27 | }, 28 | "eslintConfig": { 29 | "extends": [ 30 | "react-app", 31 | "react-app/jest" 32 | ] 33 | }, 34 | "browserslist": { 35 | "production": [ 36 | ">0.2%", 37 | "not dead", 38 | "not op_mini all" 39 | ], 40 | "development": [ 41 | "last 1 chrome version", 42 | "last 1 firefox version", 43 | "last 1 safari version" 44 | ] 45 | } 46 | } 47 | -------------------------------------------------------------------------------- /public/assets/main.png.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Crypto27dev/react_eCommerce/ab95f6a240528a2f0c94a2ba77e6bed37c3a7fa6/public/assets/main.png.jpg -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Crypto27dev/react_eCommerce/ab95f6a240528a2f0c94a2ba77e6bed37c3a7fa6/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | Ecommerce Website 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 32 | 33 | 34 | 35 | 37 | 40 | 41 | 42 | 43 | 44 |
45 | 46 | 47 | 50 | 53 | 56 | 57 | 58 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /src/components/Footer.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const Footer = () => { 4 | return ( 5 | <> 6 | 18 | 19 | ); 20 | }; 21 | 22 | export default Footer; 23 | -------------------------------------------------------------------------------- /src/components/Navbar.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { NavLink } from 'react-router-dom' 3 | import { useSelector } from 'react-redux' 4 | 5 | const Navbar = () => { 6 | const state = useSelector(state => state.handleCart) 7 | return ( 8 | 40 | ) 41 | } 42 | 43 | export default Navbar -------------------------------------------------------------------------------- /src/components/Products.jsx: -------------------------------------------------------------------------------- 1 | import React, { useState, useEffect } from "react"; 2 | import { useDispatch } from "react-redux"; 3 | import { addCart } from "../redux/action"; 4 | 5 | import Skeleton from "react-loading-skeleton"; 6 | import "react-loading-skeleton/dist/skeleton.css"; 7 | 8 | import { Link } from "react-router-dom"; 9 | 10 | const Products = () => { 11 | const [data, setData] = useState([]); 12 | const [filter, setFilter] = useState(data); 13 | const [loading, setLoading] = useState(false); 14 | let componentMounted = true; 15 | 16 | const dispatch = useDispatch(); 17 | 18 | const addProduct = (product) => { 19 | dispatch(addCart(product)) 20 | } 21 | 22 | useEffect(() => { 23 | const getProducts = async () => { 24 | setLoading(true); 25 | const response = await fetch("https://fakestoreapi.com/products/"); 26 | if (componentMounted) { 27 | setData(await response.clone().json()); 28 | setFilter(await response.json()); 29 | setLoading(false); 30 | } 31 | 32 | return () => { 33 | componentMounted = false; 34 | }; 35 | }; 36 | 37 | getProducts(); 38 | }, []); 39 | 40 | const Loading = () => { 41 | return ( 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 | const filterProduct = (cat) => { 69 | const updatedList = data.filter((item) => item.category === cat); 70 | setFilter(updatedList); 71 | } 72 | const ShowProducts = () => { 73 | return ( 74 | <> 75 |
76 | 77 | 78 | 81 | 82 | 83 |
84 | 85 | {filter.map((product) => { 86 | return ( 87 |
88 |
89 | Card 95 |
96 |
97 | {product.title.substring(0, 12)}... 98 |
99 |

100 | {product.description.substring(0, 90)}... 101 |

102 |
103 | 108 |
109 | 110 | Buy Now 111 | 112 | 115 |
116 |
117 |
118 | 119 | ); 120 | })} 121 | 122 | ); 123 | }; 124 | return ( 125 | <> 126 |
127 |
128 |
129 |

Latest Products

130 |
131 |
132 |
133 |
134 | {loading ? : } 135 |
136 |
137 | 138 | ); 139 | }; 140 | 141 | export default Products; 142 | -------------------------------------------------------------------------------- /src/components/index.js: -------------------------------------------------------------------------------- 1 | export { default as Navbar } from './Navbar'; 2 | export { default as Main } from './main'; 3 | export { default as Product } from './Products'; 4 | export { default as Footer } from './Footer'; -------------------------------------------------------------------------------- /src/components/main.jsx: -------------------------------------------------------------------------------- 1 | import React from "react"; 2 | 3 | const Home = () => { 4 | return ( 5 | <> 6 |
7 |
8 | Card 14 |
15 |
16 |
New Season Arrivals
17 |

18 | This is a wider card with supporting text below as a natural 19 | lead-in to additional content. This content is a little bit 20 | longer. 21 |

22 |
23 |
24 |
25 |
26 | 27 | ); 28 | }; 29 | 30 | export default Home; 31 | -------------------------------------------------------------------------------- /src/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom/client'; 3 | import '../node_modules/font-awesome/css/font-awesome.min.css'; 4 | import '../node_modules/bootstrap/dist/css/bootstrap.min.css'; 5 | import { BrowserRouter, Routes, Route } from 'react-router-dom'; 6 | import { Provider } from 'react-redux'; 7 | import store from './redux/store'; 8 | 9 | 10 | import { Home, Product, Products, AboutPage, ContactPage, Cart, Login, Register, Checkout, PageNotFound } from "./pages" 11 | 12 | const root = ReactDOM.createRoot(document.getElementById('root')); 13 | root.render( 14 | 15 | 16 | 17 | } /> 18 | } /> 19 | } /> 20 | } /> 21 | } /> 22 | } /> 23 | } /> 24 | } /> 25 | } /> 26 | } /> 27 | } /> 28 | 29 | 30 | 31 | ); -------------------------------------------------------------------------------- /src/pages/AboutPage.jsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Footer, Navbar } from "../components"; 3 | const AboutPage = () => { 4 | return ( 5 | <> 6 | 7 |
8 |

About Us

9 |
10 |

11 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Nostrum 12 | facere doloremque veritatis odit similique sequi. Odit amet fuga nam 13 | quam quasi facilis sed doloremque saepe sint perspiciatis explicabo 14 | totam vero quas provident ipsam, veritatis nostrum velit quos 15 | recusandae est mollitia esse fugit dolore laudantium. Ex vel explicabo 16 | earum unde eligendi autem praesentium, doloremque distinctio nesciunt 17 | porro tempore quis eaque labore voluptatibus ea necessitatibus 18 | exercitationem tempora molestias. Ad consequuntur veniam sequi ullam 19 | tempore vel tenetur soluta dolore sunt maxime aliquam corporis est, 20 | quo saepe dolorem optio minus sint nemo totam dolorum! Reprehenderit 21 | delectus expedita a alias nam recusandae illo debitis repellat libero, 22 | quasi explicabo molestiae saepe, dolorem tempore itaque eveniet quam 23 | dignissimos blanditiis excepturi harum numquam vel nihil? Ipsum 24 |

25 | 26 |

Our Products

27 |
28 |
29 |
30 | 31 |
32 |
Mens's Clothing
33 |
34 |
35 |
36 |
37 |
38 | 39 |
40 |
Women's Clothing
41 |
42 |
43 |
44 |
45 |
46 | 47 |
48 |
Jewelery
49 |
50 |
51 |
52 |
53 |
54 | 55 |
56 |
Electronics
57 |
58 |
59 |
60 |
61 |
62 |