I was commissioned to build a simple website that allows admins to manage products, set featured products, and manage orders; as well as allow users/visitors to view and filter products, and create orders.
GUI of the Website
Muwebles offers a very clean look for the website, directing the focus of the users to the products themselves. The UI also aims to help give a “pristine” and “elegant” feeling to the visitors.
Functionalities
Authentication
Muwebles uses Firebase Auth because it offers easy authentication as well as throwing codes on error which can be caught. Error messages are automatically displayed depending on what went wrong, such as "User not found", "Password is incorrect", "Email is invalid", "Email is already in use", and "Password should be at least 6 characters.
Admin Features
Add/Remove Products
Admins have their own console, which can be accessed on /adminConsole.html. However, only those with admin privileges will be able to visit the site, Without admin privileges, the user will be redirected back to /index.html.
Admins are the only ones that can add a product, which consists of attributes shown below.
Below the “Add Products” section of the admin console, admins are able to see the list of all available products. This list automatically updates whenever a new product is added.
Admins may also remove a certain product, but be careful in doing so. Be sure to only remove products that have been mistakenly added.
See/Change Orders
On the “Orders” tab of the admin console, admins are able to see the list of all orders that have been created by users. This includes the Order ID, the User ID, the total cost of the order, the Payment Method, and the current status of the order.
Set/Unset Featured products
On the “Featured” tab of the admin console, admins are able to see the list of products that are currently set as “featured”. Featured products are shown on the featured section of the landing page. Here, admins may set any product as featured, or remove current featured products.
View Customer Appeals
Admins can see all the appeals made by users by going on the “Appeals” tab of the admin console. Here, admins can see the details of the appeal. They can also mark an appeal as “Settled” after having contact with the buyer. Appeals are some kind of comments/nudges made by customers in relation to their orders, such as delayed packages or request for return and refund.
Product Item Groups Management
Item groups are what dictates the category and type of a product. Examples of categories are chairs and tables, while types are more specific such as “Accent Chair”, “Sala Table”, “Study Table”, etc. These item groups are mainly used in filtering products on the search page.
Shop Features
Filter by name
On the upper portion of the shop, the search bar may be used to filter products according to name. Specifically, it matches the substring of a product, so a query of “lar lea” may show “circular leather-ish chair”.
Filter by price range
On the left portion of the shop, a sidebar contains two more ways for filtering your search query. The price range simply limits the shop to the minimum and maximum prices set.
Filter by type/item group
Under the price range limiter, still on the sidebar, the user can see all the current available types of furniture. These types can be set by the admin under ‘categories’ tab of the admin console. Users can filter their search query by clicking on the type of furniture that they want.
Filter by multiple
Of course, these filters can be combined altogether to create a more specific query. The sample below shows a shop being limited using the price range and the furniture type. Specifically, the shop would only show all ‘Accent Chairs’ between 1000 pesos to 3000 pesos, inclusive.
Cart Details
Personal details are automatically shown on the right side of the cart. These are taken from the details set by the user on their account page.
Account Update Details
Users can easily change their passwords by going to their account page.
Users can easily update their personal details by going to their account page.
Order Appeal
Users can send a complaint letter called as “appeal” by clicking on the button on the right side of their order, which will redirect them to the appeal page.
Payment Methods
Users have four (4) options for payment- Debig/Credit, Paypal, GCash, and COD. Debig/Credit and Paypal are both powered by Paypal but has only been tested in sandbox mode. Paypal API allows developers to integrate Paypal or Debit/Credit card transaction easily, so we’ve utilized this API to our advantage. The picture below shows Debit/Credit card being used to complete a transaction.
For the GCash option, a QR code is presented on the screen for the user to scan and pay directly. All transactions are not automatic and would need verification from the seller.