Electric Guitar Shopping Aggregator

Sorry, no products on this page for that retailer.
Page of 11

How it's Made

I fully realize that this is not some impressive architecture or UX right now and that some developers would be deeply triggered and/or offended at a lot of it 😂. I cut corners where it didn't matter to me and didn't contribute much to the goal. Cleanup will happen, however 😉. I also realize this would not scale easily without some enhancements. I am simply putting my money where my mouth is when it comes to JS bloat and building things simply. It demonstrates accomplishing some common asks of business in a web app as simply as possible. You can see the performance of the super low-code implementation. Another goal was to see just how quickly I could build something from scratch using the bare minimum npm modules. A compare tool and other additions are upcoming.

Back End

I have a cron-job on the ExpressJS Web Service to fetch Amazon data using Canopy every 24 hours. In order to show data aggregation across retailers, I scraped Guitar Center for some products and put them in the DB. When the page is requested, the products are retrieved from a route, merged/sorted, and chunked, with the first 18 rendered in page, a common ask for SEO purposes.

Front End

No Framework. Plain JS & CSS.

The entire JSON product list is fetched and put in a script tag. The bare-bones paginator is populated according to the chunks and total list. When the paginator is used, the appropriate product chunk is retrieved from the JSON, templated with simple string interploation and the innerHTML is replaced in the product grid wrapper.

Compare Guitars