Thanks for taking a look at the Drawboard exercise, we appreciate you taking the time to give this a bash - hopefully you will find it fun to complete.
This repository contains a simple sample app using an Air Quality API to fetch and return data about air quality in a given location. You can find details of this endpoint here: http://aqicn.org/json-api/doc/
There are many problems with this app though: the code is really not very good, the UI is terrible, the project is not extensible, there are no tests, etc. So we'd like you to take this project and knock it in to shape.
We expect this task should take you around three to four hours, please don't spend too much time on it :)
We'd like you to refactor the current implementation in a way that is well structured, extensible, safe, testable, and error-tolerant. Don’t treat any of the existing code as sacrosanct, feel free to adapt, delete and rewrite as necessary.
You should also take a look at this from a UX perspective. Is the app useful to the user? Does it display errors appropriately? What is the context of the number on screen, what does it actually mean? etc. We are not looking for fancy designs, but it should be useful to a user and nice to use.
With a better code structure in place, try adding a couple of small pieces of functionality that you feel would be useful to demonstrate your capabilities. Some extensions could be: more data points shown on screen, linking out to the website, choice of location, hitting different endpoints, etc.
There are no tests in this project currently, please add enough tests to demonstrate your testing capabilities. You don't need to cover everything, but some key areas would be great.
The kinds of things we will be looking for when we evaluate your submission include:
- Solid design principles
- An architecture that is testable and extensible
- Ability to produce reusable components
- Error checking and reporting
- UI/UX with a utility class CSS styling approach
- Code structure and adherence to JS/React development with a functional approach
We will supply this task by giving you a zip file of the code in its initial state. Please use the git repo the project is contained in, and add your commits there.
When you are finished you can send your submission back to us as a zip file that includes any changes you’ve made and any other information you think is useful.
We’re always trying to improve our hiring process. This task is designed for you to be able to show your JS/React development skills without spending a huge amount of time on it. We welcome any feedback on how this could be improved.
If you have any questions or need clarification, please email GC at ghjuvan-carlu@drawboard.com
This project was bootstrapped with Create React App.
In the project directory, you can run:
This will install the required dependencies.
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.
You will also see any lint errors in the console.
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Builds the app for production to the build folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes.
Your app is ready to be deployed!
See the section about deployment for more information.
Note: this is a one-way operation. Once you eject, you can’t go back!
If you aren’t satisfied with the build tool and configuration choices, you can eject at any time. This command will remove the single build dependency from your project.
Instead, it will copy all the configuration files and the transitive dependencies (Webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except eject will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
You don’t have to ever use eject. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
You can learn more in the Create React App documentation.
To learn React, check out the React documentation.
This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify