Shazamazon Q&A is one component of a full stack, responsive, e-commerce portal delivered as an app built on microservices architecture, and inspired by Amazon.
It was built as part of a e-commerce product page MVP but can be used as a stand-alone product questions&answers component or combined with other services/components to create a full e-commerce site.
In addition to the Q&A section, I also developed this proxy to bring all the distributed microservices together, whose developers are listed below.
Q&A service and proxy developed by Jibbscript, other components to the full e-commerce site devloped by:
jkcryptolock - Cart and Footer
SeanMcCarthy3223 - NavBar and Search
JeffSalinas - Carousel
Jibbscript - Q&A
jxkim - Product Images
ArohanD - Product Ratings
wiggitywhitney - Product Description
Shazamazon Cart Service was built primarily with ReactJS on the front end, Node/Express on the backend, and MongoDB for the database.
Some unexpected issues I ran into while building this app:
-
Replicating Amazon's styling in Vanilla CSS and React.js without the use of pre-built component libraries.
-
Deciding whether to use a broadcast channel, or custom event dispatch and listeners for
- As a User, I should be able to see the questions asked of the current product.
- As a User, I should be able to see the corresponding answers to each product question.
- As a User, I should be able to expand the list of viewable questions/answers.
- As a User, I should be able to upvote or downvote questions/answers.
- As a User, I should be able be able to see the current number of questions answered for the current product on the Product Description.
The MVP of the app displays all questions and answers with the ability to vote on each. The MVP displays a mock search-bar for Q&A filtering and renders Q&As based on the current product being viewed.
Behind the scenes, the app collects data from each product page in the form of questions, answers, and their authors and stores the data in Mongo, thereby enabling querying based upon the current product id.
When imported as a script to a page and given a div with an ID of 'qa-app', Shazamazon QA renders a complete Q&A section to the page via React.js
It also communicates to the Product Description by sending the current quantity of questions stored for the current Product on page reload, which updates the number of questions displayed in the Product Description.
The proxy imports the javascript and css files for each microservice from their respective EC2 instance 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 view for each component.