Simple Phone Buying store Using VueJS, firebase, NodeJS and MongoDB.
-
Live Demo here.
- Test User Credentials
- Email:
[email protected]
- Password:
123456
- Email:
- Test Admin Credentials
- Email:
[email protected]
- Password:
123456
- Email:
- Test PayPal Credentials
- Email:
[email protected]
- Password:
123456789
- Email:
- Test User Credentials
-
Github Repository link.
Node JS Express Framework
is used as a building Backend part of this Website.MongoDB
is used to Store Products Details and URL of Photos.Firebase Storage
is used for store the Uploaded Files.Firebase Authentication
is used for for Authenticate a User. User can authenticate using Google Sign in or Custom Email Password Method.Vue JS
is used as frontend Framework for building SPA.Bootstrap
is used for building UI and this website is Responsive for Desktop Devices and Tabs only.- Site has
Admin
functionality by which site owner can add Product to his Store. - Site is responsive for Desktop Devices and Tabs. (I am working on for responsiveness on small Devices)
-
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.
-
Credentials Setup
- Create a
MongoDB Atlas
Account for Host this Project Online. Find Tutorials here. - Setup a
Firebase Project
for usingFirestore and Authentication
. Find Tutorials here. - Setup Firestore and Enable Authenitaion Methods
- Generate
Private keys for Firebase Admin
. Find tutorials here. - Create a
PayPal account
andSandbox account
. Find Tutorials here
- Create a
-
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
onconfig
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)
-
-
Admin Setup
- Run this Command on root directory
>> npm run admin
- Run this Command on root directory
Made With ❤ by Nilanjan Deb