Loading repository data…
Loading repository data…
iammelvink / repository
Repository for my vue-full-stack-ecommerce project. Melvin Kisten built a full-stack online shop using JavaScript. Frontend runs on VueJS, backend on NodeJS with Express. MongoDB stores data. Axios bridges frontend and backend. Postman checked API endpoints.
A transparent discovery signal based on current public GitHub metadata.
This score does not audit code, security, maintainers, documentation quality, or suitability. Verify the repository and its current documentation before adoption.
Find out how to build an e-commerce platform. Author Melvin Kisten tackles CRUD functions and connects the system to a database of MongoDB (Document database). Created a full-stack platform using JavaScript. The front-end was created using VueJS and the back-end was created using NodeJS, Vue, Express, MongoDB. Then I used Axios to link my back-end with my front-end. I also used Postman to test my end points.
Methodologies/Project Management:
Coding Practices:
Programming Languages/Frameworks:
Make sure you have these installed
Clone this repository into your local machine using the terminal (mac) or Gitbash (PC)
> git clone https://github.com/iammelvink/vue-full-stack-e-commerce.git
front-end setup (running on port 8080)
> cd front-end
> npm install
Compiles and hot-reloads for development
> npm run serve
back-end setup (running on port 8000)
> cd back-end
> npm install
Insert data into the MongoDB database
Start MongoDB server
> mongod
Enter mongo shell
> mongo
Insert data into the MongoDB database
> db.products.insertMany([{
id :"123",
name :"Skateboard Shoes",
price :"75.00",
description :"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel enim ...",
imageUrl :"",
averageRating :"5.0" }])
OR
imageUrl :"/images/shoes-5.jpg",
> db.users.insertOne({ id: '12345', cartItems: [ '123' ] })
Compiles and hot-reloads for development
> npm run dev
Enjoy!
Make sure you have created accounts at
Then follow ALL step by step
> cd front-end
Building optimized version of front-end
> npm run build
copy front-end/dist to root of back-end
then edit back-end/src/server.js for live production hosting
Needed in production
> cd back-end
> npm install connect-history-api-fallback
MongoDB:
Logging into remote MongoDB server (may need to change the url, as well as in back-end/src/server.js)
> mongo "mongodb+srv://<cluster_name>.mongodb.net/<dbname>" --username <username>
Inserting data into remote MongoDB database
> db.products.insertMany([{
id :"123",
name :"Skateboard Shoes",
price :"75.00",
description :"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel enim ...",
imageUrl :"",
averageRating :"5.0" }])
OR
imageUrl :"/images/shoes-5.jpg",
> db.users.insertOne({ id: '12345', cartItems: [ '123' ] })
Heroku:
Installing Heroku using npm globally
> npm install -g heroku
Logging into Heroku
> heroku login
> cd back-end
Creating a heroku app
> heroku create
Setting environment variables MongoDB username and password for database And name of db
> heroku config:set MONGO_USER=<username> -a <app name>
> heroku config:set MONGO_PASS='<password>' -a <app name>
> heroku config:set MONGO_DBNAME=<dn name> -a <app name>
Edit MongoDB url in back-end/src/server.js
Add this to back-end/package.json in "scripts"
To build an optimized version of the codebase To start the server
"build": "babel ./src --out-dir ./build",
"start": "node ./build/server.js",
Deployment to Heroku
Edit back-end/package.json Add:
"engines": {
"node": "0.0.0",
"npm": "0.0.0"
},
> cd back-end
Create .gitignore file Add this
ONLY in entire file
# Dependency directories
node_modules/
OR
Remove 'dist' and 'build' from .gitignore file
> git init
> heroku git:remote -a <app name>
> git add .
> git commit -am "initial commit"
> git push heroku master
> heroku ps:scale web=1
Check out some other stuff on Melvin K.