This video is a walkthrough of our final website that explains how our team built this website.
Deliverables:
Figma design, prototype, and a fully built website that is editable to manage products with HTML, CSS, JavaScript, and Python.
Framework: Vanilla JS
Features Implemented:
English and Arabic support for a better user experience by removing any language barrier for the target audience, which is in the Middle East.
Smart product filters to quickly browse by brand, with an option to reset and view all products.
Search bar that finds products by name, brand, ID, or even partial text.
Automatic currency conversion with daily exchange rates so prices stay accurate.
Simple product management through a Python (Tkinter) interface where you can easily add, edit, or remove products.
Built-in price calculator that automatically calculates selling price from cost and profit margin, saving time and avoiding manual calculations.
Home page
Note: these are not real products used only for samples and testing. it's editable
This GUI cannot be seen in the frontend website.
Note: The GUI shown in the image uses a demo dataset and not the company’s actual product data.
This Python-based backend GUI (built with Tkinter) allows easy product management for the website. You can add, edit, or remove products and save changes directly.
It also includes a built-in price calculator:
Enter cost price and profit margin (%) → it automatically calculates the selling price.
Or enter cost price and selling price → it calculates the profit percentage when saving.
This removes the need for a separate calculator and makes updating product pricing faster and more convenient.
I had contributed as the Lead web developer to build a website for a Dubai-based wholesaler that distributes auto parts in Dubai, UAE. Website supports Arabic