BENJ

Tech Stack

Table of Contents

1. Overview
   • Product Detail
   • Related Items & Outfit Creation
   • Questions & Answers
   • Ratings & Reviews
2. Installation
3. Usage
4. Contact

Overview

Project BENJ is an dynamic and responsive web application built using React and Node.js. The application showcases a range of products to potential customers, and facilitates a seamless shopping experience.

This project met the goals of designing a retail portal to implement the following mentioned features:

Product Details

• Product information

  • The Product Detail page provides essential information about the product, including the rating, category, title, price, overview, and social media links. This allows customers to quickly and easily make an informed decision about whether the product meets their needs.

  • The currently selected product and the style selected for that product will be dynamically rendered inside this component

• Image gallery

  • The Image gallery provides a smooth experience when navigating through images. Allowing image expansion and dynamic zoom functionality.

  • Clicking the current image opens an expanded view covering the pages width. From there another click will activate the zoom functionality with smooth mouse tracking.

• Style Selector

  • This component will guide the customer through finding the style combo they like, and display that specific product style in the image gallery.

• Checkout Form

  • The checkout allows the user to select from available sizes,from there they select from available quantities, and finally add the product to their cart.

  • If the proper selections are not made you will be prompted to delete them before adding the item to your cart

(back to top)

Related Items and Your Outfits

The Related Items & Your Outfits module will display two sets of Carousels with cards about the product. The first set, 'Related Items', will be a list of products determined internally, that are related to the product currently being shown in the overview. The second set, 'Your Outfits', will be a list custom created by the user with products which the user has added to the carousel themselves.

• Related Product
  • The related product list display products which have been associated with the current product by the company.
  • The product card itself will be clickable. Clicking the card will navigate to the detail page for that product.
  • The product card will also have a ☆ button, that opens up a modal.
    • Inside the modal will be a comparison of features with the clicked card, and current overview item.

• Your Outfit
  • The outfit list contain products which the user has selected to group together as an outfit.
  • the first card in this carousel is a custom card button, and when clicked will add the current overview product.
  • Each card is stored in the user's local storage, to ensure uniqueness and retains the list the reload.
  • Each card will have a a X button, that deletes the product from the users 'Your Outfits' list.

(back to top)

Questions and Answers

The Questions & Answers module allows asking, answering, and searching of questions for the product selected. The module contains the following components:

• View questions

  • The section displays up to 4 questions and 2 answers per question. Questions include helpfulness and report functionality.
  • Each answer includes the same functionality, with additional user and date information for the posted answer.
  • Clicking on the More Answered Questions button will expand the questions list to a scrollable list that includes the remaining questions.
  • Each question and it's corresponding answers can be marked as helpful or reported.

• Search for a question

  • The search bar in the section allows searching for specific questions.

• Asking a question

  • Clicking Add a Question will bring up a modal from with 3 fields: question body, nickname, and email.
  • All 3 fields are validaed using Formik and Yup and the cannot be submitted unless they are filled out.

• Answering a question

  • Clicking Add Answer will open a form modal with 3 fields: answer body, nickname, and email.
  • All 3 fields are validated using Formik and Yup and the cannot be submitted unless they are filled out.
  • An optional photo is allowed to be uploaded by clicking on the Upload Photo button. Up to 5 photos can be selected.

This component will extend the ability to view and search questions, ask questions, answer questions and provide feedback on questions about the current product.

(back to top)

Ratings and Reviews

The Ratings & Reviews module offers an interactive and user-friendly interface to display product reviews. With various features designed to streamline the user experience, the module allows easy sorting, filtering, and reading of reviews. The module encompasses the following functionalities:

• Reviews List:

  • Displays all available reviews for the user to read.
  • Sortable by helpfulness, relevance, or newest.
  • Filterable by text or rating given.

• Write new review

  • Utilizes Formik for form handling and Yup for schema validation.
  • Enables users to create a new review for the product.
  • Accessible through a button labeled "write a review" at the bottom of the page.

• Rating Breakdown:

  • Showcases the product's average rating and a distribution graph of ratings.
    • Enables filtering of the review list by specific ratings through click/touch interactions.

• Product Breakdown:

  • Displays the average feedback received for all relevant product characteristics

(back to top)

Usage

The primary goal of this repository was to provide an educational platform for our team of developers to practice building a React application utilizing a microservice architecture. The project involved collaborative work between three other engineers to ensure a robust and well-designed application. By working on this project, we gained valuable experience in developing and deploying microservices in a real-world application using git workflow.

Installation

1. Create Github personal access token here with repo permission, at the least.

2. Create a Cloudinary account here. Once you login, you should have a dashboard tab on the left. Copy the API Environment variable in that tab.

3. Fork and clone this repo, then open the terminal and navigate to the project root directory.

4. Copy the provided .env.example and rename it to .env. Insert your GitHub token and Cloudinary api string.

API_KEY=This is your GitHub
CLOUDINARY_URL=This is the Cloudinary string
URL=This is the URL for the server (by default localhost:3000)

5. In the terminal run the following scripts:

npm install
npm run b
npm start

6. Navigate to localhost:3000 in the browser.

(back to top)

Contact

Creators:

Brennin Joiner

Jae Hoon Lee

Ermin Sljivo

Natale Toscano

(back to top)