Sahara

Store

JavaScript || Express || MongoDB || Node

Visit the Sahara Store
GitHub

The Sahara Store is an e-commerce website where you can quench your thirst by buying a great water bottle. In this exercise, I use vanilla JavaScript to implement different screens, functionalities and interactions rather than using React or another framework. **Notice that images do not show due to Heroku's free Dyno policy to delete all stored files after 30mins. If you would like to see website with images, do not hesitate to contact me.

Functionality

The following is a brief description of how the application works! Follow the steps below and get your new item!

Step #1

Check all the different items that are available for purchase.

Step #2

Add your the items to the cart and modify the quantity.

Step #3

Place your order and select your payment type and shipping address.

Step #4

As and Admin User, review the placed orders, update and create products.

Further Steps

New users can be created, and their profile updated as required. Orders for each user can be retrieved and modified to change their status.

Back to the top

ProjectStructure

The following is a set of diagrams that help explain how the Sahara store is being coded. The website is composed of a both of a front-end and a back-end. The front-end is created by using HTML, CSS and plain JavaScript, while the back-end uses Node, Express and MongoDB. There are three different databases that feed information to the front-end: The User, Order and Product database.

Project Diagram

The Sahara Store has a Front-End and a Back-End connected by an API file. The Main.js file within the Front-End portion contains all the functionalities and screens that are rendered on the browser. I’ll further explain this file below.

On the other hand, the Back-End is composed of the Server.js file that contains the paths from which the API file gathers the information that the user is looking for. Some requests require the type of user to be identified and authenticated. Those types of methods are found in the Utils file and then brought into the Server’s file REST requests.

An environment file is also created to hold important information in the form of variables that are then used in the Server file. These variables contain information regarding the MongoDB databases, the Paypal client and the token generation for each User that is used for authorization.

Front-End

The Front-End contains two main types of files: Components and Screens. Components are JavaScript files that provide support to the Screen files by containing code that render items within the Screens. The Screens are JavaScript files that render, like their name says, the screens that each user goes through by using the e-commerce website.

There are three different types of Screens that represent the different uses that they render. Product screens are those that display the different products that the user can use as well as the screens where you can place an order. User screens are those where you can create a new profile as well as update the current profile. Finally, the Dashboard screens are only available to administrator users. These screens showcase the different placed orders, the current items and the status of the databases.

Every time the user wants to purchase the items in their cart, the screens take that user through the different steps of placing the order. It is during this process, where the application authorizes the user account, requests the user’s shipping information and takes the user to the Paypal payment window.

Back-End

The Back-End contains both Routers and Models. Each model defines the schema and creates a database in MongoDB. Three different databases are created and these correspond to the Routers that contain the REST responses that deal with ther requests from the Front-End.