Shazamazon Navigation Bar is a full stack, responsive, e-commerce navigation service delivered as a microservice, inspired by Amazon.
It was built as part of a e-commerce product page MVP but can be used as a stand-alone navingation tool or combined with other services/components to create a full e-commerce site.
In addition to the navigation and search bar, I also developed this proxy to bring all the distributed microservices together, whose developers you can see below.
Part 1
Part 2
Cart service and proxy developed by jkcryptolock, other components to the full e-commerce site devloped by:
jkcryptolock - Cart and Footer
JeffSalinas - Carousel
Jibbscript - Q&A
jxkim - Product Images
ArohanD - Product Ratings
wiggitywhitney - Product Description
Shazamazon Navigation Service was built primarily with ReactJS on the front end, Node/Express on the backend, and MongoDB for the database. The entire service was also styled after Amazon's official styling using entirely vanilla CSS.
Some unexpected issues I ran into while building this app:
-
Utilizing Regular Expressions to create a partial string matching fuzzy search from scratch.
-
Deciding whether to use a broadcast channel, or custom event dispatch and listeners to get microservices to communicate.
-
Matching exact Amazon styling without using a CSS framework.
-
Reconciling different CSS configurations for each component, to get them to all display correctly via the proxy server.
- As a User, I should be able to search for any product.
- As a User, I should be able to refine my search by selecting a relavant category
- As a User, I should be able to add the item to my cart, and have it communicated to the NavBar.
The MVP of the app allows users to search between different products, refining by category and keyword.
Behind the scenes, the app takes in products, prices, and sellers, stores them in Mongo, and creates a query based upon the current product id.
When imported as a script to a page and given a div with an ID of 'nav-app', Shazamazon Navigation Bar renders a complete top nav section to the page via React.
It also communicates to the other microservices by sending the currently selected product ID when an item is selected, which updates the other services to displaay the current product.
The proxy imports the javascript and css files for each microservice from their respective EC2 servers, and inserts them into a single HTML page based upon their React div ids. Custom Events are created and dispatched to individual event listeners in each component to update the product for each component.