This project was bootstrapped with Create React App.
Basic instructions:
- Please clone this repository
- Install with
npm install
After creation, your project should look like this:
my-app/
README.md
.gitignore
package-lock.json
yarn.lock
node_modules/
package.json
public/
index.html
favicon.ico
manifest.json
src/
APi/
BrastlewarkAPI.js
__mocks__/
BrastlewarkAPI.js
components/
Header.js
Overlay.js
Gnomes.js
Friends.js
__tests__/
Header.js
Overlay.js
Gnomes.js
Friends.js
css/
Assets/
gnomehead.png
hat-gnome.png
nofriends.png
orc.png
Gnomes.css
Header.css
Overlay.css
Slider.css
App.css
App.js
App.test.js
index.css
index.js
logo.svg
registerServiceWorker.js
setupTests.js
The App.js
component is designed as a container that manages the state for child components and makes the Api calls.
The interaction with the API is managed by the Api.js
helper file. Api calls are handled with promises and async/await features from es6/es7 js.
Runs the app in the development mode.
Open http://localhost:3000 to view it in the browser.
The page will reload if you make edits.
Launches the test runner in the interactive watch mode.
Basic tests are performed for all components. enzyme
and jest
.
For all compoenents shallow rendering and mounting tests are performed. For App.js
component deeper testing is performed regarding error handling and API interaction.
The only npm library used is rc-slider
https://www.npmjs.com/package/rc-slider for easier integration of advanced filtering of numeric quantities.
On the header the user will find several filtering options for the data. The user may filter searching the name, moving the sliders for filtering by age, weight and height. Finally there is a clickable list of hair colors and professions. The filters are designed to work in conjunction to render the elements that contain all the parameteres filtered.
On clicking on each image card an overlay is rendered with the information for each gnome and his/her friends are shown.
made by: Simon Garmendia