├── public ├── _redirects ├── robots.txt ├── netlify.toml ├── favicon.ico ├── logo192.png ├── logo512.png ├── images │ ├── alexa.jpg │ ├── mouse.jpg │ ├── phone.jpg │ ├── airpods.jpg │ ├── camera.jpg │ └── playstation.jpg ├── manifest.json └── index.html ├── src ├── components │ ├── Stripe.module.css │ ├── Layout │ │ ├── Footer.js │ │ └── Header.js │ ├── OrderSuccess.js │ ├── StripeElement.js │ ├── Account.js │ ├── Products.js │ ├── Product.js │ ├── OrderHistory.js │ ├── EditProfile.js │ ├── Checkout.js │ ├── Cart.js │ ├── Signin.js │ ├── Order.js │ ├── Stripe.js │ └── Payment.js ├── store │ ├── index.js │ ├── OrderSlice.js │ ├── AuthSlice.js │ └── CartSlice.js ├── index.css ├── index.js └── App.js ├── netlify.toml ├── .env ├── .gitignore ├── package.json └── README.md /public/_redirects: -------------------------------------------------------------------------------- 1 | /* index.html 200 -------------------------------------------------------------------------------- /src/components/Stripe.module.css: -------------------------------------------------------------------------------- 1 | /* Variables */ 2 | 3 | 4 | -------------------------------------------------------------------------------- /netlify.toml: -------------------------------------------------------------------------------- 1 | [[redirects]] 2 | from = "/*" 3 | to = "/index.html" 4 | status = 200 -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/netlify.toml: -------------------------------------------------------------------------------- 1 | [[redirects]] 2 | from = "/*" 3 | to = "/index.html" 4 | status = 200 -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pulkit3234/Ecommerce-Store-Frontend/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pulkit3234/Ecommerce-Store-Frontend/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pulkit3234/Ecommerce-Store-Frontend/HEAD/public/logo512.png -------------------------------------------------------------------------------- /public/images/alexa.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pulkit3234/Ecommerce-Store-Frontend/HEAD/public/images/alexa.jpg -------------------------------------------------------------------------------- /public/images/mouse.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pulkit3234/Ecommerce-Store-Frontend/HEAD/public/images/mouse.jpg -------------------------------------------------------------------------------- /public/images/phone.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pulkit3234/Ecommerce-Store-Frontend/HEAD/public/images/phone.jpg -------------------------------------------------------------------------------- /public/images/airpods.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pulkit3234/Ecommerce-Store-Frontend/HEAD/public/images/airpods.jpg -------------------------------------------------------------------------------- /public/images/camera.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pulkit3234/Ecommerce-Store-Frontend/HEAD/public/images/camera.jpg -------------------------------------------------------------------------------- /.env: -------------------------------------------------------------------------------- 1 | REACT_APP_KEY = pk_test_51HABtrHi9evVBkpvXCh8oNUugE2YJrDnsfjYxNyvBltxWGKDPzIPfjPiEjNxVIKewmgBMfqpmnawlWCmqzClxPQ900nRz9V8uQ -------------------------------------------------------------------------------- /public/images/playstation.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Pulkit3234/Ecommerce-Store-Frontend/HEAD/public/images/playstation.jpg -------------------------------------------------------------------------------- /src/store/index.js: -------------------------------------------------------------------------------- 1 | import { configureStore } from '@reduxjs/toolkit'; 2 | import CartSlice from './CartSlice'; 3 | import authSlice from './AuthSlice'; 4 | import orderSlice from './OrderSlice'; 5 | 6 | const store = configureStore({ 7 | reducer: { cart: CartSlice.reducer, auth : authSlice.reducer, order : orderSlice.reducer }, 8 | }); 9 | 10 | export default store; 11 | -------------------------------------------------------------------------------- /.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 | -------------------------------------------------------------------------------- /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 'bootstrap/dist/css/bootstrap.min.css'; 5 | import App from './App'; 6 | import { BrowserRouter } from 'react-router-dom'; 7 | import { Provider } from 'react-redux'; 8 | import store from './store/index'; 9 | 10 | 11 | ReactDOM.render( 12 | 13 | 14 | 15 | 16 | , 17 | document.getElementById('root') 18 | ); 19 | 20 | 21 | -------------------------------------------------------------------------------- /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/components/Layout/Footer.js: -------------------------------------------------------------------------------- 1 | const Footer = () => { 2 | return ( 3 | <> 4 | 25 | 26 | ); 27 | }; 28 | 29 | export default Footer; 30 | -------------------------------------------------------------------------------- /src/components/OrderSuccess.js: -------------------------------------------------------------------------------- 1 | const OrderSuccess = () => { 2 | return ( 3 | <> 4 |
5 | 9 |
10 |

11 | Order has been Successfully placed! You will recieve your order shortly{' '} 12 | 13 |

14 |

15 | You can see your Order from the Order 16 | history in My Account! 17 |

18 | 19 | ); 20 | }; 21 | 22 | export default OrderSuccess; 23 | -------------------------------------------------------------------------------- /src/components/StripeElement.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { CardElement } from '@stripe/react-stripe-js'; 3 | import './CardSectionStyles.css'; 4 | 5 | const CARD_ELEMENT_OPTIONS = { 6 | style: { 7 | base: { 8 | color: '#32325d', 9 | fontFamily: '"Helvetica Neue", Helvetica, sans-serif', 10 | fontSmoothing: 'antialiased', 11 | fontSize: '16px', 12 | '::placeholder': { 13 | color: '#aab7c4', 14 | }, 15 | 16 | 17 | }, 18 | invalid: { 19 | color: '#fa755a', 20 | iconColor: '#fa755a', 21 | }, 22 | }, 23 | }; 24 | 25 | function CardSection() { 26 | return ( 27 | 32 | ); 33 | } 34 | 35 | export default CardSection; 36 | -------------------------------------------------------------------------------- /src/store/OrderSlice.js: -------------------------------------------------------------------------------- 1 | import { createSlice } from '@reduxjs/toolkit'; 2 | 3 | const orderSlice = createSlice({ 4 | name: 'order', 5 | initialState: { 6 | pastOrders: [], 7 | currentOrder: JSON.parse(localStorage.getItem('order')) || {}, 8 | paymentMethod: JSON.parse(localStorage.getItem('order'))?.paymentMethod || '', 9 | address: JSON.parse(localStorage.getItem('order'))?.shippingAddress || {}, 10 | }, 11 | reducers: { 12 | currentOrderHandler(state, action) { 13 | console.log(action.payload); 14 | localStorage.setItem('order', JSON.stringify(action.payload.order)); 15 | state.currentOrder = action.payload.order; 16 | }, 17 | pastOrdersHandler(state, action) {}, 18 | orderSuccess(state, action) {}, 19 | orderFailed(state, action) {}, 20 | }, 21 | }); 22 | 23 | /*export const order = () => { 24 | return (dispatch) => { 25 | 26 | 27 | }; 28 | } */ 29 | 30 | export const orderActions = orderSlice.actions; 31 | export default orderSlice; 32 | -------------------------------------------------------------------------------- /src/store/AuthSlice.js: -------------------------------------------------------------------------------- 1 | import { createSlice } from '@reduxjs/toolkit'; 2 | 3 | const authSlice = createSlice({ 4 | name: 'auth', 5 | initialState: { 6 | isAuth: JSON.parse(localStorage.getItem('authState'))?.isAuth 7 | ? JSON.parse(localStorage.getItem('authState')).isAuth 8 | : false, 9 | token: JSON.parse(localStorage.getItem('authState'))?.token 10 | ? JSON.parse(localStorage.getItem('authState')).token 11 | : '', 12 | name: JSON.parse(localStorage.getItem('authState'))?.name 13 | ? JSON.parse(localStorage.getItem('authState')).name 14 | : '', 15 | email: JSON.parse(localStorage.getItem('authState'))?.email 16 | ? JSON.parse(localStorage.getItem('authState')).email 17 | : '', 18 | }, 19 | reducers: { 20 | signin(state, action) { 21 | 22 | localStorage.setItem('authState', JSON.stringify(action.payload)); // authState object has token and isAuth property. 23 | state.isAuth = true; 24 | }, 25 | signout(state, action) { 26 | //localStorage.removeItem('token'); 27 | localStorage.clear(); 28 | state.isAuth = false; 29 | }, 30 | }, 31 | }); 32 | 33 | export const authActions = authSlice.actions; 34 | export default authSlice; 35 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "client", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "@reduxjs/toolkit": "^1.5.1", 7 | "@stripe/react-stripe-js": "^1.4.0", 8 | "@stripe/stripe-js": "^1.14.0", 9 | "@testing-library/jest-dom": "^5.11.4", 10 | "@testing-library/react": "^11.1.0", 11 | "@testing-library/user-event": "^12.1.10", 12 | "axios": "^0.21.1", 13 | "bootstrap": "^4.6.0", 14 | "react": "^17.0.2", 15 | "react-bootstrap": "^1.5.2", 16 | "react-dom": "^17.0.2", 17 | "react-redux": "^7.2.4", 18 | "react-router-dom": "^5.2.0", 19 | "react-scripts": "4.0.3", 20 | "react-stripe-checkout": "^2.6.3", 21 | "styled-components": "^5.3.0", 22 | "web-vitals": "^1.0.1" 23 | }, 24 | "scripts": { 25 | "start": "react-scripts start", 26 | "build": "react-scripts build", 27 | "test": "react-scripts test", 28 | "eject": "react-scripts eject" 29 | }, 30 | "eslintConfig": { 31 | "extends": [ 32 | "react-app", 33 | "react-app/jest" 34 | ] 35 | }, 36 | "browserslist": { 37 | "production": [ 38 | ">0.2%", 39 | "not dead", 40 | "not op_mini all" 41 | ], 42 | "development": [ 43 | "last 1 chrome version", 44 | "last 1 firefox version", 45 | "last 1 safari version" 46 | ] 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import Header from './components/Layout/Header'; 2 | import React from 'react'; 3 | import Products from './components/Products'; 4 | import { Switch, Route } from 'react-router-dom'; 5 | import Product from './components/Product'; 6 | import Cart from './components/Cart'; 7 | import Checkout from './components/Checkout'; 8 | import Signin from './components/Signin'; 9 | import Account from './components/Account'; 10 | import Footer from './components/Layout/Footer'; 11 | import Order from './components/Order' 12 | import Payment from './components/Payment'; 13 | import OrderSuccess from './components/OrderSuccess'; 14 | import OrderHistory from './components/OrderHistory'; 15 | import EditProfile from './components/EditProfile'; 16 | 17 | function App() { 18 | return ( 19 | <> 20 |
21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 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 |