Initial commit, Candidate Decisions Started

Author: kerryboyko

.gitignore

@@ -0,0 +1,21 @@
+# See https://help.github.com/ignore-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

README.md

@@ -0,0 +1,82 @@
+# Publicis.Sapient Front End Senior Associate Test
+
+## Introduction
+This is a standard test where we expect the developer to respond to several aspects:
+
+1. Ensure the output reflects your understanding of the best current technology
+2. Use of modular JavaScript patterns and/or a JS framework (e.g. Angular, Polymer, React, etc.) to build the necessary functionality
+3. Show how a user interface can operate in different contexts 
+3. Demonstrate your approach to using an API to retrieve data and content
+4. Demonstrate your ability to deliver and enforce high code quality and maintainability
+5. We'd like to see how you use Git in your workflow
+6. Where possible to provide nice flourishes to demonstrate a flair
+
+## Example of what you will be building
+
+### Mobile
+![Carousel Test Example Mobile](./carousel-mobile.png)
+### Desktop
+![Carousel Test Example Desktop](./carousel-desktop.png)
+
+## Brief
+Using the image above as a reference build a mobile-first carousel widget that cycles through six images via the `prev` and `next` buttons. These are styled differently depending on the viewport size.
+
+To obtain the images please use our Pixabay account, details below. Once they are available to the app load them into the carousel and enable the functionality for the buttons.
+
+Feel free to use whatever tools seem most appropriate for managing styles.
+
+Please do not spend more than three hours on this test. **It's not important to complete the code** in the time that you have, but it is important that you are able to demonstrate your thinking via documentation and additional information.
+
+We do not expect a high amount of unit test coverage for this project given the short timeframe. However, we are keen to see tests for the most important functions.
+
+Keep the carousel itself quite simple in terms of how it responds; it doesn't need to snap. Concentrate on the quality of the code.
+
+## Pixabay API
+API url `https://pixabay.com/api/`
+API key: `9656065-a4094594c34f9ac14c7fc4c39`
+Documentation: `https://pixabay.com/api/docs/`
+Example search: `https://pixabay.com/api/?key=9656065-a4094594c34f9ac14c7fc4c39&q=beautiful+landscape&image_type=photo`
+This will return an object with a `hits` property, which will be an array of images. Relevant properties in the request result are:
+`hits[0].imageURL` 
+`hits[0].user` 
+`hits[0].likes`
+
+### Typeface
+Use `Ropa Sans` as the typeface for the text, which is available through [Google Fonts here](https://fonts.google.com/specimen/Ropa+Sans)
+
+### Images
+Use the SVG included in this directory for the arrow icons
+
+![arrow](./arrow.svg)
+
+## How it should work
+* The 'active' carousel item is always centred in its container
+* When you click the `prev` button, it should centre the previous item
+* When you click the `next` button, it should centre the next item
+* As you scale up the browser window more of the carousel becomes visible
+* It should run in the last two versions of Chrome, Firefox, Safari and Edge
+
+## Evaluation criteria
+We will assess your work on the following basis:
+
+* Code structure, quality and consistency
+* Technology choices
+* Accessibility
+* Cross browser compatibility 
+* Responsiveness
+* Attention to detail
+* Clear documentation
+* Dependency management
+* Test quality
+* Git commit history
+
+
+## Rules
+* You can install any core library you like (e.g. React, Angular, Vue, etc.) **BUT…**
+* Please **DO NOT** use a 3rd party carousel plugin - we want to see your JS skills
+
+### Git
+Please initialise a new git repository and commit your changes whenever you feel necessary. We will review your git commit history log.
+
+# Conclusion
+When you've finished, please zip up the repository and email it to your Publicis.Sapient hiring contact.

doc/README.md

@@ -0,0 +1,82 @@
+# Publicis.Sapient Front End Senior Associate Test
+
+## Introduction
+This is a standard test where we expect the developer to respond to several aspects:
+
+1. Ensure the output reflects your understanding of the best current technology
+2. Use of modular JavaScript patterns and/or a JS framework (e.g. Angular, Polymer, React, etc.) to build the necessary functionality
+3. Show how a user interface can operate in different contexts 
+3. Demonstrate your approach to using an API to retrieve data and content
+4. Demonstrate your ability to deliver and enforce high code quality and maintainability
+5. We'd like to see how you use Git in your workflow
+6. Where possible to provide nice flourishes to demonstrate a flair
+
+## Example of what you will be building
+
+### Mobile
+![Carousel Test Example Mobile](./carousel-mobile.png)
+### Desktop
+![Carousel Test Example Desktop](./carousel-desktop.png)
+
+## Brief
+Using the image above as a reference build a mobile-first carousel widget that cycles through six images via the `prev` and `next` buttons. These are styled differently depending on the viewport size.
+
+To obtain the images please use our Pixabay account, details below. Once they are available to the app load them into the carousel and enable the functionality for the buttons.
+
+Feel free to use whatever tools seem most appropriate for managing styles.
+
+Please do not spend more than three hours on this test. **It's not important to complete the code** in the time that you have, but it is important that you are able to demonstrate your thinking via documentation and additional information.
+
+We do not expect a high amount of unit test coverage for this project given the short timeframe. However, we are keen to see tests for the most important functions.
+
+Keep the carousel itself quite simple in terms of how it responds; it doesn't need to snap. Concentrate on the quality of the code.
+
+## Pixabay API
+API url `https://pixabay.com/api/`
+API key: `9656065-a4094594c34f9ac14c7fc4c39`
+Documentation: `https://pixabay.com/api/docs/`
+Example search: `https://pixabay.com/api/?key=9656065-a4094594c34f9ac14c7fc4c39&q=beautiful+landscape&image_type=photo`
+This will return an object with a `hits` property, which will be an array of images. Relevant properties in the request result are:
+`hits[0].imageURL` 
+`hits[0].user` 
+`hits[0].likes`
+
+### Typeface
+Use `Ropa Sans` as the typeface for the text, which is available through [Google Fonts here](https://fonts.google.com/specimen/Ropa+Sans)
+
+### Images
+Use the SVG included in this directory for the arrow icons
+
+![arrow](./arrow.svg)
+
+## How it should work
+* The 'active' carousel item is always centred in its container
+* When you click the `prev` button, it should centre the previous item
+* When you click the `next` button, it should centre the next item
+* As you scale up the browser window more of the carousel becomes visible
+* It should run in the last two versions of Chrome, Firefox, Safari and Edge
+
+## Evaluation criteria
+We will assess your work on the following basis:
+
+* Code structure, quality and consistency
+* Technology choices
+* Accessibility
+* Cross browser compatibility 
+* Responsiveness
+* Attention to detail
+* Clear documentation
+* Dependency management
+* Test quality
+* Git commit history
+
+
+## Rules
+* You can install any core library you like (e.g. React, Angular, Vue, etc.) **BUT…**
+* Please **DO NOT** use a 3rd party carousel plugin - we want to see your JS skills
+
+### Git
+Please initialise a new git repository and commit your changes whenever you feel necessary. We will review your git commit history log.
+
+# Conclusion
+When you've finished, please zip up the repository and email it to your Publicis.Sapient hiring contact.

doc/arrow.svg

@@ -0,0 +1,53 @@
+# Brian Boyko
+## Candidate Decision Making Process Notes
+
+Hello. In order to give you an idea of my thought process during this code challenge, I will be providing notes in this document. 
+
+This repository was created with Create-React-App, using the ts-scripts to add typescript support.  
+
+## Initial decisions:
+
+## Libraries chosen (and why): 
+
+* Language: *Typescript*
+
+  When possible, I like to use Typescript instead of standard Javascript. There is a time tradeoff in setup, but with good tooling and linters, you can catch potential errors before you build.  This is not a hard requirement but one which I think makes sense for this project. 
+
+* Framework: *React/Redux* 
+
+  Because the position is primarily going to be working with React, I will be using that as my front-end framework.  However, the scope of this project does not necessarily require an entire front-end framework.  Nor would it require the use of Redux - however, I imagine you will want to see me make use of a state manager. 
+
+* Unit Testing: *Jest*
+
+  I've used Mocha, but Jest is really designed for mocking APIs and handling promises elegantly. I like that you can put your test files alongside your source code, as that allows you to have at-a-glance visibility into what features and functions have test coverage.  100% coverage is not always feasible (and usually neither required nor desired) but the key areas to test would be the API code and the state manager. 
+
+* Client-Side Ajax: *Superagent*
+
+  There are a number of libraries for making API calls, Superagent for me has always been simple and straightforward, although I've used others, such as fetch and axios. 
+
+* Package Manager: *Yarn*
+
+  Yarn is fundimentally the same in practice as NPM, but allows you to download packages to your hard drive, saving install time. 
+
+* Styles: *Sass* and *Aphrodite*
+
+  Through Webpack, I can easily add Sass as any other dependency to the project. But since the project requires interactivity and the CSS used will likely depend on state, as a backup, *Aphrodite* will serve as a CSS-in-JS solution.  
+
+## Architecture
+
+Here's the architecture pattern I like to use.  I like to think of the application as a ziggurat - built in layers, with these rules. 
+
+* A lower layer should have no dependencies upon a higher layer. 
+* No layer should mutate the state of another layer except by calling provided exposed functions (Kind of like object-oriented encapsulation, but across a number of classes.) 
+* Lower layers should propagate information about the application state to the higher layers, and provide callbacks that the higher level layers can call to change state. 
+
+For this application, I'm choosing this structure: 
+
+```
+------ Structure/Styling (HTML/CSS); 
+----- Stateless Components (Takes props, outputs JSX)
+---- Containers (Local application state, interface with redux)
+--- State Manager (Redux)
+-- Framework (React base)
+- API Interface Library (SuperAgent)
+```

doc/candidate_decisions.md

@@ -0,0 +1,7 @@
+declare module '*.svg'
+declare module '*.png'
+declare module '*.jpg'
+declare module '*.jpeg'
+declare module '*.gif'
+declare module '*.bmp'
+declare module '*.tiff'

doc/carousel-desktop.png

@@ -0,0 +1,25 @@
+{
+  "name": "sapient-carousel",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "react": "^16.6.3",
+    "react-dom": "^16.6.3",
+    "react-scripts-ts": "3.1.0",
+    "superagent": "^4.0.0"
+  },
+  "scripts": {
+    "start": "react-scripts-ts start",
+    "build": "react-scripts-ts build",
+    "test": "react-scripts-ts test --env=jsdom",
+    "eject": "react-scripts-ts eject"
+  },
+  "devDependencies": {
+    "@types/jest": "^23.3.10",
+    "@types/node": "^10.12.12",
+    "@types/react": "^16.7.13",
+    "@types/react-dom": "^16.0.11",
+    "@types/superagent": "^3.8.5",
+    "typescript": "^3.2.1"
+  }
+}