Phone Store using Vue JS

Simple Phone Buying store Using VueJS, firebase, NodeJS and MongoDB.

• Live Demo here.

  • Test User Credentials
    • Email: [email protected]
    • Password: 123456
  • Test Admin Credentials
    • Email: [email protected]
    • Password: 123456
  • Test PayPal Credentials
    • Email: [email protected]
    • Password: 123456789

• Github Repository link.

---

Technology and Modules used for this Project

1. Node JS Express Framework is used as a building Backend part of this Website.
2. MongoDB is used to Store Products Details and URL of Photos.
3. Firebase Storage is used for store the Uploaded Files.
4. Firebase Authentication is used for for Authenticate a User. User can authenticate using Google Sign in or Custom Email Password Method.
5. Vue JS is used as frontend Framework for building SPA.
6. Bootstrap is used for building UI and this website is Responsive for Desktop Devices and Tabs only.
7. Site has Admin functionality by which site owner can add Product to his Store.
8. Site is responsive for Desktop Devices and Tabs. (I am working on for responsiveness on small Devices)

---

Run this Project on Local Environment

1. Prerequisites

   • NodeJS installed on your Local machine
   • MongoDB installed on your local machine or have an Atlas Account.
   • A Gmail Account for Firebase Services.
   • A PayPal Account and a Sandbox account for testing purposes.

2. Credentials Setup

   • Create a MongoDB Atlas Account for Host this Project Online. Find Tutorials here.
   • Setup a Firebase Project for using Firestore and Authentication. Find Tutorials here.
   • Setup Firestore and Enable Authenitaion Methods
   • Generate Private keys for Firebase Admin. Find tutorials here.
   • Create a PayPal account and Sandbox account. Find Tutorials here

3. Project Setup

   • Clone this Repository or Download the zip File.

      >> git clone https://github.com/nil1729/vue-phone-store
     

   • Create a new file named secret.json on config directory which contains Generated Private keys on Firebase project.

         {
             "type": "service_account",
             "project_id": "",
             "private_key_id": "",
             "private_key": "",
             "client_email": "",
             "client_id": "",
             "auth_uri": "",
             "token_uri": "",
             "auth_provider_x509_cert_url": "",
             "client_x509_cert_url": ""
         }
     
     

   • Create another cofig.js file on /client/src/firebase. Put all firebase config Credentials for Frontend. (In following Format)

       const firebaseConfig = {
           apiKey: "",
           authDomain: "",
           databaseURL: "",
           projectId: "",
           storageBucket: "",
           messagingSenderId: "",
           appId: "",
           measurementId: ""
       };
     
       export default firebaseConfig;
     

   • Create a .env file on root directory. Which Contains all necessary Secret Credentials (for backend only) for this site.

      DB_URI = <- Mongo Atlas URI ->
      PAYPAL_CLIENT_ID = <- PayPal Sandbox Client ID (Also use your own client ID on Frontend) ->
      PAYPAL_CLIENT_SECRET = <- PayPal Sandbox Client Secret (Only for backend server to verify purchase) ->
     

   • Run this command

      >> npm run dev  // to start Vue Development server and Backend server together.
     
      >> npm run server // to start only Backend server
     
      >> npm run Client // to start Vue Development server only (But it will not working alone as api depends on Backend also)
     
     

4. Admin Setup

   • Run this Command on root directory

       >> npm run admin
     

---

Website Preview

---

Made With ❤ by Nilanjan Deb