For this challenge you will be creating a rudimentary search engine that consumes the Google Books API. This is a test of basic front end proficiency.
- Fork this repository and complete the challenge according to the specifications below.
- Once finished, email your patch to [email protected] and we will review your submission. (Do Not Open A Pull Request)
- While not necessary, you may use AngularJS, React, or Vue to complete this project if you are more comfortable using a framework.
- You are encouraged to use ES6+ JavaScript. We will be testing your submission with Chrome latest, but we have also included Babel as a dependency of this package. You may transpile and minify
main.jsby runningnpm run build. If you choose to do this, please adjustindex.htmlaccordingly. - All code must be your own. Do not plagarize, copy, or steal code.
- Research the Google Books Volume API to determine how to search for books given a query. You will need to create an API key.
- Build a basic search engine for Google Books. There should be a search bar to input a query that will be be passed as an argument to the Google Books API. The results should be rendered in the results area. You must include these fields (if available for the record):
- Cover image
- Title
- Subtitle
- Authors
- Additionally, each result should somehow provide a link to its respective Google Books page. Look at a Google Books entry on Google Books, and see which parameter might help you.
- Each subsequent query should append its results to the results area.
- There must be no duplicates (by Google Books id).
- The results should be visually appealing, styled logically, and fully responsive for mobile devices.
- While you must use the three function stubs provided in
main.js, this challenge will require you to write some code outside of them. - You may not use jQuery. Use
documentfor DOM manipulation andfetchfor http requests.
- To install the dependencies, run
npm install. - To use your Google Books Volume API key with this application, create a file called
.env.localin the root directory of the challenge. In this file, add the lineBOOKS_KEY={your_api_key}, whereyour_api_keyis your Google Books Volume API key. - To bundle the scripts, run
webpack.
- React was the library of choice for rendering view components, along with some vanilla DOM manipulation helper functions (see
util.js). - The solution utilizes the three function stubs in
main.js, but I had to modifyshowErrorso that errors would not replace results from previous queries (see comments inmain.js). - If I were starting this project from scratch, I would have used a slightly different directory structure. The reasoning behind the directory structure for this solution was to make
main.jseasily accessible by keeping its location consistent. - Security - The choice of using
dot-env-webpackis not secure if this app was deployed, as the API key is easily viewable in the network tab in the browswer. I chose this approach since I knew that my solution was going to be tested and assessed locally in a development environment with a separate key. For production, I would have chosen a different approach. - The
bundle.jsfile for this solution is not an optimal size for production. I would minify it for production, but for this challenge I chose not to, as there are relatively few files and dependencies in the solution.