Frontend Structure
The home page features several key components designed to provide users with comprehensive insights into MFLG products and their pricing dynamics. It begins with an introductory section, followed by a search bar and a table displaying an overview of MFLG products, including price bars and the corresponding alert levels.
Regarding the search functionality, a simple regex function was implemented to facilitate efficient searching, with the search results featuring hyperlinks that direct users to the respective product pages for further exploration.
To enhance the intuitiveness of the alert dashboard, the alert levels are organised in descending order of urgency, with colour coding employed for easy identification. Red indicates products requiring immediate attention due to significant deviations from the optimal price range, while yellow serves as a cautionary signal, and green signifies products within a safe price range.
Overall, the alert dashboard empowers users with real-time insights into MFLG pricing performance relative to its peers, enabling swift action and informed decision-making to optimise pricing strategies and ensure competitiveness in the market.
The product page presented is a React component designed to display details about a specific product, including its image, description, price, and similar products. The component fetches data asynchronously from an API using fetchProduct and fetchAnalytics functions.
The objective of this tech report is to review the implementation of the product page, identify areas for optimization, and propose improvements to enhance performance, readability, and maintainability.
Use of useEffect: The useEffect hook is used to fetch product details and analytics data when the productId changes. This ensures that data is fetched only when necessary, reducing unnecessary API calls.
Rendering: Product details are rendered conditionally, ensuring that the UI doesn't break if the product data is not available.
Similar Products: Similar products are fetched based on analytics data, and links to these products are displayed in a list.
PriceBar Component: There is a commented-out PriceBar component that seems to be intended to display a price comparison bar. Currently, it is not being used.
The price bar comprises a slider, optimised price display, and a boxplot.
The blue slider at the top allows users to determine the percentile in which the targeted product should stand in the current market. If the user prefers their product to be a more affordable product, they can drag and choose a lower percentile, and vice versa.
Next to the slider is a display for the optimised price, the value of the optimised price changes after users determine the percentile on the slider and click the “Show optimised price” button, giving them an immediate view of the price.
Moving on to the boxplot, it displays the overall distribution of prices for the targeted MFLG product and competitors’ products similar to it. For users to better understand the products, the product and price are displayed upon hovering. Additionally, jittering is added to plots for current price plots, represented by blue dots, to ensure that there is no overlapping in the boxplot.
Overall, the price bar showcases an overview of the distribution of prices in the market to aid users in determining the most optimal price.
The image carousel component provided is a React component designed to display a list of products in a slider format. Users can navigate through the products using navigation buttons.
The objective of this tech report is to review the implementation of the image carousel component, identify its strengths and areas for improvement, and propose suggestions for enhancing its functionality and performance.
Data Fetching: Product data is fetched asynchronously from the API using the fetchProducts function. This ensures that product information is dynamically loaded into the carousel.
Slider Implementation: The slider functionality is implemented using plain JavaScript DOM manipulation. It allows users to navigate between products by clicking on the navigation buttons.
Dynamic Rendering: Product details, including image, name, and description, are dynamically rendered within each slider item. This provides users with a comprehensive view of the products.
CSS Styling: CSS styles are applied to create an attractive and user-friendly carousel layout. The use of background images for each slider item enhances visual appeal.
Sign In / Out - Sign in and sign out is done using google authentication. Only authorised google accounts listed by admin in google developer console will be allowed access.
Navigation Bar - Bar with buttons to navigate to different pages as well as to sign out.
Error Page - Prompts users to proceed back to the home page should they try to access an unknown page.