Developing an E-Commerce Website with Javascript and Firebase: A Comprehensive Guide - Series 1

As a developer, it is essential to learn and master programming languages that are relevant to your field. For web development, JavaScript is typically the first programming language that most developers learn. However, it is important to note that HTML and CSS are markup languages and not programming languages. Once you have learned JavaScript, you are typically eager to start building your first project to advance your skills.

In this tutorial, we will build an e-commerce website using vanilla JavaScript, which is plain JavaScript without any framework. We will also use Firebase to handle our back-end operations. Firebase is capable of performing a variety of back-end operations, including storage, real-time database, and authentication, among others. Given the broad scope of creating an e-commerce website, we will only cover a section of it in this post and cover more in other series.

Before we begin, here are some prerequisites:

• Visual studio code or any source-code editor
• A firebase account
• Node.js installed in your computer
• Good knowledge of Html, CSS, and Javascript

Once you have these tools, you are ready to get started.

STEP 1

Lets get our basic html and css set-up

Before we begin coding, you should design your website based on the design you feel comfortable with. You can add fake products to your website to act as a placeholder until you can set up your Firebase. If you find it hard to design websites on your own, you can go to colorlib if you find it hard to design websites on your own.

This is an example of a design template I came up with in a short time:

This is just a visual aid to give you an idea of what we will be working with. This is how my item card looks like. You can visit the website here and the the link to the github soucre code here

The capabilities of this website are:

1. Displaying products on the wesbite
2. Adding products to cart
3. Deleting and adding products to the website

STEP 2

Now that we done with all the boring HTML, CSS and designing, lets go on to setting up our firebase account

• Assuming you have created an account on firebase, go to console

• Click on "Add project," give it a product name, and follow all the steps. As you can see from mine, I have already created my project named SHOP-WEBSITE:

-Follow all the steps till you reach this page:

Click on "Web," and follow all the steps and continue to the console.

-Go to your project settings and het your config, this should look like this

Copy this and keep it somewhere, we will need it later

STEP 3

To set up Firebase in your project, it is important to first ensure that Node.js is installed on your VS Code. To check if Node.js is installed, simply type "node --version"

node --version

in your terminal. If it is installed, it will return a version number.

After ensuring that Node.js is installed, follow these steps to set up Firebase in your project:

1. Navigate to the root folder of your website using the VS Code terminal and type "firebase login".

firebase login

This will prompt you to log in to your Google account, so follow the steps in your browser until you are logged in.

1. Next, initialize Firebase in your project by typing "firebase init" in the terminal.

firebase init

This will prompt a series of questions that you should answer based on your specific needs and preferences. If you are unsure about any of the questions, there are plenty of resources available online, including Stack Overflow, that can provide assistance.

1. Once Firebase has been initialized in the directory, there are a few additional steps you need to take. Specifically, you need to add the Firebase script tag to the head of your HTML file by including the following line:

<script src="https://www.gstatic.com/firebasejs/6.0.2/firebase.js"></script>

1. Finally, create a JavaScript file, add your Firebase configuration, and initialize Firebase using the following code:

const firebaseConfig = {
  apiKey: "AIzaSyC-AYn0Oos9Z_yqojxKjMdeuKrF68quVnw",
  authDomain: "blog-16faf.firebaseapp.com",
  projectId: "blog-16faf",
  storageBucket: "blog-16faf.appspot.com",
  messagingSenderId: "31630474371",
  appId: "1:31630474371:web:f0135de93da7ba016aafb6",
  measurementId: "G-BMTYFXS9LH"
};

// Initialize Firebase
firebase.initializeApp(firebaseConfig);

By following these steps, you have successfully set up Firebase in your project and can begin utilizing it for your specific purposes. In our next series, I will cover how to setup firebase Realtime Database for storing and retrieving of the details of our items.