Amazin - Client (Online Retail Clone)

Created by Talent Path's 'Quaran-Team' of full stack developers located in Atlanta, GA and Houston, TX.

Description:

The main goal of this project was to practice weekly agile sprints by creating an e-commerce product page(s) for 20 items in a very similar theme to the commonly known retail site Amazon. Each team member contributed to the database, the server, and the client for their own component to ensure a full understanding of a complete stack.

The server can be found here - GitHub Repo = https://github.com/NeelyAnne/server-Amazin .

Amazin is currently not deployed, but includes everything necessary for you to clone each repository and run the application locally, or a demo of the live site can be found in the YouTube link in the section below.

This project required us to create the foundation of our app from scratch, not utilizing code generators such as create-react-app. Amazin is written in JavaScript and is configured via webpack and package. json using node modules. We also limited the number of external libraries and frameworks as much as possible, and due to time constraints, some parts are just static mocks while others are fully dynamic.

Demo Link:

https://www.youtube.com/watch?v=kjp33e7CMuE&feature=youtu.be

My Personal Contribution:

My contribution to the Amazin application was the comparison grid chart that allows users to compare models of the same brand in order to choose the best product. This allows the users to compare things like price, color options, size, luxury, and a multitude of different categories that vary between different types of products. This table was created using Google's Material UI for React with mapping alterations to get the information to present in the correct order, and the images for each product are pulled from an Amazon S3 bucket. A picture of the table for a blender product has been included below.

Instructions for Use:

To run it locally:

(1.) Clone the repository

(2.) Open Terminal or your command line interface of choice and run 'npm install' to download any required node modules

• If you are unfamiliar with npm visit https://www.npmjs.com/get-npm

(3.) Next, run 'npm start' to open up a localhost version in your default web browser

• it should open to localhost:3000/

(4.) Browse

• Click on any of the product squares to go to that page

• hit the back button to return to our landing page

• or just add /singleItem/1 to the end of the url [localhost:3000/] to see our first item

(5.) (Optional) To see a specific page simply change the number at the end to any between 1 & 20

• e.g. localhost:3000/singleItem/5 or localhost:3000/singleItem/17

• Most things will not appear correctly without also having the server (link listed above) running.

(6.) (Optional) 'npm test' will run all the pre-written tests

Technologies:

• JavaScript
• NodeJS
• ReactJS
• HTML
• CSS
• WebPack
• Jest
• FontAwesome
• Material U/I
• Enzyme
• Bootstrap
• Babel

Model/Collections:

• Items
• Images
• Other
• Questions
• Answers
• Reviews
• Stars
• Product Variants
• URLs

The Quaran-Team consists of:

• Bilikis Orulebaja
  • https://github.com/borulebaja
• Brandt Campbell
  • https://github.com/Reboot82
• Brian Loveless
  • https://github.com/BrianLoveGa
• Juan Avalo-Santiago
  • https://github.com/avalojc
• Michal Terranova
  • https://github.com/mrterranova
• Neely Mann
  • https://github.com/NeelyAnne
• Trevor Taylor
  • https://github.com/Trevis42

Led by management team:

Fred Zirdung and Jothi Nedungadi

All rights reserved by Talent Path 2020 a division of Genuent.

https://talentpath.com/what-we-do/

https://genuent.com/