todokku / amazon_clone_vue

Amazon_Clone_Vue (Full-Stack Project)

Link to the Project is:

http://amazon-clone-vue.herokuapp.com/ Note That It might take 5-10seconds to open this website.

Description

>  Developed a CRUD operation Amazon clone using Vue.js framework, Node.js, and Bootstrap.
>  This project is comprised of both client-side and admin side where data is manipulated using MongoDB.
>  Backend Authentication is created using JSON Web Token (JWT) and for Frontend Authentication library I have used NUXT/auth library.
>  It contains the payment gateway which is made using Stripe.
>  Search Function is made using Algolia.
>  Data Storage used in this project is MongoDB and AWS S3 for the images.
>  Deployed both frontend and backend Heroku App.

If you're using windows on your local machine, and you want to install the prerequisites at first and then add the source, follow the following steps:

• Download Nodejs
• Install Npm
• Now Dowmload/Fork this repository.

Instructions to install the package manager:

SERVER SIDE

Go to the server folder and then opn the git bash or command line and go to the same server folder directory and then do the following:

# install dependencies
$ npm install

This will install all the dependencies but there is one file that i have removed from this server without which it will the server end will not work. It is all the passcodes file which is removed for the obvious safety reasons. But i will tell you all the keys that i worked with in detail so that you can create your own key and start the server.

Secret Keys

• Mongo Database Key: To get this key you can go to Mongo Atlas create your account and the generate a key to access the Mongo database.

• AWS Acess Key and AWS Secret Key: Same as above go to AWS website create an account and then you will recieve two different keys that needs to be Place for these two. Also remeber to keep the project name same as i kept it in my code or change the given code to your project name. Otherwise it will not work.

• Bcrypt Key: This is the key used to crypt the password of the user. This key is randomly generated you can just randomly type in any number/text that will help in encrypting the user password.

• Stripe -Key: To get this key you can go to Stripe website. This is a payment gateway website that will help in creating a payment gateway api which is used in my website. Now create your account and the generate a key to access the Payment gateway features.

• Algolia_Key, Algolia_App_Id, Algolia_Index: These keys are generated by algolia website. Please visit their website and read documentation if any problems. This will help in improving your search bar.

After all of this Your Server side is good to go.

I will recommend to use Postman to see the working of the server side. I am attaching the screenshot to show you how it works.

To start the server you can enter the following in your cmd:

node server

Remeber This will run on port 3000 as it is mentioned in the code to listen the app.

List of the dependencies used:

    "algoliasearch": "^4.2.0",
    "aws-sdk": "^2.610.0",
    "axios": "^0.19.2",
    "bcrypt-nodejs": "0.0.3",
    "body-parser": "^1.19.0",
    "cors": "^2.8.5",
    "dotenv": "^8.2.0",
    "express": "^4.17.1",
    "jsonwebtoken": "^8.5.1",
    "moment": "^2.26.0",
    "mongoose": "^5.9.2",
    "mongoose-algolia": "^1.10.1",
    "mongoose-deep-populate": "^3.1.1",
    "morgan": "^1.9.1",
    "multer": "^1.4.2",
    "multer-s3": "^2.9.0",
    "stripe": "^8.56.0"
  

ADMIN SIDE

First of all remeber that your server side is running. Now to run this Go to the comand line and in admin directory and run:

PORT=9000 npm run dev    

Ports are different so that none of them clash with each other to run admin and client it is important that server is running.

Inside the admin side you can add, remove and update products/authors/users. I am sharing some of the the screenshots of the admin side I will not be providing the actual weblink for this one because it is an admin side for the privacy.

List of the dependencies used:

    "@nuxtjs/axios": "^5.3.6",
    "@nuxtjs/pwa": "^3.0.0-0",
    "bootstrap": "^4.1.3",
    "bootstrap-vue": "^2.0.0",
    "cors": "^2.8.5",
    "nuxt": "^2.0.0",
    "vue-star-rating": "^1.6.1"

CLIENT SIDE

This is the main frontend site that is available to the users and the website link is given above.

Now to run this you can open cmd and path to this directory and type in:

PORT=6001 run dev   

For this also remember that server must run first.

List of the dependencies used:

    "@nuxtjs/auth": "^4.8.5",
    "@nuxtjs/axios": "^5.3.6",
    "@nuxtjs/pwa": "^3.0.0-0",
    "bootstrap": "^4.1.3",
    "bootstrap-vue": "^2.0.0",
    "cors": "^2.8.5",
    "nuxt": "^2.0.0",
    "vue-star-rating": "^1.6.1",
    "vuex-persistedstate": "^3.0.1"

Log in Image:

(https://github.com/Kheman9862/Amazon_Clone_Vue/blob/master/Images/Client3.mp4) Open the video to take a sneak peek inside the front end.