This is a responsive web application that allows users to select and categorize books into a virtual bookshelf. Leveraged React to support a dynamic user interface that uses Apollo and GraphQL to interact with a RESTful API server and client library. The user is able to search and move books to and from three distinct bookshelves: Read, Currently Reading and Want To Read. You can visit the deployed app here.
- Apollo + GraphQL
- Toast notifications
- Shelf switcher
- Book classification
- Debouncing input
- Clear input button
- Loading animation
- Input autofocus
- Responsive background
To get the application up and running right away:
- install required project dependencies with
npm i - start the development server with
npm start
The file Queries.graphql.js contains the GraphQL queries that interact with the REST API endpoints.
The backend API uses a fixed set of cached search results and is limited to a particular set of search terms, which are listed below. These are the only terms that will work with the backend.
'Android', 'Art', 'Artificial Intelligence', 'Astronomy', 'Austen', 'Baseball', 'Basketball', 'Bhagat',
'Biography', 'Brief', 'Business', 'Camus', 'Cervantes', 'Christie', 'Classics', 'Comics', 'Cook',
'Cricket', 'Cycling', 'Desai', 'Design', 'Development', 'Digital Marketing', 'Drama', 'Drawing', 'Dumas',
'Education', 'Everything', 'Fantasy', 'Film', 'Finance', 'First', 'Fitness', 'Football', 'Future', 'Games',
'Gandhi', 'Homer', 'Horror', 'Hugo', 'Ibsen', 'Journey', 'Kafka', 'King', 'Lahiri', 'Larsson', 'Learn',
'Literary Fiction', 'Make', 'Manage', 'Marquez', 'Money', 'Mystery', 'Negotiate', 'Painting', 'Philosophy',
'Photography', 'Poetry', 'Production', 'Programming', 'React', 'Redux', 'River', 'Robotics', 'Rowling',
'Satire', 'Science Fiction', 'Shakespeare', 'Singh', 'Swimming', 'Tale', 'Thrun', 'Time', 'Tolstoy',
'Travel', 'Ultimate', 'Virtual Reality', 'Web Development', 'iOS'
 Apollo |
 Autoprefixer |
 Babel |
 CSS3 |
 ESlint |
 Font Awesome |
 GraphQL |
 HTML5 |
 JavaScript |
 Prettier |
 React |
 React Router |
 SVG |
 Webpack |