GithubHelp home page GithubHelp logo

soloproject-tier2-bookfinder's Introduction

Chingu Solo Project - Tier2 - Bookfinder

Tier2 Book Finder

Overview

This project helps you gain experience in using API's to enhance your applications. Your objective with this project is to build a web application using the Google Books API to build a search engine to allow users to search for books.

About Chingu

If you aren’t yet a member of Chingu we invite you to join us. We help our members transform what they’ve learned in courses & tutorials into the practical experience employers need and want.

Our remote team projects let you refine your technical skills and put them into practice while gaining new “soft” skills like communication, collaboration, and Agile project management. The types of skills that help real-world teams get things done!

You can learn more and join us at chingu.io.

Instructions

General instructions for all Pre-Work Projects can also be found in the Chingu Voyage Handbook (URL posted in the #read-me-first channel on Discord).

For this Solo Project you may or may not create a backend application server. The choice is up to you!

You may use the language of your choice, Vanilla CSS/HTML/JS as well as any framework like Django, VueJS, Angular, React, etc.

Structure

  • Review the Google Books API documentation. Things to look for:
    • API endpoint
    • Setting up an API token
    • Setting up a request aka plugging in search terms, limits to the returned result, etc
    • How to query only for the exact info you need.
  • Setup your parent component with at least the following:
    • Search input element and button
    • Book cards
  • Create a stateless book card component. This component does not need to keep any state; it's a pure component that just outputs a rendered component containing:
    • Cover image
    • Title
    • Author
    • Publisher
    • Link to more information

Style

Functionality

  • Make an API call to Google Books API and handle loading, resolved, and error conditions
  • Accept book search terms in the search input element and search for matching books when the 'Search' button is clicked. Iterate over the returned results to display the book cards with the information noted above.

Other

  • Your repo needs to have a robust README.md (See Keys to a Well-Written Readme)
  • Before submitting make sure that there are no errors in the developer console
  • Anticipate and handle any edge cases. Think about what the user will see and how the app should handle edge cases such as these:
    • Does entering random data, such as a mix of alphbetic, numeric, and special characters in the search input result in an error?
    • What happens if the API request takes too long?
    • What if the API returns an error?
    • What if the user submits an empty string?
    • What if the API returns 0 results?
  • The app should be responsive across multiple devices (e.g. phone, tablet, laptop, and desktop computers). For more information see Responsive Web Design Basics

Extras (Not Required)

  • Create a bookshelf for the users that stores bookmarked books
  • On search input, display the last 10 search queries
  • Use as FEW external packages and libraries as possible to reduce the number of dependencies.
  • Include tests cases using tools like Jest, Enzyme, etc.
  • Use Accessibility techniques (i.e. a11ly) to improve your site for users with impairments (see A11Y Project)
  • Add a CONTRIBUTING.md file with instructions on how to contribute to your project
  • Implement service workers to improve performance by relying on cached data (see Service Workers: An Introduction)

soloproject-tier2-bookfinder's People

Contributors

jdmedlock avatar tjangel avatar

Stargazers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.