Skip to content

Latest commit

 

History

History
83 lines (51 loc) · 3.72 KB

README.md

File metadata and controls

83 lines (51 loc) · 3.72 KB
Raw

NOTE: To any who stumble onto this, this is sandbox project that I've been using to experiment with various Javascript and React-related goodies. It may or may not be live to play with in its current state at https://react-product-gallery.herokuapp.com/. The master branch reflects the starter template for the project intended as a take-home demo project. See solution for a completed implementation.

React Product Gallery

For this demo project, you will build a product gallery using React. The finished product should look visually similar to that of the provided mock ups as well as satisfy the requirements described the in the specs below.

  • The project consists of 2 primary screens: "Product Listing" and "Product Details".
  • The required JSON data is provided for you. See src/data.js.
  • You will not have to implement any HTTP requests to fetch the data. These are provided for you in src/requests.js as "fake" HTTP requests.
  • Your primary concern is to build the UI while consuming and displaying the data from the "fake" request functions which return promises resolving with the data.
  • The project is designed to be completed in roughly 4 hours.
  • Submit the project via email upon completion, providing a link to your project repository.

Instructions

The project boilerplate is based around create-react-app which means you don't have to worry about setting up any dependencies, build steps, boilerplate, etc... For additional information/instructions specific to create-react-app see https://github.com/facebookincubator/create-react-app#create-react-app-

  • Clone this repo
  • cd example-react-product-gallery and install dependencies via yarn install
  • Execute yarn start to begin the development server.
  • You should be able to reach the project at http://localhost:3000/

*yarn is interchangeable with npm throughout these instructions

Screen 01: Product Listing

This screen displays a listing of products along with various search and filter controls.

Screen: Gallery

Display Products

Display the appropriate products based on the current search and filter criteria.

Each product in the listing should be clickable to view the Product Details screen for that product.

Search Products

Search products via the text search input.

View Products by Category

Products are viewed by category. The categories should be listed in the sidebar.

Filter by Price

Filter products by min price and max price. Both fields being optional.

Screen 02: Product Details

This screen displays more detailed information about a single product.

Screen: Product Details

Modal

The product details view is displayed within a modal. The modal should be closable by clicking the "X" in the top right corner of the modal.

Utilizing the Prototype

See the prototype to view and inspect the design. This prototype is generated from the actual design files, so the code itself won't be much use to you. Feel free to use it for easily inspecting sizes, spacing, and colors.

To access the prototype:

  1. Clone this project to your local machine
  2. Open the prototype/index.html file in your browser

mockup/prototype

*Bonus Feature

Select one bonus feature to implement:

  • Add sorting options (e.g. sort by price lowest/highest).
  • Add alternative Product Listing view (e.g. List view)
  • Add to cart and display sub-total.
  • Paginate items.
  • Add tests.
  • Add a "Related Products" section to the Product Details page.