├── README.md ├── public ├── robots.txt ├── favicon.ico ├── logo192.png ├── logo512.png ├── images │ └── google.png ├── manifest.json └── index.html ├── src ├── images │ ├── hero.jpg │ ├── logo.png │ └── loading.gif ├── styles │ ├── Container.js │ └── Button.js ├── Helpers │ └── FormatPrice.js ├── setupTests.js ├── App.test.js ├── components │ ├── Spinner.js │ ├── CartAmountToggle.js │ ├── PageNavigation.js │ ├── GridView.js │ ├── Header.js │ ├── ProductList.js │ ├── FeatureProduct.js │ ├── Stars.js │ ├── CartItem.js │ ├── MyImage.js │ ├── Trusted.js │ ├── HeroSection.js │ ├── AddToCart.js │ ├── ListView.js │ ├── Services.js │ ├── Sort.js │ ├── Product.js │ ├── Footer.js │ ├── Nav.js │ └── FilterSection.js ├── index.css ├── reportWebVitals.js ├── About.js ├── Home.js ├── App.css ├── index.js ├── reducer │ ├── productReducer.js │ ├── cartReducer.js │ └── filterReducer.js ├── ErrorPage.js ├── context │ ├── cart_context.js │ ├── filter_context.js │ └── productcontext.js ├── Products.js ├── App.js ├── Contact.js ├── GlobalStyle.js ├── SingleProduct.js └── Cart.js ├── .gitignore └── package.json /README.md: -------------------------------------------------------------------------------- 1 | # ecommerce-react 2 | https://ecommerce-akash.netlify.app/ 3 | -------------------------------------------------------------------------------- /public/robots.txt: -------------------------------------------------------------------------------- 1 | # https://www.robotstxt.org/robotstxt.html 2 | User-agent: * 3 | Disallow: 4 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akashm-2003/ecommerce-react/HEAD/public/favicon.ico -------------------------------------------------------------------------------- /public/logo192.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akashm-2003/ecommerce-react/HEAD/public/logo192.png -------------------------------------------------------------------------------- /public/logo512.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akashm-2003/ecommerce-react/HEAD/public/logo512.png -------------------------------------------------------------------------------- /src/images/hero.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akashm-2003/ecommerce-react/HEAD/src/images/hero.jpg -------------------------------------------------------------------------------- /src/images/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akashm-2003/ecommerce-react/HEAD/src/images/logo.png -------------------------------------------------------------------------------- /src/images/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akashm-2003/ecommerce-react/HEAD/src/images/loading.gif -------------------------------------------------------------------------------- /public/images/google.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/akashm-2003/ecommerce-react/HEAD/public/images/google.png -------------------------------------------------------------------------------- /src/styles/Container.js: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | 3 | export const Container = styled.div` 4 | width: 100%; 5 | padding: 0rem 12rem; 6 | `; 7 | -------------------------------------------------------------------------------- /src/Helpers/FormatPrice.js: -------------------------------------------------------------------------------- 1 | 2 | const FormatPrice = ({price}) => { 3 | return Intl.NumberFormat('en-IN',{style:'currency', currency:'INR', maximumFractionDigits:2}).format(price/100) 4 | } 5 | 6 | export default FormatPrice -------------------------------------------------------------------------------- /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/components/Spinner.js: -------------------------------------------------------------------------------- 1 | 2 | import React from 'react' 3 | import spinner from '../images/loading.gif' 4 | const Spinner = () => { 5 | return ( 6 |
7 | loading 8 |
9 | ) 10 | } 11 | 12 | export default Spinner -------------------------------------------------------------------------------- /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 | -------------------------------------------------------------------------------- /.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 | .env 16 | .DS_Store 17 | .env.local 18 | .env.development.local 19 | .env.test.local 20 | .env.production.local 21 | 22 | npm-debug.log* 23 | yarn-debug.log* 24 | yarn-error.log* 25 | 26 | # Local Netlify folder 27 | .netlify 28 | -------------------------------------------------------------------------------- /src/About.js: -------------------------------------------------------------------------------- 1 | 2 | import React, { useContext } from 'react' 3 | import styled from 'styled-components' 4 | import HeroSection from './components/HeroSection' 5 | import {useProductContext} from './context/productcontext' 6 | const About = () => { 7 | const {myName}= useProductContext() 8 | const data={ 9 | title:'Akash Ecommerce' 10 | } 11 | return ( 12 | 13 | {myName} 14 | 15 | 16 | ) 17 | } 18 | const Wrapper = styled.div` 19 | 20 | `; 21 | export default About -------------------------------------------------------------------------------- /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/Home.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styled from 'styled-components' 3 | import HeroSection from './components/HeroSection'; 4 | import Trusted from './components/Trusted'; 5 | import Services from './components/Services'; 6 | import FeatureProduct from './components/FeatureProduct'; 7 | const Home = () => { 8 | const data={ 9 | title:'Akash Store' 10 | } 11 | return ( 12 | 13 | 14 | 15 | 16 | 17 | 18 | ) 19 | } 20 | const Wrapper = styled.div` 21 | 22 | `; 23 | export default Home -------------------------------------------------------------------------------- /src/components/CartAmountToggle.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { FaMinus, FaPlus } from 'react-icons/fa' 3 | const CartAmountToggle = ({amount,setDecrease,setIncrease}) => { 4 | return ( 5 |
6 |
7 |
8 | 9 |
{amount}
10 | 11 |
12 |
13 |
14 | ) 15 | } 16 | 17 | export default CartAmountToggle -------------------------------------------------------------------------------- /src/components/PageNavigation.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { NavLink } from 'react-router-dom'; 3 | import styled from 'styled-components'; 4 | const PageNavigation = ({title}) => { 5 | return ( 6 | 7 | Home/{title} 8 | 9 | 10 | ) 11 | } 12 | const Wrapper = styled.section` 13 | height:10rem, 14 | background-color: ${({ theme }) => theme.colors.bg}; 15 | display: flex; 16 | justify-content: flex-start; 17 | font-size: 3.2rem; 18 | padding-left: 1.2rem; 19 | padding-top: 1.2rem; 20 | NavLink{ 21 | font-size:3.2rem; 22 | } 23 | `; 24 | 25 | export default PageNavigation -------------------------------------------------------------------------------- /src/components/GridView.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Product from './Product' 3 | import styled from 'styled-components' 4 | const GridView = ({filtered_products}) => { 5 | return ( 6 |
7 |
8 | {filtered_products.map((product)=>{ 9 | return 10 | })} 11 |
12 | 13 |
14 | ) 15 | } 16 | 17 | const Wrapper = styled.section` 18 | 19 | background-color: ${({ theme }) => theme.colors.bg}; 20 | .grid{ 21 | gap:1rem; 22 | padding:2rem; 23 | } 24 | .container { 25 | max-width: 120rem; 26 | } 27 | 28 | 29 | ` 30 | export default GridView -------------------------------------------------------------------------------- /src/components/Header.js: -------------------------------------------------------------------------------- 1 | import styled from "styled-components"; 2 | import React from 'react' 3 | import { NavLink } from "react-router-dom"; 4 | import Nav from "./Nav"; 5 | import logo from '../images/logo.png' 6 | const Header = () => { 7 | return ( 8 | 9 | 10 | logo 11 | 12 |