Digital Dojo is a consumer electronics E-Commerce store where customers can buy gadgets like laptops, smartphones, videogames, etc...
Tech stack used for this project: HTML, CSS, Bootstrap, Javascript, RESTful APIs with CRUD methods, MongoDB for the backend hosted on https://striveschool-api.herokuapp.com/.
Digital Dojo can be accessed by any device (fully responsive) by clicking on the following link: https://alex188dot.github.io/E-Commerce/
The website will display all the available products, that are fetched directly from the database.
By clicking on each product, the user will be able to see more details like a full description and a larger image (this is obtained with only one product.html page, by using query strings).
Furthermore the user will be able to add each product to a cart, through the Add to cart button, which can be found either in the homepage or in the product.html page. By leveraging the use of local storage the cart progress is not lost and can be carried with ease through the different webpages, so that when the user decides to proceed to payment, they can click on the top right of the screen and they will be redirected to the cart summary. If the cart is empty the user will find this message:
On the other hand, if there are items in the cart, a summary like the one below will be displayed:
Here they will be able to see the total, remove items and proceed to payment. If they click on the button the following message will appear:
By clicking on the top right of the homepage, on Admin Login, the admin will be able to sign into a private area where they will be able to communicate with the database. To access this part use: Admin01 (username) and 01 (password):
Once succesfully logged in, the admin will be able to add, update, search and remove a product. Success or error messages will be displayed every time an action is performed.
a) Example of adding a product. The admin inserts all the info in the form (all are required) for an Xbox Controller:
By going back to the homepage we will be able to see that the product has been successfully added also on the front-end:
b) Example of updating a product. Let's say the admin wants to change the image for this product: by specifying only the ID (mandatory) and the new image the system will update the imageurl both on the server side and the client side.
Hence the front-end will now show the new image:
c) Example of searching a product. Let's say the admin needs to get the ID of an item quickly, for instance the Xbox, they can just type in the name of the product, and the system will return all the items in the db, matching that query:
d) Example of deleting a product. Let's say the admin needs to delete a product because it is no longer available, they can do so just by inserting the ID in the relative field and click on the Delete Product button:
A confirmation message will be displayed and the product will disappear from the front-end:
