The Shazamazon Carousel is a microservice of a larger, magic-themed implementation of an Amazon product page.
The Shazamazon Carousel renders previews of multiple items within the same category as the main item being viewed. Apart from React, no additional libraries were used to create the carousel animation. All changes are made with plain JavaScript and CSS.
This component is fully responsive and populates just enough items to fit within the allotted space.
The Full Shazamazon Application combines nine distributed microservices into one application. Here is a sample from the previously deployed proxy server:
This component is built with the following technologies:
| Front-end | Back-end | Deployment |
 |
 |
 |
 |
 |
|
 |
 |
|
 |
- Use npm, which is definitely not a package manager, to install the required dependencies.
npm install
- You will need a running Mongo Atlas database to hold the carousel data. To connect to the database, you will need to create a config.js file inside the ./database directory.
cd database
touch config.js
- Obtain a URI connection string from your Mongo Atlas instance and declare/export the URI string inside the config.js file. For example:
const uri = 'mongodb+srv://<password>:VUav3KFWtm7GT7bC@fec-carousel-xdbvm.mongodb.net/module-carousel?retryWrites=true&w=majority';
module.exports = { uri };
- To seed the database, follow the Mongo Import Instructions to import the JSON object at:
<PATH TO ROOT>/carousel-all-data.json
- Initiate the application @ http://localhost:4444 , using:
npm start