shopr - your online wishlist

shopr is a web app pertaining to e-commerce that allows users to collect and manage an online shopping list. This solution serves as an organizatal tool to alleviate the clutter of maintaining web links and product information in basic note taking or text editor software. shopr is a platform dedicated to simplifying the online shopping experience through providing a minimalistic interface that supports basic actions and a central storage location so that information never gets lost.

Users can add shopping items to their wishlist with an associated external link to help track specific locations on the web. By clicking on wishlist items users can navigate to the associated Internet destination. The app also encourages users to select a rating for each item based on desire (where 5 stars represents the most desirable items). The wishlist is then sorted based on ratings and the top 3 most desired items are displayed in a Favorites section. The remainder of the wishlist is stored in a table below the Favorites panel. Here users can update and delete existing records.

https://a2-benemrick.glitch.me

Technical Achievements

• Javascript Functionality: I implemented several features utilizing client and server-side javascript to interact with various components of the application. On the client-side I wrote functions to retrieve server-side data and display the appropriate UI components to the view. I also developed a dynamic mechanism for calculating the amount of star icons to display based on the rating field present on the data record. On the server-side I implemented the basic logic to handle several different types of HTTP requests. I also implemented a simple algorithm to sort the data array based on the rating field. In the case where rating are equal, priority is then deferred to the price (usd) value where lesser prices will be regarded as more preferable.

Design/Evaluation Achievements

• Bootstrap: I integrated the Bootstrap CDN (https://getbootstrap.com/) into shopr in order to deliver aesthetically pleasing and highly accessible UI components. I utilized a collection of UI elements including a card-deck for the Favorites panel and table-borderless for the full Wishlist view. I implemented the add and update forms with Boostrap modals, which takes advantage of built in HTML, CSS and Javascript.
• Font Awesome: I used the Font Awesome CDN (https://fontawesome.com/?from=io) kit to incorporate multiple icons into the view. The icons represent actionable items that the user can engage in. The use of icons is consistent with a minimal and efficient UI and also provides a unifying structure throughout the view.
• Google Fonts: I chose to employ a single font throughout shopr. This site is using Roboto, which is available through embedding the font from Google Fonts (https://fonts.google.com/) and specifying font-family: 'Roboto', sans-serif; in style.css.