├── .firebase └── hosting.YnVpbGQ.cache ├── .firebaserc ├── .gitignore ├── README.md ├── firebase.json ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── img │ ├── coat-female.png │ ├── coat-male.png │ ├── hat-female.png │ ├── hat-male.png │ ├── jacket-female.png │ ├── jacket-male.png │ ├── shirt-female.png │ ├── shirt-male.png │ ├── shoes-female.png │ ├── shoes-male.png │ ├── suit-female.png │ ├── suit-male.png │ ├── t-shirt-female.png │ └── t-shirt-male.png ├── index.html └── manifest.json └── src ├── App.js ├── assets ├── home_page │ ├── Sale.jpg │ ├── slide_1.jpg │ ├── slide_2.jpg │ ├── slide_3.jpg │ ├── slide_4.jpg │ └── slide_5.jpg ├── icons │ ├── arrow_bottom.png │ ├── arrow_left.png │ ├── arrow_right.png │ ├── bars_white.png │ ├── bin_white.png │ ├── cart_white.png │ ├── heart_white.png │ ├── logo.png │ ├── logout.png │ ├── orders.png │ ├── search_white.png │ └── user.png └── social_media │ ├── fb.png │ ├── g_plus.png │ ├── instagram.png │ ├── pinterest.png │ └── twitter.png ├── axios.js ├── components ├── Navigation │ ├── Navigation.scss │ ├── NavigationItems │ │ ├── NavigationItem.js │ │ ├── NavigationItems.js │ │ ├── NavigationItemsIcons.js │ │ └── SideNavigation.js │ ├── SideDrawer.js │ └── Toolbar.js └── UI │ ├── Backdrop │ ├── Backdrop.js │ └── Backdrop.scss │ ├── Button │ ├── Button.js │ └── Button.scss │ ├── FakeForm │ ├── FakeForm.js │ └── FakeForm.scss │ ├── Footer │ ├── Footer.js │ └── Footer.scss │ ├── Input │ ├── Input.js │ └── Input.scss │ ├── Modal │ ├── Modal.js │ └── Modal.scss │ ├── SocialMedia │ ├── SocialMedia.js │ └── SocialMedia.scss │ └── Spinner │ ├── Spinner.js │ └── Spinner.scss ├── containers ├── Auth │ ├── Auth.js │ ├── Auth.scss │ └── Logout │ │ └── Logout.js ├── Cart │ ├── Cart.js │ ├── Cart.scss │ ├── ContactForm │ │ ├── ContactForm.js │ │ └── ContactForm.scss │ └── OrderSummary │ │ ├── OrderSummary.js │ │ └── OrderSummary.scss ├── Contact │ ├── Contact.js │ └── Contact.scss ├── Details │ ├── DetailItem │ │ ├── DetailItem.js │ │ └── DetailItem.scss │ ├── Details.js │ └── Details.scss ├── HomePage │ ├── HomePage.js │ └── HomePage.scss ├── Orders │ ├── Order │ │ ├── Order.js │ │ └── Order.scss │ ├── Orders.js │ └── Orders.scss ├── ProductList │ ├── Product │ │ ├── Product.js │ │ └── Product.scss │ ├── ProductList.js │ └── ProductList.scss └── Wishlist │ ├── Wishlist.js │ ├── Wishlist.scss │ └── WishlistItem │ ├── WishlistItem.js │ └── WishlistItem.scss ├── data └── data.js ├── hoc ├── ErrorHandler.js └── asyncComponent.js ├── index.js ├── index.scss ├── layout ├── Layout.js └── Layout.scss ├── serviceWorker.js ├── shared ├── ScrollToTopOnMount.js └── Validity.js └── store ├── actions ├── actionTypes.js ├── authActions.js ├── index.js ├── interfaceActions.js ├── orderActions.js └── productActions.js └── reducers ├── authReducer.js ├── interfaceReducer.js ├── orderReducer.js └── productReducer.js /.firebase/hosting.YnVpbGQ.cache: -------------------------------------------------------------------------------- 1 | asset-manifest.json,1551108721750,16aa1e13138bc79122ffbb4b263704f8329fbcd4bcc7a47dd0fba55f9561f3b4 2 | favicon.ico,499162500000,eae62e993eb980ec8a25058c39d5a51feab118bd2100c4deebb2a9c158ec11f9 3 | manifest.json,499162500000,a40a4294484385ec155814f7d72caf5967a19f5efcbedf7a62b2cdff07e42711 4 | precache-manifest.0da69a23e8cd190871edf83250bd209a.js,1551108721749,cdfc3bbba11871d8198cdaa3fc8ab90c55aa751fe8cf076809d96f13e65d9dfd 5 | service-worker.js,1551108721749,7890061e54e22099bd4363f6de00b24febf3cedf5b32aae87e7a5cb8f93e0920 6 | index.html,1551108721749,7f80566dd20c664f530fa4d4e607375a2d0c9906b0f186f126e0276fcb9a20b3 7 | static/css/1.e374356c.chunk.css,1551108721772,7e479b7ff6e6ecdeac26f5ed055fc3cdea080c2519a0ec23c2c7a58978a48d96 8 | static/css/2.26008848.chunk.css,1551108721773,b654fe8fa6669f50d5aecc9987f890a52e54291d79fe0112fe64bee76e1940f1 9 | static/js/1.f3812235.chunk.js,1551108721772,2b0359198714197ef82a7b460931ee213bcf204c81690d6264fe0d833a81aa1c 10 | static/js/1.f3812235.chunk.js.map,1551108721774,49292a3f33e963080bb00788ae241bca141f14604786d7d92d92f732f12c4843 11 | static/css/main.2d3c0314.chunk.css,1551108721770,16a51383adfee853ab4cb753596265c476fbb4d2b38b4ae16e89cc5e37a8ddf5 12 | static/js/2.148dfadc.chunk.js,1551108721773,10171ba78b2ebe48b86e75684955cfc40f2ec1e386735e20d575cd01dfaaa00e 13 | static/js/2.148dfadc.chunk.js.map,1551108721774,1560832c321374ccb4e72151b26b92b578966c00919b59868de9691b4d2f19c3 14 | static/js/runtime~main.6d0d6f64.js,1551108721773,db7702fdad1c1c1a837dd2ede4064d41a7ac8fb4022524ed518fe6979b08c2cc 15 | static/js/runtime~main.6d0d6f64.js.map,1551108721774,1c68dc23eb06c640be164e5e53d4eccee62f76dc79cd0bb2cdaf3f195621cf2b 16 | static/media/cart_white.f2200d0c.png,1551108721771,155817d1e746621ef37b422a589deae1b2230ddbc45a16381641d1df90ea331c 17 | static/media/fb.92a6cf67.png,1551108721771,6c5f6b9df5c5acb5430901c895ed9271c7d8842655742010d18b963a1ee11efc 18 | static/media/heart_white.1bf6b78f.png,1551108721770,b456a648aa5cf4cde471165ebd2b493ff00a5ac03027bb92846ac7d552f1b7a3 19 | static/css/1.e374356c.chunk.css.map,1551108721773,8822b9c2479d75c7b264fbb7b083612396e5dc169bdd5e22c13f44348cc098aa 20 | static/css/2.26008848.chunk.css.map,1551108721773,9cde2c169c1c9da7d62c80b9c6059e2b6ed428ea5b7b1cc1ea7244bf0590a750 21 | static/css/main.2d3c0314.chunk.css.map,1551108721773,6fa5e3e3704f8de86ec48c0aeb790fc7fc3e05a6b2f27fe585b837503fbde6aa 22 | static/media/instagram.5be6ee4b.png,1551108721771,f9c31921854460bac1527c6700c26e35b102f02ff10d9f03d0f23358c2e41a50 23 | static/media/logo.79032ba6.png,1551108721758,80532c01ef19f9f7ca61240348bf002c8709d902b8c0da50ee757477f1cb247d 24 | static/media/pinterest.289716e2.png,1551108721771,945dde75182c573b341e60ce37531626ff3353cd9b9f3a92ba8a0f5483593d4b 25 | static/media/slide_3.65829597.jpg,1551108721772,74c76f7d68410f170532d3ad39858a8187ffb4f44f534bc100566dd6f6fb3011 26 | static/media/twitter.0deebf85.png,1551108721771,ead393e524c8fa3ea444efb55406fab2d2a332a86b2d1c16766d5d26e9884259 27 | static/media/slide_2.1305c6c1.jpg,1551108721772,7ce82bba75d5ae1cabb12d9c819af243f42493653650566c8d1dd91322124ca7 28 | static/media/slide_4.f6cc9c72.jpg,1551108721772,43ecd91f105c8e1615f0a4844f52446b38d2c12219b447d70e9c3c592997cefc 29 | static/media/slide_5.8d843ce7.jpg,1551108721773,75de31e111b1e55ddaa266507c63f420fad97d0bb287ffc555bbed3bd2afb854 30 | static/media/Sale.7952b961.jpg,1551108721773,15e42313dae57321003ce717ca5a1860d1909575758543e7eb1252d6a51deeec 31 | static/js/main.33cd07b8.chunk.js,1551108721770,92a3898febfc1c26cfc0f4fe5380e5527c26553641ef1184950811dbac83476f 32 | static/js/3.9c276360.chunk.js,1551108721773,6461d048556ef3199207eab1156917d06fc3b1861200d19972902d083d9387e3 33 | static/media/slide_1.204de98f.jpg,1551108721772,576369abf0ee586dbbc33aa36474607abd2081bf645ae692ac06113d6663f157 34 | static/js/main.33cd07b8.chunk.js.map,1551108721774,926d274f85784b029a6f45ee718d078eb97b34837ebc35e88d6cd97e98869190 35 | img/shirt-female.png,1547079989920,5f380b15160c1413b421991368981733c7c0ed394e1f8e1fe5dc05896d6db74e 36 | static/js/3.9c276360.chunk.js.map,1551108721774,bce55a7e626bb49e84ab8970a29b221b074426109d2a37429d57e3243705866c 37 | img/coat-female.png,1547079796133,eb6370f45c8694e1256882557510fd8702c60c74b7eaed444ab504c393b6ea84 38 | img/suit-male.png,1547080081670,7c8978dead8bd3daba1b19bf86bdebe713b4d6a505f23e186d6b509b5c1583bb 39 | img/t-shirt-male.png,1547080128745,3ffe7b7b768b77140c3b2dbc33a04c3a4f6b44dfacff2e2a177d6efe1d887ce3 40 | img/hat-female.png,1547079911630,9ad4112bfc66cd944f0de58c28f873edf5b701b52422c64bdf80d4037d46794a 41 | img/shirt-male.png,1547080006702,0f57ca02af55cc1d72d980e0e5e291820103c377413fe3c3cfb6c5c41026cdf3 42 | img/hat-male.png,1547079939450,677de89a0432e9e71a6c6d1d3f7405eeb240cbc015de0744c9fd4de7f8b88283 43 | img/shoes-male.png,1547080046360,9a9fbf6c88389f721410bc5b86851943df3da4d39172cec5815d8f774b8ca4a5 44 | img/t-shirt-female.png,1547080110411,096c3d917490d040937f5d97dd9a8dec442f8f5deb96d4b7aa2cb716a4c5210f 45 | img/jacket-male.png,1547079975075,8bb57d7307bff16e64c42fb2a684d48ba60a7ff5ad6da6719d7087fb4f60a977 46 | img/jacket-female.png,1547079957125,6b0c19cbe8e3309d15b52b3af7beac3199a72dd3ec365196ce02fcae0c2fdbca 47 | img/suit-female.png,1547080063475,61529557f63de732090d765ebf14583d31738af938c992c6e75d77dc36754f48 48 | img/shoes-female.png,1547080027164,ba742b8636517d5d46f09c6a23a4a1b77f0d2f6fffd1350bbf829080de8c4d9b 49 | img/coat-male.png,1547079878709,a1b875988cea440c2a3bcfd18b3d8c134688fc0cfed742cfad0584258c4386b7 50 | -------------------------------------------------------------------------------- /.firebaserc: -------------------------------------------------------------------------------- 1 | { 2 | "projects": { 3 | "default": "react-elegant-store" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /.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 | ## Overview 2 | Full stack project with authentication and database fired on firebase. The user can browse product lists using the filtering and product preview tools, choose the size and add selected products to the cart and wishlist. Next, after sign in/log in he can send an order and view all orders on the list of orders. 3 | 4 | ![elegant-store](https://user-images.githubusercontent.com/42715741/52538440-eb607680-2d72-11e9-8518-0564dea5aaed.png) 5 | 6 | ## Used technologies 7 | 8 | - React & Redux on frontend. 9 | - Firebase on backend (storing data and authentication). 10 | - Adobe XD and Illustrator - design. 11 | 12 | ## Preview 13 | 14 | You can see this app in action. 15 | https://react-elegant-store.firebaseapp.com/ 16 | 17 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app). 18 | -------------------------------------------------------------------------------- /firebase.json: -------------------------------------------------------------------------------- 1 | { 2 | "hosting": { 3 | "public": "build", 4 | "ignore": [ 5 | "firebase.json", 6 | "**/.*", 7 | "**/node_modules/**" 8 | ], 9 | "rewrites": [ 10 | { 11 | "source": "**", 12 | "destination": "/index.html" 13 | } 14 | ] 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "elegant-store", 3 | "version": "0.1.0", 4 | "private": true, 5 | "dependencies": { 6 | "axios": "^0.18.0", 7 | "enzyme": "^3.8.0", 8 | "enzyme-adapter-react-16": "^1.8.0", 9 | "node-sass": "^4.11.0", 10 | "prop-types": "^15.6.2", 11 | "react": "^16.7.0", 12 | "react-dom": "^16.7.0", 13 | "react-redux": "^6.0.0", 14 | "react-router-dom": "^4.3.1", 15 | "react-scripts": "2.1.3", 16 | "react-test-renderer": "^16.7.0", 17 | "react-transition-group": "^2.5.3", 18 | "redux": "^4.0.1", 19 | "redux-thunk": "^2.3.0" 20 | }, 21 | "scripts": { 22 | "start": "react-scripts start", 23 | "build": "react-scripts build", 24 | "test": "react-scripts test", 25 | "eject": "react-scripts eject" 26 | }, 27 | "eslintConfig": { 28 | "extends": "react-app" 29 | }, 30 | "browserslist": [ 31 | ">0.2%", 32 | "not dead", 33 | "not ie <= 11", 34 | "not op_mini all" 35 | ] 36 | } 37 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bartstc/react-simple-online-shop-concept/5eb02fcc416c3164730be000b80ce0288220cb9c/public/favicon.ico -------------------------------------------------------------------------------- /public/img/coat-female.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bartstc/react-simple-online-shop-concept/5eb02fcc416c3164730be000b80ce0288220cb9c/public/img/coat-female.png -------------------------------------------------------------------------------- /public/img/coat-male.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bartstc/react-simple-online-shop-concept/5eb02fcc416c3164730be000b80ce0288220cb9c/public/img/coat-male.png -------------------------------------------------------------------------------- /public/img/hat-female.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bartstc/react-simple-online-shop-concept/5eb02fcc416c3164730be000b80ce0288220cb9c/public/img/hat-female.png -------------------------------------------------------------------------------- /public/img/hat-male.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bartstc/react-simple-online-shop-concept/5eb02fcc416c3164730be000b80ce0288220cb9c/public/img/hat-male.png -------------------------------------------------------------------------------- /public/img/jacket-female.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bartstc/react-simple-online-shop-concept/5eb02fcc416c3164730be000b80ce0288220cb9c/public/img/jacket-female.png -------------------------------------------------------------------------------- /public/img/jacket-male.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bartstc/react-simple-online-shop-concept/5eb02fcc416c3164730be000b80ce0288220cb9c/public/img/jacket-male.png -------------------------------------------------------------------------------- /public/img/shirt-female.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bartstc/react-simple-online-shop-concept/5eb02fcc416c3164730be000b80ce0288220cb9c/public/img/shirt-female.png -------------------------------------------------------------------------------- /public/img/shirt-male.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bartstc/react-simple-online-shop-concept/5eb02fcc416c3164730be000b80ce0288220cb9c/public/img/shirt-male.png -------------------------------------------------------------------------------- /public/img/shoes-female.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bartstc/react-simple-online-shop-concept/5eb02fcc416c3164730be000b80ce0288220cb9c/public/img/shoes-female.png -------------------------------------------------------------------------------- /public/img/shoes-male.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bartstc/react-simple-online-shop-concept/5eb02fcc416c3164730be000b80ce0288220cb9c/public/img/shoes-male.png -------------------------------------------------------------------------------- /public/img/suit-female.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bartstc/react-simple-online-shop-concept/5eb02fcc416c3164730be000b80ce0288220cb9c/public/img/suit-female.png -------------------------------------------------------------------------------- /public/img/suit-male.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bartstc/react-simple-online-shop-concept/5eb02fcc416c3164730be000b80ce0288220cb9c/public/img/suit-male.png -------------------------------------------------------------------------------- /public/img/t-shirt-female.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bartstc/react-simple-online-shop-concept/5eb02fcc416c3164730be000b80ce0288220cb9c/public/img/t-shirt-female.png -------------------------------------------------------------------------------- /public/img/t-shirt-male.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bartstc/react-simple-online-shop-concept/5eb02fcc416c3164730be000b80ce0288220cb9c/public/img/t-shirt-male.png -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | Elegant Store 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | -------------------------------------------------------------------------------- /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 | "start_url": ".", 12 | "display": "standalone", 13 | "theme_color": "#000000", 14 | "background_color": "#ffffff" 15 | } 16 | -------------------------------------------------------------------------------- /src/App.js: -------------------------------------------------------------------------------- 1 | import React, { Component, Fragment } from 'react'; 2 | import { Switch, Route, Redirect, withRouter } from 'react-router-dom'; 3 | import { connect } from 'react-redux'; 4 | import * as actions from './store/actions'; 5 | import asyncComponent from './hoc/asyncComponent'; 6 | 7 | // COMPONENTS 8 | import Layout from './layout/Layout'; 9 | import Cart from './containers/Cart/Cart'; 10 | import Contact from './containers/Contact/Contact'; 11 | import Details from './containers/Details/Details'; 12 | import ProductList from './containers/ProductList/ProductList'; 13 | import Wishlist from './containers/Wishlist/Wishlist'; 14 | import HomePage from './containers/HomePage/HomePage'; 15 | import Logout from './containers/Auth/Logout/Logout'; 16 | 17 | const asyncOrders = asyncComponent(() => { 18 | return import('./containers/Orders/Orders'); 19 | }); 20 | 21 | const asyncAuth = asyncComponent(() => { 22 | return import('./containers/Auth/Auth'); 23 | }); 24 | 25 | class App extends Component { 26 | componentDidMount() { 27 | this.props.onTryAutoSignup(); 28 | }; 29 | 30 | render() { 31 | const { isAuth } = this.props; 32 | 33 | return ( 34 | 35 | 36 | 37 | {!isAuth && } 38 | {isAuth && } 39 | {isAuth && } 40 | 41 | 42 | 43 | 44 | 45 | 46 | 47 | 48 | 49 | 50 | ); 51 | } 52 | }; 53 | 54 | const mapStateToProps = state => { 55 | return { 56 | isAuth: state.auth.token !== null 57 | }; 58 | }; 59 | 60 | const mapDispatchToProps = dispatch => { 61 | return { 62 | onTryAutoSignup: () => dispatch(actions.authCheckState()) 63 | }; 64 | }; 65 | 66 | export default withRouter(connect(mapStateToProps, mapDispatchToProps)(App)); 67 | -------------------------------------------------------------------------------- /src/assets/home_page/Sale.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bartstc/react-simple-online-shop-concept/5eb02fcc416c3164730be000b80ce0288220cb9c/src/assets/home_page/Sale.jpg -------------------------------------------------------------------------------- /src/assets/home_page/slide_1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bartstc/react-simple-online-shop-concept/5eb02fcc416c3164730be000b80ce0288220cb9c/src/assets/home_page/slide_1.jpg -------------------------------------------------------------------------------- /src/assets/home_page/slide_2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bartstc/react-simple-online-shop-concept/5eb02fcc416c3164730be000b80ce0288220cb9c/src/assets/home_page/slide_2.jpg -------------------------------------------------------------------------------- /src/assets/home_page/slide_3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bartstc/react-simple-online-shop-concept/5eb02fcc416c3164730be000b80ce0288220cb9c/src/assets/home_page/slide_3.jpg -------------------------------------------------------------------------------- /src/assets/home_page/slide_4.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bartstc/react-simple-online-shop-concept/5eb02fcc416c3164730be000b80ce0288220cb9c/src/assets/home_page/slide_4.jpg -------------------------------------------------------------------------------- /src/assets/home_page/slide_5.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bartstc/react-simple-online-shop-concept/5eb02fcc416c3164730be000b80ce0288220cb9c/src/assets/home_page/slide_5.jpg -------------------------------------------------------------------------------- /src/assets/icons/arrow_bottom.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bartstc/react-simple-online-shop-concept/5eb02fcc416c3164730be000b80ce0288220cb9c/src/assets/icons/arrow_bottom.png -------------------------------------------------------------------------------- /src/assets/icons/arrow_left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bartstc/react-simple-online-shop-concept/5eb02fcc416c3164730be000b80ce0288220cb9c/src/assets/icons/arrow_left.png -------------------------------------------------------------------------------- /src/assets/icons/arrow_right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bartstc/react-simple-online-shop-concept/5eb02fcc416c3164730be000b80ce0288220cb9c/src/assets/icons/arrow_right.png -------------------------------------------------------------------------------- /src/assets/icons/bars_white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bartstc/react-simple-online-shop-concept/5eb02fcc416c3164730be000b80ce0288220cb9c/src/assets/icons/bars_white.png -------------------------------------------------------------------------------- /src/assets/icons/bin_white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bartstc/react-simple-online-shop-concept/5eb02fcc416c3164730be000b80ce0288220cb9c/src/assets/icons/bin_white.png -------------------------------------------------------------------------------- /src/assets/icons/cart_white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bartstc/react-simple-online-shop-concept/5eb02fcc416c3164730be000b80ce0288220cb9c/src/assets/icons/cart_white.png -------------------------------------------------------------------------------- /src/assets/icons/heart_white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bartstc/react-simple-online-shop-concept/5eb02fcc416c3164730be000b80ce0288220cb9c/src/assets/icons/heart_white.png -------------------------------------------------------------------------------- /src/assets/icons/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bartstc/react-simple-online-shop-concept/5eb02fcc416c3164730be000b80ce0288220cb9c/src/assets/icons/logo.png -------------------------------------------------------------------------------- /src/assets/icons/logout.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bartstc/react-simple-online-shop-concept/5eb02fcc416c3164730be000b80ce0288220cb9c/src/assets/icons/logout.png -------------------------------------------------------------------------------- /src/assets/icons/orders.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bartstc/react-simple-online-shop-concept/5eb02fcc416c3164730be000b80ce0288220cb9c/src/assets/icons/orders.png -------------------------------------------------------------------------------- /src/assets/icons/search_white.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bartstc/react-simple-online-shop-concept/5eb02fcc416c3164730be000b80ce0288220cb9c/src/assets/icons/search_white.png -------------------------------------------------------------------------------- /src/assets/icons/user.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bartstc/react-simple-online-shop-concept/5eb02fcc416c3164730be000b80ce0288220cb9c/src/assets/icons/user.png -------------------------------------------------------------------------------- /src/assets/social_media/fb.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bartstc/react-simple-online-shop-concept/5eb02fcc416c3164730be000b80ce0288220cb9c/src/assets/social_media/fb.png -------------------------------------------------------------------------------- /src/assets/social_media/g_plus.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bartstc/react-simple-online-shop-concept/5eb02fcc416c3164730be000b80ce0288220cb9c/src/assets/social_media/g_plus.png -------------------------------------------------------------------------------- /src/assets/social_media/instagram.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bartstc/react-simple-online-shop-concept/5eb02fcc416c3164730be000b80ce0288220cb9c/src/assets/social_media/instagram.png -------------------------------------------------------------------------------- /src/assets/social_media/pinterest.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bartstc/react-simple-online-shop-concept/5eb02fcc416c3164730be000b80ce0288220cb9c/src/assets/social_media/pinterest.png -------------------------------------------------------------------------------- /src/assets/social_media/twitter.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/bartstc/react-simple-online-shop-concept/5eb02fcc416c3164730be000b80ce0288220cb9c/src/assets/social_media/twitter.png -------------------------------------------------------------------------------- /src/axios.js: -------------------------------------------------------------------------------- 1 | import axios from 'axios'; 2 | 3 | const instance = axios.create({ 4 | baseURL: 'https://react-elegant-store.firebaseio.com/' 5 | }); 6 | 7 | export default instance; -------------------------------------------------------------------------------- /src/components/Navigation/Navigation.scss: -------------------------------------------------------------------------------- 1 | @import '../../index.scss'; 2 | 3 | .header { 4 | position: fixed; 5 | z-index: 10; 6 | background-color: #000; 7 | width: 100%; 8 | height: 42px; 9 | display: flex; 10 | align-items: center; 11 | justify-content: space-between; 12 | padding: 5px 15px; 13 | 14 | .left-wrapper { 15 | display: flex; 16 | align-items: center; 17 | } 18 | } 19 | 20 | .toggle-side-drawer { 21 | background: transparent; 22 | border: none; 23 | cursor: pointer; 24 | display: flex; 25 | align-items: center; 26 | 27 | @include mediaMd { 28 | display: none; 29 | } 30 | 31 | img { 32 | width: 36px; 33 | } 34 | } 35 | 36 | .logo { 37 | width: 110px; 38 | display: none; 39 | 40 | @include mediaMd { 41 | display: block; 42 | } 43 | } 44 | 45 | .navigation { 46 | display: none; 47 | 48 | @include mediaMd { 49 | display: block; 50 | } 51 | 52 | .nav-list { 53 | display: flex; 54 | padding-left: 10px; 55 | color: #fff; 56 | 57 | .nav-link { 58 | color: #fff; 59 | margin: 0 14px; 60 | cursor: pointer; 61 | border-bottom: 1px solid transparent; 62 | transition: all .2s ease-in-out; 63 | 64 | &:hover { 65 | border-bottom: 1px solid #fff; 66 | } 67 | } 68 | } 69 | } 70 | 71 | .navigation-icons { 72 | &-list { 73 | display: flex; 74 | position: relative; 75 | 76 | .nav-link { 77 | color: #fff; 78 | cursor: pointer; 79 | 80 | .icon { 81 | width: 34px; 82 | } 83 | } 84 | 85 | .products-amount { 86 | position: absolute; 87 | z-index: -1; 88 | color: #fff; 89 | font-size: .6em; 90 | top: 62%; 91 | left: 83%; 92 | transform: translate(-50%, -50%); 93 | } 94 | } 95 | } 96 | 97 | // === SIDE DRAWER === 98 | .side-drawer { 99 | position: fixed; 100 | display: flex; 101 | flex-direction: column; 102 | align-items: flex-start; 103 | z-index: 30; 104 | height: 100%; 105 | width: 74%; 106 | max-width: 240px; 107 | background: #fff; 108 | transition: all .2s ease-in-out; 109 | 110 | @include mediaMd { 111 | display: none; 112 | } 113 | 114 | .logo-wrapper { 115 | background: #000; 116 | width: 100%; 117 | height: 42px; 118 | display: flex; 119 | align-items: center; 120 | justify-content: space-between; 121 | padding: 0 10px; 122 | } 123 | 124 | .logo { 125 | display: block; 126 | } 127 | } 128 | 129 | .side-navigation-wrapper { 130 | padding-left: 15px; 131 | } 132 | 133 | .side-navigation { 134 | display: block; 135 | 136 | &-list { 137 | .nav-link { 138 | cursor: pointer; 139 | border-bottom: 1px solid transparent; 140 | transition: all .2s ease-in-out; 141 | color: #000; 142 | font-size: 1em; 143 | 144 | &.main { 145 | line-height: 20px; 146 | font-size: 1.05em; 147 | font-weight: $fw-medium; 148 | } 149 | 150 | &:hover { 151 | border-bottom: 1px solid #000; 152 | } 153 | } 154 | } 155 | } 156 | 157 | .open { 158 | transform: translateX(0); 159 | } 160 | 161 | .close { 162 | transform: translateX(-100%); 163 | } -------------------------------------------------------------------------------- /src/components/Navigation/NavigationItems/NavigationItem.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import { NavLink } from 'react-router-dom'; 3 | 4 | const navigationItem = ({ clicked, style, linkType, link, exact, children }) => ( 5 |
  • 8 | 14 | {children} 15 | 16 |
    • 17 | ); 18 | 19 | export default navigationItem; -------------------------------------------------------------------------------- /src/components/Navigation/NavigationItems/NavigationItems.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { connect } from 'react-redux'; 4 | import { filterProducts } from '../../../store/actions'; 5 | 6 | import NavigationItem from './NavigationItem'; 7 | 8 | const navigationItems = ({ filterProducts, isAuth }) => ( 9 | 22 | ); 23 | 24 | NavigationItem.propTypes = { 25 | isAuth: PropTypes.bool, 26 | filterProducts: PropTypes.func 27 | }; 28 | 29 | const mapStateToProps = ({ auth }) => ({ isAuth: auth.token !== null }); 30 | 31 | export default connect(mapStateToProps, { filterProducts })(navigationItems); -------------------------------------------------------------------------------- /src/components/Navigation/NavigationItems/NavigationItemsIcons.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import NavigationItem from './NavigationItem'; 4 | import { connect } from 'react-redux'; 5 | 6 | import userIcon from '../../../assets/icons/user.png'; 7 | import heartIcon from '../../../assets/icons/heart_white.png'; 8 | import cartIcon from '../../../assets/icons/cart_white.png'; 9 | import logoutIcon from '../../../assets/icons/logout.png'; 10 | 11 | const navigationItemsIcons = ({ cartItems, isAuth }) => ( 12 | 29 | ); 30 | 31 | navigationItemsIcons.propTypes = { 32 | cartItems: PropTypes.array, 33 | isAuth: PropTypes.bool 34 | }; 35 | 36 | const mapStateToProps = ({ products, auth }) => ({ 37 | cartItems: products.cart, 38 | isAuth: auth.token !== null 39 | }); 40 | 41 | export default connect(mapStateToProps)(navigationItemsIcons); -------------------------------------------------------------------------------- /src/components/Navigation/NavigationItems/SideNavigation.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { connect } from 'react-redux'; 4 | import { filterProducts } from '../../../store/actions'; 5 | import '../Navigation.scss'; 6 | 7 | import NavigationItem from './NavigationItem'; 8 | 9 | const femaleCategories = [ 10 | { 11 | category: 'female', 12 | content: 'Women', 13 | linkType: 'main' 14 | }, 15 | { 16 | category: 'women-coats', 17 | content: 'Coats' 18 | }, 19 | { 20 | category: 'women-jackets', 21 | content: 'Jackets', 22 | }, 23 | { 24 | category: 'women-suits', 25 | content: 'Suits', 26 | }, 27 | { 28 | category: 'women-shirts', 29 | content: 'Shirts', 30 | }, 31 | { 32 | category: 'women-t-shirts', 33 | content: 'T-shirts', 34 | }, 35 | { 36 | category: 'women-shoes', 37 | content: 'Shoes', 38 | }, 39 | { 40 | category: 'women-hats', 41 | content: 'Hats', 42 | }, 43 | { 44 | category: 'male', 45 | content: 'Men', 46 | linkType: 'main' 47 | }, 48 | { 49 | category: 'men-coats', 50 | content: 'Coats', 51 | }, 52 | { 53 | category: 'men-jackets', 54 | content: 'Jackets', 55 | }, 56 | { 57 | category: 'men-suits', 58 | content: 'Suits', 59 | }, 60 | { 61 | category: 'men-shirts', 62 | content: 'Shirts', 63 | }, 64 | { 65 | category: 'men-t-shirts', 66 | content: 'T-shirts', 67 | }, 68 | { 69 | category: 'men-shoes', 70 | content: 'Shoes', 71 | }, 72 | { 73 | category: 'men-hats', 74 | content: 'Hats', 75 | }, 76 | ]; 77 | 78 | const sideNavigation = ({ filterProducts, children }) => ( 79 | 97 | ); 98 | 99 | sideNavigation.propTypes = { 100 | filterProducts: PropTypes.func.isRequired 101 | }; 102 | 103 | export default connect(null, { filterProducts })(sideNavigation); -------------------------------------------------------------------------------- /src/components/Navigation/SideDrawer.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { connect } from 'react-redux'; 4 | import { toggleSideDrawer } from '../../store/actions'; 5 | import './Navigation.scss'; 6 | 7 | import logo from '../../assets/icons/logo.png'; 8 | import closeBtnIcon from '../../assets/icons/arrow_left.png'; 9 | 10 | import SideNavigation from './NavigationItems/SideNavigation'; 11 | import NavigationItem from './NavigationItems/NavigationItem'; 12 | import Backdrop from '../UI/Backdrop/Backdrop'; 13 | 14 | const sideDrawer = ({ toggleSideDrawer, showSideDrawer, isAuth }) => { 15 | let attachedClasses = ["side-drawer", "close"]; 16 | if (showSideDrawer) { 17 | attachedClasses = ["side-drawer", "open"]; 18 | }; 19 | 20 | return ( 21 | <> 22 | 23 |
    24 |
    25 | Elegant Store 26 | 29 |
    30 |
    31 | 32 | Contact 36 | Home 40 | {isAuth ? Orders : null} 44 | 45 |
    46 |
    47 | 48 | ); 49 | }; 50 | 51 | sideDrawer.propTypes = { 52 | showSideDrawer: PropTypes.bool.isRequired, 53 | isAuth: PropTypes.bool.isRequired, 54 | toggleSideDrawer: PropTypes.func.isRequired 55 | }; 56 | 57 | const mapStateToProps = state => { 58 | return { 59 | showSideDrawer: state.interface.sideDrawerShowed, 60 | isAuth: state.auth.token !== null 61 | }; 62 | }; 63 | 64 | export default connect(mapStateToProps, { toggleSideDrawer })(sideDrawer); -------------------------------------------------------------------------------- /src/components/Navigation/Toolbar.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import PropTypes from 'prop-types'; 3 | import { connect } from 'react-redux'; 4 | import { toggleSideDrawer } from '../../store/actions'; 5 | import './Navigation.scss'; 6 | 7 | import NavigationItems from './NavigationItems/NavigationItems'; 8 | import NavigationItemsIcons from './NavigationItems/NavigationItemsIcons'; 9 | 10 | import logo from '../../assets/icons/logo.png'; 11 | import menuIcon from '../../assets/icons/bars_white.png'; 12 | 13 | const toolbar = ({ toggleSideDrawer }) => ( 14 |
    15 |
    16 | 19 | Elegant Store 20 | 23 |
    24 | 27 |
    28 | ); 29 | 30 | toolbar.propTypes = { 31 | toggleSideDrawer: PropTypes.func.isRequired 32 | }; 33 | 34 | export default connect(null, { toggleSideDrawer })(toolbar); -------------------------------------------------------------------------------- /src/components/UI/Backdrop/Backdrop.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Backdrop.scss'; 3 | 4 | const backdrop = ({ show, clicked }) => ( 5 | show ?
    : null 6 | ); 7 | 8 | export default backdrop; -------------------------------------------------------------------------------- /src/components/UI/Backdrop/Backdrop.scss: -------------------------------------------------------------------------------- 1 | .Backdrop { 2 | width: 100%; 3 | height: 100%; 4 | position: fixed; 5 | z-index: 20; 6 | left: 0; 7 | top: 0; 8 | background-color: rgba(#fff, .8); 9 | } -------------------------------------------------------------------------------- /src/components/UI/Button/Button.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Button.scss'; 3 | 4 | const button = ({ disabled, clicked, btnType, children }) => ( 5 | 12 | ); 13 | 14 | export default button; -------------------------------------------------------------------------------- /src/components/UI/Button/Button.scss: -------------------------------------------------------------------------------- 1 | @import '../../../index.scss'; 2 | 3 | .btn { 4 | background: #fff; 5 | width: 100%; 6 | border: 1px solid #000; 7 | padding: 5px 7px; 8 | margin-top: 5px; 9 | outline: none; 10 | cursor: pointer; 11 | max-width: 180px; 12 | transition: all .3s ease-in-out; 13 | 14 | &:hover { 15 | background: #000; 16 | color: #fff; 17 | } 18 | 19 | &.small { 20 | padding: 2.5px; 21 | 22 | @include mediaMd { 23 | padding: 7px; 24 | } 25 | } 26 | 27 | &.mobile { 28 | width: 100%; 29 | max-width: 100%; 30 | } 31 | 32 | &.dark { 33 | background: #000; 34 | color: #fff; 35 | 36 | &:disabled:hover { 37 | background: #777; 38 | color: #fff; 39 | } 40 | } 41 | } 42 | 43 | button:disabled { 44 | color: #666; 45 | border: 1px solid #666; 46 | cursor: no-drop; 47 | 48 | &:hover { 49 | color: #666; 50 | background: #fff; 51 | border: 1px solid #666; 52 | } 53 | } -------------------------------------------------------------------------------- /src/components/UI/FakeForm/FakeForm.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './FakeForm.scss'; 3 | 4 | const fakeForm = () => ( 5 |
    6 | 7 | 8 | 9 | 10 |
    11 | ); 12 | 13 | export default fakeForm; -------------------------------------------------------------------------------- /src/components/UI/FakeForm/FakeForm.scss: -------------------------------------------------------------------------------- 1 | @import '../../../index.scss'; 2 | 3 | .questions-form { 4 | display: flex; 5 | flex-direction: column; 6 | padding: 1.2em 1em; 7 | margin: 0 auto; 8 | width: 100%; 9 | max-width: 400px; 10 | 11 | input, 12 | textarea { 13 | background: transparent; 14 | border: none; 15 | border-bottom: 1px solid #fff; 16 | margin-bottom: .6em; 17 | color: #fff; 18 | 19 | &::placeholder { 20 | color: #fff; 21 | } 22 | } 23 | 24 | button { 25 | background: transparent; 26 | border: 1px solid #fff; 27 | color: #fff; 28 | 29 | @include mediaSm { 30 | width: 140px; 31 | align-self: flex-end; 32 | } 33 | } 34 | } -------------------------------------------------------------------------------- /src/components/UI/Footer/Footer.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Footer.scss'; 3 | 4 | import FakeForm from '../FakeForm/FakeForm'; 5 | import SocialMedia from '../SocialMedia/SocialMedia'; 6 | 7 | const footer = () => ( 8 | 53 | ); 54 | 55 | export default footer; -------------------------------------------------------------------------------- /src/components/UI/Footer/Footer.scss: -------------------------------------------------------------------------------- 1 | @import '../../../index.scss'; 2 | 3 | .footer { 4 | width: 100%; 5 | margin-top: 2em; 6 | 7 | .questions { 8 | background: #000; 9 | color: #fff; 10 | text-align: center; 11 | padding: 1em; 12 | 13 | &-wrapper { 14 | max-width: 1200px; 15 | margin: 0 auto; 16 | 17 | @include mediaMd { 18 | display: flex; 19 | } 20 | } 21 | } 22 | 23 | .questions-text { 24 | margin: auto; 25 | max-width: 400px; 26 | } 27 | } 28 | 29 | .title { 30 | font-weight: $fw-semibold; 31 | font-size: 1.4em; 32 | 33 | @include mediaMd { 34 | font-size: 1.6em; 35 | } 36 | } 37 | 38 | .subtitle { 39 | font-size: .8em; 40 | 41 | @include mediaMd { 42 | font-size: 1em; 43 | } 44 | } 45 | 46 | .support-section { 47 | margin-top: .6em; 48 | padding: 1em; 49 | background: #000; 50 | color: #fff; 51 | 52 | 53 | .support-wrapper { 54 | display: grid; 55 | grid-template-columns: 1fr 1fr; 56 | grid-gap: 1.4em; 57 | max-width: 1200px; 58 | padding: 1em calc(1em + 3vw); 59 | margin: 0 auto; 60 | 61 | div { 62 | display: flex; 63 | flex-direction: column; 64 | align-items: flex-start; 65 | } 66 | 67 | @include mediaSm { 68 | grid-template-columns: repeat(4, 1fr); 69 | padding: 1em 0; 70 | grid-gap: .3em; 71 | } 72 | 73 | @include mediaMd { 74 | padding: 1em 3.2em; 75 | } 76 | } 77 | 78 | h4 { 79 | font-weight: $fw-semibold; 80 | font-size: .9em; 81 | margin-bottom: .3em; 82 | 83 | @include mediaMd { 84 | font-size: 1.3em; 85 | } 86 | } 87 | 88 | p { 89 | font-size: .75em; 90 | border-bottom: 1px solid transparent; 91 | cursor: pointer; 92 | transition: border-bottom .2s ease-in-out; 93 | 94 | &:hover { 95 | border-bottom: 1px solid #fff; 96 | } 97 | 98 | @include mediaMd { 99 | font-size: 1em; 100 | } 101 | } 102 | } 103 | 104 | .advertising { 105 | line-height: 2.4em; 106 | text-align: center; 107 | font-size: .9em; 108 | } -------------------------------------------------------------------------------- /src/components/UI/Input/Input.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Input.scss'; 3 | 4 | const input = (props) => { 5 | const { invalid, shouldValidate, touched, elementType, elementConfig, value, changed, label } = props; 6 | 7 | let inputElement = null; 8 | const inputClasses = ["input"]; 9 | 10 | if (invalid && shouldValidate && touched) { 11 | inputClasses.push("invalid"); 12 | }; 13 | 14 | switch (elementType) { 15 | 16 | case ('input'): 17 | inputElement = ; 23 | break; 24 | case ('textarea'): 25 | inputElement =