Ecommerce website with vue js and firebase

Preface

This is my first web project which is an online store. I created the site with vuejs and firebase. In addition, the project is a practical application to the training I followed on the "Vue school" site.

Why I chose vuejs framework?

Simply, vuejs has a big community, especially vuejs and laravel. Vue js is widely used all over the world. Do you know that Nentendre website, Gitlab, Laracast, Laravel Vapor and other well-known sites are developed with vuejs.

This is definitely the framework I recommend for frontend development.

Install

Perform the following steps:

1- Download and install Node.js.
2- Download and install Visual Studio Code(VS Code).
3- Install vetur extension for VS Code.
4- Clone this repository.
5- Download and install npm packages.

npm install

6- configurer Firebase.js.

//  just connect to Firebase then create a project and copy the configuration function
const firebaseConfig = {
...
};

Setting up a Firebase project and registering apps

Starting Server

npm run serve

Creating a Production Build

npm run build

Lints and fixes files

npm run lint

Customize configuration

See Configuration Reference.

Project Map

- myprojectvuejs
  + public          … Contains resouces of this project.
  - src
    + assets        … Contains source codes that Webpack doesn't need to build.
    + components    … Contains components of Vue.
    + router        … Define Vue Router.
    + store         … Define Vuex
    + views         … Define views of this project.
    - App.vue       … Define a base view of this project.
    - main.js       … start an instance of the application.
    - Firebase.js   … Initialize Firebase.
  - babel.config    … Babel Configuration.
  - package.json    … Define npm packages.
  - vue.config.js   … Vue CLI Configuration.
  

Views

There are the following views in this project.

View Name	File Name	Description
Login View	LoginView.vue	The view for session authentication with email and password or account creation.
Home View	HomeView.vue	The view displays the products on sale.
Products View	ProductsView.vue	The view displays the products list.
MyProducts View	MyProductsView.vue	The view to manage the products.
Cart View	Cart.vue	The view shows the ordered products.
Orders View	Orders.vue	The view showing the orders table.

Libraries

This sample uses the following library.

Library Name	Version	Description
vue-cli	5.0.0	The tool for Vue.js Development.
vue.js	3.2.13	JavaScript Framework
vue-router	4.0.3	Library for Routing.
vuex	4.0.0	Flux library for Vue.js
firebase	9.9.1	library for Ajax.
bootstrap	5.2.0	CSS Framework

YouTube video for the website