Build the hot sauce grid
Overview
Hello awesome candidate! You will be building the amazing hot sauce grid. The grid will contain tiles showing each hot sauce. Each tile will be clickable and navigate you to that hot sauce's details page. The details page will show the picture, title, description, and any additional details you would like to add to the hotsauces.json file. The goal of this project is to see how far you can go. We understand you may not be familiar with some of the required technologies and that’s okay. We want you to do the best you can.
We will be providing two mockup files that you will be basing your project on HotSauceDetailsPage.jpg, HotSauceGridPage.jpg. The mockup itself contains a design for the grid page and the details page. In this project is already a sample index.html file with some starter code to get going.
During the project you will be using a combination of JavaScript, ReactJS, JSON, CSS and HTML to construct the list.
Requirements
Use only JavaScript, ReactJs, CSS, and HTML. We would like if you would stick to these technologies only. We understand that libraries like jQuery and Bootstrap might feel easier to complete this project but let’s keep it simple and stick with HTML and CSS for laying out each page/view. On that same note please do not use other frameworks like Angular or Ember. These are great frameworks but for the this test we want you to do your best to use ReactJs.
Each hot sauce when clicked will take you to its respective details page. This is pretty self-explanatory but bonus points if you load the details of a hot sauce on the same page without traveling to a new html file/page.
The grid and details page must be backed by real data sourced from the hotsauce.json file provided. Let's load this file via an AJAX request at runtime, this could be bundled with webpack or something similar but more than often in the real world we load data from external sources that are not immediately available.
Able to remove hot sauce from the grid page Upon hover over a hot sauce on the grid page, a close button should appear on the top right corner of the tile. When clicked, this button will remove that hot sauce from the view. No need to update the original data source. You can use a CSS solution for the cross/close button. Bonus points if this feature is keyboard accessible.
Setup
This project requires Node JS installed on your system and after to run npm install in the project. We setup a super thin build script that allows you to view your project by running npm run-script start in the root directory.
Reminders
Remember to take your time and do the best you can. We would prefer you to try and do the best you can without asking any questions but if you absolutely stuck please feel free to email questions to your agency representative.
If you are getting this test before your in person interview, we will review it with you during the interview so please have it ready on the computer you bring in.
If you are getting this afterwards then we ask you zip up the project and send it back for review. After reviewing we will send our feedback via email.
Thank you for your interest in our team and good luck! :D