ikismail/vue-shoppingcart

ShoppingCart (Ecommerce) 🛒 Application using Vuejs, + Node.js + Express + MongoDB 🚀🤘

ShoppingCart - Vue.js + Node.js + Express + MongoDB

Developing a ShoppingCart (Ecommerce) Application using Vue.js

Live Demo : Vue-Shopping-Cart

This project was generated with Vue CLI version 3.x

Functionalitites

1. User Registeration and Authentication using Passport.js (Email/password | Google Authentication)
2. CRUD Operations like
   • User can add product to his cart
   • Admin can add product to the product list.
   • Admin can edit/delete the product.
3. Security
   • Implementation of Authentication and Authorization.

Tools and Technologies:

• Technology : Vue.js + Express + Node.js + MongoDb (MEVN), HTML, Bootstrap, PWA.

Installation

1. Vue CLI - Installation of Vue CLI
2. NodeJs - Download Nodejs
3. Package Manager - NPM / Yarn
4. Clone the repository and run npm install if you use npm as package manager or yarn install if you use yarn as package manager.
5. Configuring MongoDB server/mongo/config.js

    mongoose.connect('<YOUR_MONGODB_URL>', {
        useNewUrlParser: true
    }); // connect to your database

6. Run the server npm run serve

Screenshots:

Main Page:

Product Page:

How can I support the developer ?

• Star my Github repo ⭐
• Create pull requests, submit bugs, suggest new features or documentation updates 🛠

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Run your tests

npm run test

Lints and fixes files

npm run lint

vue-shoppingcart's Issues

Cant run your file

sir im new to this web development and i want to see how your project runs but when i copy the code from the vue repository it doesnt run can you help me thanks

Database change +Help

How can i change Database to Local host database?

Thanks

Mongo DB

Hey man I liked your project and I'm working on the same project with a few changes of mine.
I would like to know more on the implementation of mongo DB, could you help me out

demo is broken

can't login or see the products

Need to Implement Stripe testing payment modal for Payments.

Contributors are welcome to implement Stipe testing payment modal for payments

Navbar toggle dosent work

Hello.
Great project.
I having a problem tho.
When I try to replica your menu I dont get the toggle to work.
The menu folds in to the hamburger, but when I push the button there is no respond at all.
Here is my code. Can you see any errors? I cant se what different I have make from you.
App.vue

<template>
  <div id="app" class="container">
    <main>
      <nav class="navbar navbar-expand-lg navbar-light bg-light" id="nav">
        <button
          class="navbar-toggler collapsed"
          type="button"
          data-target="#navbarText"
          aria-controls="navbarText"
          aria-expanded="false"
          aria-label="Toggle navigation"
          v-b-toggle="'navbarText'"
        >
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarText">
          <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
              <a class="nav-link" href="#">Link 1</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link 2</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Link 3</a>
            </li>
          </ul>
        </div>
      </nav>
    </main>
  </div>
</template>

<script lang="ts">
import Vue from "vue";
export default Vue.extend({
  name: "app"
});
</script>

<style lang="scss">
@import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
@import "../node_modules/@fortawesome/fontawesome-free/css/all.css";

#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 15px;
  a {
    font-weight: bold;
    color: #2c3e50;
    &.router-link-exact-active {
      color: #42b983;
    }
  }
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px; /* Margin bottom by footer height */
}

.footer {
  position: relative;
  bottom: 0;
  width: 100%;
  height: 60px; /* Set the fixed height of the footer here */
  background-color: #f5f5f5;
}
footer {
  background-color: #f2f2f2;
  padding: 25px;
}
.footer p,
.footer div {
  display: inline;
  vertical-align: top;
  font-family: "Open Sans", sans-serif;
  font-size: 16px;
  line-height: 28px;
}
.footer p {
  font-weight: bold;
}
* a {
  color: #42b983;
}
* .fa {
  font-size: 18px;
}
.buttonGreen-outline {
  width: 100%;
  color: #41b883;
  background-color: transparent;
  border-color: #41b883;
}
.buttonGreen-outline:hover {
  color: #ffffff;
  background-color: #41b883;
  border-color: #41b883;
}
.buttonGreen {
  color: #fff;
  background-color: #41b883;
}
.buttonGreen:hover {
  background-color: #42a97b;
}
</style>

package.json

{
  "name": "affiliet-cms",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "vue-cli-service serve",
    "build": "vue-cli-service build",
    "lint": "vue-cli-service lint"
  },
  "dependencies": {
    "bootstrap": "^4.2.1",
    "bootstrap-vue": "^2.0.0-rc.11",
    "path": "^0.12.7",
    "serverless": "^1.36.1",
    "serverless-offline": "^4.0.0",
    "serverless-webpack": "^5.2.0",
    "typescript": "^3.1.6",
    "vue": "^2.5.21",
    "webpack": "^4.28.4"
  },
  "devDependencies": {
    "@fortawesome/fontawesome-free": "^5.6.3",
    "@vue/cli-plugin-babel": "^3.3.0",
    "@vue/cli-plugin-eslint": "^3.3.0",
    "@vue/cli-plugin-typescript": "^3.3.0",
    "@vue/cli-service": "^3.3.0",
    "@vue/eslint-config-typescript": "^3.2.0",
    "babel-eslint": "^10.0.1",
    "eslint": "^5.8.0",
    "eslint-plugin-vue": "^5.0.0",
    "node-sass": "^4.11.0",
    "sass-loader": "^7.1.0",
    "vue-template-compiler": "^2.5.21"
  },
  "eslintConfig": {
    "root": true,
    "env": {
      "node": true
    },
    "extends": [
      "plugin:vue/essential",
      "eslint:recommended",
      "@vue/typescript"
    ],
    "rules": {},
    "parserOptions": {
      "parser": "typescript-eslint-parser"
    }
  },
  "postcss": {
    "plugins": {
      "autoprefixer": {}
    }
  },
  "browserslist": [
    "> 1%",
    "last 2 versions",
    "not ie <= 8"
  ]
}

Need to complete Checkout Module.

Contributors are welcome to complete the checkout module.

MongoDB

hello
I'm really interested in this project, could you send me the mongo database?

Or how can I get it done?

Regards
thanks
and it is a fantastic project

Don't see image product list

I command: npm run serve
But after localhost:8080 don't see any image in all product. Help me pls.