Scott Lindquist FE Challenge

README.md

@@ -1,80 +1,26 @@
-# AJ Madison Front-end Engineer Coding Test
+# AJ Madison Coding Challenge
 
-Be sure to read **all** of this document carefully, and follow the guidelines within.
 
-## Context
+## My approach
 
-Use HTML, CSS, and JavaScript to implement the following mock-up.  The sort and filtering on mobile is bonus
+I started this project by identifying the major components on the page, which I determined to be the Header with text, the Selection controls, and then the ProductList, populated with Products.
 
-> [Source Figma file](https://www.figma.com/file/864G1U99suRA6O5DHPwdqG/Coding-Test?node-id=0%3A1)
+I wanted to keep components as dumb as possible, so I made the call to the API at the top level and then passed down the product array as a prop after capturing it in state. Another way to do this would have been to use the UseEffect hook in ProductList to make the call, but because I planned to later add methods connected to the Selection components that would modify the product array, I decided to centralize state at the App level.
 
-You will need to leverage our API for 'appliance packages' to fill in the details and functionality as described below. Complete as much of this assignment as you can within a three and a half hour time period. 
-**The look and feel is more important than the functionality, so if you feel that the sorting and filtering logic will take too long, just start with static data, it doesn't have to work**
+I prioritzed mimicking the desktop mock up first and then planned to tweak the Selection component to respond to mobile viewports. I would use media queries to change the Selection component to a single button that on click could mount a modal for filtering and sorting when on tablet or a phone.
 
-Use the Figma file to see button states, colors, and responsive design.  You should be sure to complete the test to mimic the design as seen.
+## Libraries
 
+Originally I chose to use the node-sass package out of habit, but because I adopted the css module pattern, I found that I didn't need to rely on nesting or other features Sass provides, so I removed the node-sass package.
 
-## Requirements
+With more time for this challenge, I would have added unit tests with the Jest library.
 
-### Appliance Packages API
+## Improvements
 
-We'll email the API endpoint to you 
+While I focused most of my time on mimicking the mock up design, in the future I would like to add the methods that would handle the sorting and filtering of the data. I would create these methods at the App level so they could easily interact with the state and pass the methods down to elements as props. 
 
-### Page Structure
+I would also improve the logic that determines the price displayed. Right now it is rounded to the tenth, but because these are products that are consumer facing, rounding to the nearest cent would be a better solution.
 
-```
-Main
-  - Filter navigation
-    - Select Appliances ( dropdown with checkbox ) - should filter packages where the any of the items -> ~product_type equals selected category  
-      - Values: Cooktop, Dishwasher, Microwave, Range, Range Hood, Refrigerator, Wall Oven  
-    - Sort By ( dropdown ) - should contain two options , highest price and lowest price
-    - Delivery Method ( toggle ) - show filter by items where 'is_quick_ship` is true
-  - Section
-    - Appliance Package
-      - Image (final URL will be "https://assets.ajmadison.com/[image->folder]/[image->filename].jpg)
-      - Description ( [brand] [series] [description] ) (you might want to concatentate after three lines)
-      - Quick Ship ( is_quick_ship (icon in repo) )
-      - Price ( [prices->final] )
-      - List Price  ( [prices->list_price] )
-      - Discount ( [prices->list_price] - [prices->final] )
-      - View Package Button ( "https://ajmadison.com[url] )
-```
+Another improvement the app should have is proper truncation of description titles. Currently the descriptions are truncated after 3 lines, but if I were working with a designer, I could imagine the designer asking for elipses where descriptions were too long so the text isn't cut off.
 
-### Tech stack
-
-- JS oriented
-  - Use **React**.
-  - Feel free to use NextJS or CRA
-- Feel free to use a preprocessor like SASS/SCSS/Less but _do not_ use any CSS frameworks or libraries. Bonus points for PostCSS / CSS Modules / CSS in JS
-
-### Bonus
-
-- Sort and filtering on mobile included in Figma comp.
-- Implement the Show More feature.
-- Write clear **documentation** on how the app was designed and how to run the code.
-- Provide proper unit tests.
-- Provide components in [Storybook](https://storybook.js.org) with tests.
-- Provide an online demo of the application.
-- Include subtle animations to focus attention
-- Describe optimization opportunities when you conclude
-
-## What We Care About
-
-Look and feel + code method/style. Use any libraries that you would normally use if this were a real production App. We're interested in your code & the way you solve the problem, not how well you can use a particular library or feature. 
-
-_We're interested in your method and how you approach the problem just as much as we're interested in the end result._
-
-Here's what you should strive for:
-
-- Good use of current HTML, CSS, and JavaScript & performance best practices.
-- Extensible code.
-
-## Q&A
-
-> Where should I send back the result when I'm done?
-
-Fork this repo and send us a pull request when you think you are done. There is no deadline for this task unless otherwise noted to you directly.
-
-> What if I have a question?
-
-Just email nate@ajmadison.com
+With more time, I would also perform an accessibility audit using my computer's screen reader, and I would doublecheck that I could easily tab through all the Selection options as well as each product thumbnail.