E-commerce involves the purchase and sale of goods and services online, so an e-commerce site is simply a website that allows you buy and sell tangible goods, digital products or services online. I decided to work on this project because as a software developer, you wanna have as many self made projects as possible, it not only proves that you know what you're doing, but it helps to improve your skills and give you much needed experience solving problems. If i really needed a quick and easy option for an e-commerce site there are site builders out there, most notably Shopify.

The Process

There are many strategies for building a software product and the one i prefer is called the Top-Down Approach. It is simply starting with the big picture, then breaking it down into smaller and smaller segments till you have a finished product. I'm using this approach mainly because this is my first time making a project like this and i don't quite have all the info i need to complete the project. Doing it this way basically gives me a tip on the next thing i need to work on.

Figuring Out The Front-end

I downloaded a template i liked from the hundreds of free ones available at Free CSS. It had everything i needed which included:

1. A simple, responsive UI
2. Multiple sample pages for different requirements e.g(register page)
3. Cart UI
4. Electronics as items It took some time to find the perfect one, i downloaded over 15 different ones and tested them all...

Making The Template My Own

After getting the perfect template i opened it up with visual studio code to start work immediately. Usually when making any site dynamic, you have to first point all the regularly recurring elements to a single location, like the footer, head and navbar. I realized there are too many recurring elements in an e-commerce site, including things like products, categories, carousels, the items themselves and so on. I went ahead and broke up all the pages and their codes into small chunks, then included them at the different points they each appear in(It's simple, repetitive work). Doing it this way makes the code easier to read, debug, and edit later on.

Adding Cart Functionality With JavaScript

Now this would've been a lot easier to do with just PHP, but the user will have to refresh the page each time they click to add a product to the cart. So for the sake of speed and quality I'll be doing it with plain JavaScript. I'm not gonna go into much detail on how i made this, the code is on Github/tech-store. I'm only going to show a very basic algorithm i used:

1. User clicks on "add to cart" button for a product
2. A function is called to collect all the details related to that item, including the unique id, name, price etc
3. Said function adds the product price to the total price; adds the item general info into the cart list(product list) and adds 1 to the product count
4. Said function shows the results of total price, cart list and product count to their required places
5. The "add to cart" button transforms into "remove from cart"
6. If the user clicks on "remove from cart" a function collects the unique id of said product and deletes the item with the corresponding id from the cart list; subtracts the items price from total price and subtracts one from product count
7. The "remove from cart" button transforms into "add to cart"
8. When the user checks out, the required data(cart list, total price and product count) will be passed to the finance system.

Beginning Back-end: Building The Database

At this point, the front-end is almost done. Now to get to the nitty gritty part of any product, hidden from the masses and human eyes known as the Back-end. To handle a site with many changing and updated items, a content management system(CMS) is needed. Writing the code for each product is not practical even for a developer; bugs can quickly arise and the code can get very messy; Non coders wont be able to use the site... Content management systems are everywhere, from typing your Whatsapp messages to posting a pic on Instagram to using Microsoft Word.

The first thing to consider in a CMS is the content or info you wanna process and a way to arrange them, this is where a database comes in. A database is an organized collection of structured information or data. As you could've guessed a database for an e-commerce site is quite large. As a matter of fact, the longest table I've ever made at the time of writing was from this project. The Items table was over 18 columns long... I did my best to make it as detailed as possible adding things like colors, side_images, brand, release date, dimensions and so on...

Summary

Building a software product with dynamic content is quite the journey and I'm willing to see it to the end. All progress as of writing has been committed to Github/tech-store. In the next post I'll talk about building a CMS and the basic operations of data persistence.

Stay tuned for Part 2.