Code-Challenge submission for Darren Napier

.gitignore

@@ -0,0 +1 @@
+node_modules/

.prettierignore

@@ -0,0 +1,6 @@
+static/
+node_modules/
+fonts/
+css/
+images/
+vendor/

.prettierrc

@@ -0,0 +1,7 @@
+{
+  "singleQuote": true,
+  "arrowParens": "always",
+  "printWidth": 80,
+  "tabWidth": 2,
+  "bracketSpacing": true
+}

README -task.md

@@ -0,0 +1,31 @@
+# code-challenge
+
+### Welcome to the Whitebox Code Challenge!
+
+In this repo, you are given an HTML template for an e-commerce store. The store has only two pages: A main products list page (`product.html`), and a single product detail page (`product-detail.html`). Both pages contain all the HTML and CSS needed for this project and you can focus solely on the Javascript side of this challenge.
+
+Your goal, is to...
+
+1. Build a NodeJS server to serve some JSON data.
+2. Wire up both HTML pages to your new server.
+
+You may obtain the JSON data by using this url directly in your NodeJS Server code:
+https://next.json-generator.com/api/json/get/EkzBIUWNL
+
+### More specifically we are looking for you to meet the following requirements:
+
+1. Create a NodeJS Server that has 2 endpoints. GetMany should return the entire list of fake products. GetSingle should accept an ID, and return just that 1 product.
+
+2. Create an SPA which wires up the static HTML to your new server using the sample JSON (You can use (or not) any framework you are comfortable with).
+
+3. "Wire up" includes any search, sort, or filters you see on the page.
+
+4. The SPA should have 2 pages, a list all products, and an individual product page. Both HTML templates are provided.
+
+5. Delivery should be a separate github repo on your own account.
+
+### Tips
+- You should not need to modify the CSS.
+- For experienced developers we have seen this challenge take about 2 hours. For new developers we have seen this challenge take up to four hours.
+- Let me know if you have any questions or things you want clarified.
+- We are looking for your ability to use Javascript, your code style and structure, and your ability to follow the technical requirements listed in this readme.

README.md

@@ -1,31 +1,33 @@
-# code-challenge
+# Code Challenge
 
-### Welcome to the Whitebox Code Challenge!
+### E-Commerce Shopping...kind of
 
-In this repo, you are given an HTML template for an e-commerce store. The store has only two pages: A main products list page (`product.html`), and a single product detail page (`product-detail.html`). Both pages contain all the HTML and CSS needed for this project and you can focus solely on the Javascript side of this challenge.
+## To Run Application
 
-Your goal, is to...
+- yarn install
+- npm start
+- navigate to http://localhost:3000/GetMany
+- start shopping for nonsense?
 
-1. Build a NodeJS server to serve some JSON data.
-2. Wire up both HTML pages to your new server.
+## Coding Standards
 
-You may obtain the JSON data by using this url directly in your NodeJS Server code:
-https://next.json-generator.com/api/json/get/EkzBIUWNL
+- Clean code is the foundation to a maintainable and scalable codebase. I enjoy writing simple, human readable code that does not require too many comments.
 
-### More specifically we are looking for you to meet the following requirements:
+- Per the instructions, focused mainly on creating 2 endpoints on the server, and also focusing on the filter/sorting logic on the product.html page. I found that there was little, if any need, to provide filtering abilities to the product-detail.html page given the JSON data we are consuming, offered no features that could tie into this page (size, color, etc.)
 
-1. Create a NodeJS Server that has 2 endpoints. GetMany should return the entire list of fake products. GetSingle should accept an ID, and return just that 1 product.
+- I opted to go with Handlebars and serving up templated HTML for the following reasons:
+  1. During our conversation you talked a lot about automating tasks...Handlebars offered a great option to have it automate placing the JSON data as needed.
 
-2. Create an SPA which wires up the static HTML to your new server using the sample JSON (You can use (or not) any framework you are comfortable with).
+  2. I thought about doing a React App for the front-end, but given the role is specifically for a Javascript developer, I felt you wanted to see knowledge of DOM manipulation by serving up templated HTML and doing the rest on the front end (afterall, that is what makes Javascript as powerful as it is).
 
-3. "Wire up" includes any search, sort, or filters you see on the page.
+- Server logic
+  - Typically prefer to take the approach, depending on the backend design, of creating routers, and controllers specific to various endpoints. Since this only called for 2, pulling from the same data, opted to simply create one dataController to feed and return the responses to the front end. 
+  - As mentioned in the comments, opted to cache the image number from the first time the server made a call to the JSONdata, and then following made a call to get each item's image. Felt this was a necessity to ensure the consistency across the user experience. Please note, that this cache is not persistent so will reset images with a restart to the server. 
 
-4. The SPA should have 2 pages, a list all products, and an individual product page. Both HTML templates are provided.
 
-5. Delivery should be a separate github repo on your own account.
+## Misc.
+- Consolidated the assets into the public folder to handle the requests accordingly. 
+- Took the approach of functional programming, of building out functions that do one thing and do them well. 
+- Could have gone more in-depth on other functionality (showing divs, etc.), but based on our converation of not spending too much time, and more importantly following the tasks being asked (filtering logic) opted to submit the code that is included. 
+
 
-### Tips
-- You should not need to modify the CSS.
-- For experienced developers we have seen this challenge take about 2 hours. For new developers we have seen this challenge take up to four hours.
-- Let me know if you have any questions or things you want clarified.
-- We are looking for your ability to use Javascript, your code style and structure, and your ability to follow the technical requirements listed in this readme.

package.json

@@ -0,0 +1,34 @@
+{
+  "name": "code-challenge",
+  "version": "1.0.0",
+  "description": "ecommerce application ",
+  "main": "server.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "NODE_ENV=production node server/server.js",
+    "dev": "nodemon server/server.js",
+    "format": "prettier --write \"**/**.js\""
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/darrenCnapier/code-challenge.git"
+  },
+  "author": "Darren Napier",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/darrenCnapier/code-challenge/issues"
+  },
+  "homepage": "https://github.com/darrenCnapier/code-challenge#readme",
+  "dependencies": {
+    "body-parser": "^1.19.0",
+    "compression": "^1.7.4",
+    "cors": "^2.8.5",
+    "express": "^4.17.1",
+    "handlebars": "^4.7.6",
+    "node-fetch": "^2.6.0"
+  },
+  "devDependencies": {
+    "nodemon": "^2.0.3",
+    "prettier": "^2.0.5"
+  }
+}