Gnicchi is a mock front-end webstore created for our Hack Reactor Front End Capstone Project.
Report Bug
·
Request Feature
Table of Contents
Our team was tasked with creating a mock front-end webstore using a provided black box database. Main features of the website include the product overview section, related products & your outfit section, questions & answers section, and th ratings & reviews section. We go into detail about each of these website features below.
The main entry point of the page, this section shows the current product, and allows the user to browse through photos of the product, zoom in on the photos, look at the product's different styles, see the prices and description, and add the product to their cart.
The Overview's current product informs all of the other widgets and changes based on the user's selection in the Related Products & "Your Outfit" widget, and the user's selection in the style selector component.
The version of the cart in this repo is for demo purposes only, but it could be modified for functionality.
This is the section of site where product collections are displayed:
first: a carousel of products that are related to the current product,
second: a carousel of the user's own selected products that they add to or remove from their "Outfit" collection if they choose.
By clicking on the Related Product of their choice, the user navigates to that product's page. This action updates all other widgets to display the data for the product selected.
The action button on each Related Product's card shows a Comparing modal that displays the current product's characteristics next to those of that particular related product.
Section of store webpage for users to ask and answer questions regarding a certain product. Users will see up to 2 questions with up to 2 answers each loaded by default and depending on how many questions & answers there are.
At the top of the section there is a search bar to filter the list of questions based on user input, and the filtering of the list only takes place after at least 3 characters have been input, resetting to original list if there are less than 3 characters input.
Users can also extend the questions list using the more questions button which will add 2 questions to the end of the list and disappear if there are no more questions to load. The see more answers link should extend to show all answers and change text to collapse list when fully extended, and reset back to the condensed list when collapse list is clicked. Within the list users can mark questions or answers as helpful and report them to remove unhelpful questions/answers from the list.
To add a question or answer, modals will popup when the respective button/link is clicked that opens a form for user to input their question or answer. The form will validate inputs to ensure mandatory fields are filled in, emails are entered in the correct format, and not more than 5 photos are uploaded. If it passes the validation check the form inputs will be coalesced and posted to the black box and returned on any subsequent gets of the respective list.
This widget contains three main parts. The left-hand side shows the overall rating, as well as a breakdown of the ratings from all the reviews. Clicking on a rating allows the user to filter reviews by that star value. This section also shows the average scores for different characteristics of the item.
The right-hand side shows a list of reviews that can be sorted in three different ways. Each review can be given a helpful vote or be reported. If a review has pictures, the user can click on a thumbnail to open the image in a modal.
Finally, users have the ability to add new reviews to products by filling out a review form which opens in a modal. The user can give their rating, score different characteristics, add extra info and up to five images.
- Express
- React
- Node
To get a local copy of Gnicchi up and running follow these simple steps.
- node
- npm
npm install npm@latest -g
Requires a Hack Reactor accepted email to access the API
- Get a Github Personal Access Token from [https://github.com/settings/tokens][https://github.com/settings/tokens]
- Fork the repo
- Clone the repo
git clone https://github.com/Nugget-Reactor/FEC.git
- Install NPM packages
npm install
- Copy the exampleConfig.js and rename it config.js
- Enter your API key in
server/Controllers/env/config.js'Authorization': 'INSERT GIT KEY HERE'
🎓 All participants in this project are students in the Hack Reactor Bootcamp @ Hack Reactor
👦 Jonah Choi
LinkedIn: @jonah-choii
GitHub: @jonahchoi
👦 Ahmed Hanafy
LinkedIn: @ahmed-hanafy9
GitHub: @AhmedHanafy9
👩 Tessa Thornberry
LinkedIn: @theresa-thornberry
GitHub: @tessathornberry
👦 Curtis Wang
LinkedIn: @curtis-wang
GitHub: @cwang1014