├── .browserslistrc ├── .eslintignore ├── .eslintrc.js ├── .firebase ├── hosting.ZGlzdA.cache └── hosting.eQ.cache ├── .firebaserc ├── .gitignore ├── README.md ├── babel.config.js ├── firebase.json ├── firestore.indexes.json ├── firestore.rules ├── functions ├── .gitignore ├── index.js ├── package-lock.json └── package.json ├── package-lock.json ├── package.json ├── postcss.config.js ├── public ├── favicon.ico ├── img │ ├── products │ │ ├── product1.jpg │ │ ├── product2.jpg │ │ └── product3.jpg │ ├── svg │ │ ├── graphic.svg │ │ ├── login-modal.svg │ │ ├── orders.svg │ │ ├── overview.svg │ │ ├── product.svg │ │ ├── products.svg │ │ └── profile.svg │ └── user.png └── index.html ├── src ├── App.vue ├── assets │ ├── admin.scss │ ├── app.scss │ └── logo.png ├── components │ ├── AddToCart.vue │ ├── HelloWorld.vue │ ├── Hero.vue │ ├── Login.vue │ ├── MiniCart.vue │ └── Navbar.vue ├── firebase-example.js ├── main.js ├── router.js ├── sections │ ├── ProductList.vue │ └── Products.vue ├── store.js └── views │ ├── About.vue │ ├── Admin.vue │ ├── Checkout.vue │ ├── Home.vue │ ├── Orders.vue │ ├── Overview.vue │ ├── Products.vue │ └── Profile.vue ├── storage.rules └── y └── index.html /.browserslistrc: -------------------------------------------------------------------------------- 1 | > 1% 2 | last 2 versions 3 | not ie <= 8 4 | -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | /build/ 2 | /config/ 3 | /dist/ 4 | /*.js 5 | /test/unit/coverage/ 6 | * -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | root: true, 3 | env: { 4 | node: true 5 | }, 6 | extends: ["plugin:vue/essential", "@vue/prettier"], 7 | rules: { 8 | "no-console": process.env.NODE_ENV === "production" ? "error" : "off", 9 | "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off" 10 | }, 11 | parserOptions: { 12 | parser: "babel-eslint" 13 | } 14 | }; 15 | -------------------------------------------------------------------------------- /.firebase/hosting.ZGlzdA.cache: -------------------------------------------------------------------------------- 1 | favicon.ico,1562594090700,e7c479d8b62b3bb468ae5bd1ca94f23c0d61463524e8d171fc129d590d1d02b4 2 | index.html,1562594090700,89abaa51c4ac49bd60d4b9f17334e112301e8059731769f8bf4608655b779b69 3 | css/about.0ba2f7e1.css,1562594090708,a09671ca61d3795a09a2a8ea20e1d26a342931833971995ae2f8ff2f9e2f022b 4 | img/user.png,1562594090710,09103279e9408af9c1712cb6ddd788ed4dae5bdbf1889507807ba434a7199616 5 | img/svg/login-modal.svg,1562594090718,da37f23e84035279e8c91d3a772010cdd50a85c72e77528dd4e2671ba1abb92a 6 | img/svg/product.svg,1562594090720,4c2cf928055656039d4b4e9e11b91339c0a122bb6867b4cb486bd4c606e2c80f 7 | js/about.4a8bcb39.js,1562594090713,76705d0c41a4ae7a83887f0259a8e3e081d06bfc42c3365425ab8561c02807a9 8 | img/svg/graphic.svg,1562594090713,aa84fcc82aefe64013510b8cf1b1cef11e064615ce644817f6af7215c5f9c761 9 | js/app.3fa05840.js,1562594090715,1d98604f4a3c849647065652220592c8ff9921a8915768ec381855bd01fa9b03 10 | js/about.4a8bcb39.js.map,1562594090716,d183866c76c98c9856d5ede80b00f4fa563720a0025f2fd082178acb9c78c0d0 11 | img/svg/products.svg,1562594090722,518c3961ff78d1b32d7ca7caad78a283f1fdcac72595a7a5b0390b3dae1f1918 12 | img/products/product2.jpg,1562594090723,107cdd91f088f433256ece85969aedc22b8b1b629153581d19ebb300bcb7b0fd 13 | img/svg/profile.svg,1562594090723,44fa247c2249116c7bd1703c285cd807c42366e5cf5e67e09da0e158ddc78279 14 | img/svg/overview.svg,1562594090719,47b07ff576dd7a7d1894c4af2d4e5c3f935489e39dce3565a13682a2027f3339 15 | img/svg/orders.svg,1562594090719,cb009a9d96c188f365c18cbed0389045f2d16e63c777d9db1318f5c55bac5218 16 | css/app.ccc8ee10.css,1562594090714,688f9c7154707743826ed9d6f44b72e6d518fa14d84b367a2ed0f5c2f3eefad5 17 | img/products/product1.jpg,1562594090714,272df6561fbd59df5b917ac55734e9db6822c40fb2dea19a0ea1711d8e1caf50 18 | js/app.3fa05840.js.map,1562594090717,be72ba81fce228cc8f4106831783aec2021a5e8bb962fceca0219a3a3e193e86 19 | img/products/product3.jpg,1562594090721,6b0d5c786d14fe99b66ccfdac87b5db9e48c17a72bd1ccd96321ab44651fd458 20 | js/chunk-vendors.f18e3c31.js,1562594090718,1196808a6c2d9c92f9d58e606f550ca0150e12f2c2ec96616b2bd96e0e06c6b5 21 | js/chunk-vendors.f18e3c31.js.map,1562594090720,ac26184fd3a2026d52afad78121f8ca73cfa0b81653ec05e0511a31411999157 22 | -------------------------------------------------------------------------------- /.firebase/hosting.eQ.cache: -------------------------------------------------------------------------------- 1 | index.html,1562593806565,aadf7e2a5a33f0c8aa47b9a2479d3d64256c3a81082080075fc5ce73f93f1a12 2 | -------------------------------------------------------------------------------- /.firebaserc: -------------------------------------------------------------------------------- 1 | { 2 | "projects": { 3 | "default": "vue-shop-5a95e" 4 | } 5 | } 6 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | src/firebase.js 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | 15 | # Editor directories and files 16 | .idea 17 | .vscode 18 | *.suo 19 | *.ntvs* 20 | *.njsproj 21 | *.sln 22 | *.sw* 23 | src/firebase.js 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # vue-shop 2 | 3 | A Youtube video series where web build a practical e-commerce web app with vuejs and firebase. (Don't just watch the video, do it practically) 4 | 5 | [Vuejs Full-Stack Course (AWS / Firebase) Build E-Commerce Website 6 | ](https://www.youtube.com/watch?v=UrUuvNyK-Os&list=PLB4AdipoHpxYPjGo0n2m6tmCLud_iSEbv) 7 | 8 | ## Project setup 9 | ``` 10 | npm install 11 | ``` 12 | 13 | ### Compiles and hot-reloads for development 14 | ``` 15 | npm run serve 16 | ``` 17 | 18 | ### Compiles and minifies for production 19 | ``` 20 | npm run build 21 | ``` 22 | 23 | ### Run your tests 24 | ``` 25 | npm run test 26 | ``` 27 | 28 | ### Lints and fixes files 29 | ``` 30 | npm run lint 31 | ``` 32 | 33 | ### Customize configuration 34 | See [Configuration Reference](https://cli.vuejs.org/config/). 35 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: ["@vue/app"] 3 | }; 4 | -------------------------------------------------------------------------------- /firebase.json: -------------------------------------------------------------------------------- 1 | { 2 | "firestore": { 3 | "rules": "firestore.rules", 4 | "indexes": "firestore.indexes.json" 5 | }, 6 | "hosting": { 7 | "public": "dist", 8 | "ignore": [ 9 | "firebase.json", 10 | "**/.*", 11 | "**/node_modules/**" 12 | ], 13 | "rewrites": [ 14 | { 15 | "source": "**", 16 | "destination": "/index.html" 17 | } 18 | ] 19 | }, 20 | "storage": { 21 | "rules": "storage.rules" 22 | } 23 | } 24 | -------------------------------------------------------------------------------- /firestore.indexes.json: -------------------------------------------------------------------------------- 1 | { 2 | "indexes": [], 3 | "fieldOverrides": [] 4 | } 5 | -------------------------------------------------------------------------------- /firestore.rules: -------------------------------------------------------------------------------- 1 | service cloud.firestore { 2 | match /databases/{database}/documents { 3 | match /{document=**} { 4 | allow read, write; 5 | } 6 | } 7 | } -------------------------------------------------------------------------------- /functions/.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ -------------------------------------------------------------------------------- /functions/index.js: -------------------------------------------------------------------------------- 1 | const functions = require('firebase-functions'); 2 | 3 | // // Create and Deploy Your First Cloud Functions 4 | // // https://firebase.google.com/docs/functions/write-firebase-functions 5 | // 6 | // exports.helloWorld = functions.https.onRequest((request, response) => { 7 | // response.send("Hello from Firebase!"); 8 | // }); 9 | -------------------------------------------------------------------------------- /functions/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "functions", 3 | "description": "Cloud Functions for Firebase", 4 | "scripts": { 5 | "serve": "firebase serve --only functions", 6 | "shell": "firebase functions:shell", 7 | "start": "npm run shell", 8 | "deploy": "firebase deploy --only functions", 9 | "logs": "firebase functions:log" 10 | }, 11 | "dependencies": { 12 | "firebase-admin": "~7.0.0", 13 | "firebase-functions": "^2.2.0" 14 | }, 15 | "private": true 16 | } 17 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-shop", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "bootstrap": "^4.2.1", 12 | "firebase": "^5.8.0", 13 | "jquery": "^3.3.1", 14 | "popper.js": "^1.14.6", 15 | "vue": "^2.5.17", 16 | "vue-carousel": "^0.18.0", 17 | "vue-firestore": "^0.3.18", 18 | "vue-router": "^3.0.1", 19 | "vue-stripe-elements-plus": "^0.2.10", 20 | "vue2-editor": "^2.6.6", 21 | "vue2-filters": "^0.6.0", 22 | "vuex": "^3.1.1" 23 | }, 24 | "devDependencies": { 25 | "@vue/cli-plugin-babel": "^3.2.0", 26 | "@vue/cli-plugin-eslint": "^3.2.1", 27 | "@vue/cli-service": "^3.2.0", 28 | "@vue/eslint-config-prettier": "^4.0.0", 29 | "babel-eslint": "^10.0.1", 30 | "eslint": "^5.8.0", 31 | "eslint-plugin-vue": "^5.0.0-0", 32 | "node-sass": "^4.9.0", 33 | "sass-loader": "^7.0.1", 34 | "sweetalert2": "^8.2.6", 35 | "vue-template-compiler": "^2.5.17" 36 | } 37 | } 38 | -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | autoprefixer: {} 4 | } 5 | }; 6 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hujjat/vue-shop/3282a394fa4c70a2eb8c7b57d6a1629fa5990f51/public/favicon.ico -------------------------------------------------------------------------------- /public/img/products/product1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hujjat/vue-shop/3282a394fa4c70a2eb8c7b57d6a1629fa5990f51/public/img/products/product1.jpg -------------------------------------------------------------------------------- /public/img/products/product2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hujjat/vue-shop/3282a394fa4c70a2eb8c7b57d6a1629fa5990f51/public/img/products/product2.jpg -------------------------------------------------------------------------------- /public/img/products/product3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hujjat/vue-shop/3282a394fa4c70a2eb8c7b57d6a1629fa5990f51/public/img/products/product3.jpg -------------------------------------------------------------------------------- /public/img/svg/graphic.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/svg/login-modal.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/svg/overview.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/svg/product.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/svg/profile.svg: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /public/img/user.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Hujjat/vue-shop/3282a394fa4c70a2eb8c7b57d6a1629fa5990f51/public/img/user.png -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 |
4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 |11 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Quos numquam tempora, iure delectus totam minus quam aperiam ratione dolores magni voluptates ut necessitatibus odio ipsum fuga, voluptas ab praesentium nihil? 12 |
13 |13 | Complete your device with Office 365 and get 1TB cloud storage, Excel, Word, PowerPoint & more. Select your suite during checkout. 14 |
15 | Add to Cart 16 |26 | Style and speed. Go beyond the traditional with new Surface Laptop 2. Featuring improved performance and the full Windows 10 Home experience. 27 |
28 | Add to Cart 29 |39 | The ultimate creative studio. Let your ideas flow with brilliant color, blazing graphics, faster processors, intuitive tools, and a stunning, adjustable 28” display. 40 | 41 |
42 | Add to Cart 43 |{{item.productPrice | currency}}
21 |Quantity : {{item.productQuantity }}
22 |29 | Total Price : {{ this.$store.getters.totalPrice | currency }} 30 |
31 | 32 | 33 | 34 |15 | Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur quaerat voluptate iusto? Nihil voluptas vitae veritatis magnam reprehenderit, reiciendis ex? Libero quasi natus veniam voluptatum, voluptas exercitationem ratione consectetur et! 16 |
17 | 18 |11 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde, ducimus. 12 |
13 |Name | 34 |Price | 35 |Modify | 36 |
---|---|---|
42 | {{product.name}} 43 | | 44 | 45 |46 | {{product.price}} 47 | | 48 | 49 |50 | 51 | 52 | 53 | | 54 | 55 |
9 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde, ducimus. 10 |
11 |11 | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Unde, ducimus. 12 |
13 |Name | 34 |Price | 35 |Modify | 36 |
---|---|---|
42 | {{product.name}} 43 | | 44 | 45 |46 | {{product.price}} 47 | | 48 | 49 |50 | 51 | 52 | 53 | | 54 | 55 |
11 | Change your profile settings here 12 |
13 |You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!
38 | Open Hosting Documentation 39 |Firebase SDK Loading…
41 | 42 | 64 | 65 | 66 | --------------------------------------------------------------------------------