Vict E-commerce: Setting Up Shop

Vict E-commerce: Setting Up Shop
Photo by Danial Igdery / Unsplash

The world continues to move towards a digital and omni-channel approach when it comes to shopping, with the largest platforms being closed sourced, such as Amazon and Shopify, my friend Jamil and I decided to see what it would be like to develop a platform for ourselves.

A secondary reason is, while not the most unique project we still have to solve certain features and challenges: user authentication, product management, data visualization, and lastly user interface and experience.

While we could have worked on the project separately or developed our own solutions to this, we decided to work together for this. One of the reasons being it's a chance for us to work collaboratively instead of individually on something. Next, we currently each have a preference on working on different parts of the application. I have a preference with working on the backend and my friend, Jamil prefers to work on the frontend.

In our blog updates, I will concentrate on detailing the backend development aspects, my area of expertise, while Jamil will cover the backend development. Check out Jamil's insights on his blog here: Jamil Blog

Collaboration

Git & Github

In order to make the collaboration between the two of us possible we have to use a version control system specifically Git. We setup a repository with Github for our code. I added Jamil as a collaborator in the Github repo settings to allow him to push code to it. We made two separate directories one for client side code and the other for server side code.

Something simple we decide to do was work on git branches to get us comfortable with them on our local devices. For this project currently to get the code back onto the "main" branch we use merge to make this happen. At some point we hope to start using more of the tools for git branches.

Scope of work

As we are making an e-commerce platform we wanted to start out with making Merchants (people who control products & storefronts), Storefronts (a page to sell products), and lastly products (items to be sold).

When we first started coding we only had merchants and products. One of the things we realized, was a "merchant" might have multiple "brands" or "storefronts" to sell different products. So we decided before we made to many significant changes to separate the merchant from the storefront directly and have a merchant have the possibility for multiple storefronts, but every storefront must be associated with at least one merchant.

The current problems we have with the code is products have yet to be updated so that every product is associated with a storefront. Another issue we learned while developing is while we know that we need to handle authentication/credentials, we actually don't know how to handle authentication.

Server Side Implementation

In the server directory I added npm to the directory using "npm init" and completing the prompts. Once completed I installed the following npm packages:

  • Express for the server framework
  • Sequelize for the Object–relational mapping
  • Mysql2 for Sequelize to use MySQL
  • CORS for the Cross-origin resource sharing
  • Bcrypt for password-hashing
  • Jsonwebtoken for Authentication/Credentials

I made a new directory named "src" which is the source directory to store all the code I am developing for the server. Within the "src" directory I added an app.js file to serve as the main server file. This file is used to setup, start, and tell the server what port to listen to.

In the "src" directory I made three subdirectories; "router", "controller", & "models". The "router" directory defines the routes for the server. The "controller" directory defines the business logic that needs to be performed for a specific route. Lastly the "models" directory stores the sequelize connection and logic, as well as the model definition for the database tables.

In the merchant controller I salted and hashed the password using bcrypt before storing them in the database. This was because we don't want to store plain text passwords if someone where to gain access to our database. During register and login for the merchants we use JWT for credentials. Currently we understood the need to set it up, but we are still working out the kinks for properly handling credentials and usage.

At the moment we have developed a simple CRUD application for the storefronts and products. I need to develop the necessary parts, once we solve the authentication/credentials issue, to update and delete merchants. At this time all you can do is register and login as a merchant.

In app.js we had to use the CORS package so we can send data to our frontend app. We had an issue where when we would send data to our frontend we would get CORS issues, so we simply installed the package and enabled it.

Future Plans

At the moment one of the simplest things we would like to address would be adding information to our README so others could use our app or modify it as necessary. Looking ahead we want still haven't completed our current scope for merchants, products, & storefronts. In our next update we want to have solved the following:

  • Authentication & credentials
  • Products being associated with Storefronts
  • Updating & Deleting Merchants

Past that we still have develop "customers" and the necessary features for that, which will include:

  • Completing transactions
  • Having an order history
  • User authentication.

Some things that I would like to address is logging and error handling for the backend server.

If you would like to check out the code or us it for yourself: Github Link