MyReads Project

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.

Extra Features

• Apollo + GraphQL
• Toast notifications
• Shelf switcher
• Book classification
• Debouncing input
• Clear input button
• Loading animation
• Input autofocus
• Responsive background

Starting the app

To get the application up and running right away:

• install required project dependencies with npm i
• start the development server with npm start

Backend Server

The file Queries.graphql.js contains the GraphQL queries that interact with the REST API endpoints.

Search Terms

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'

Tech Stack

Apollo	Autoprefixer	Babel	CSS3	ESlint
Font Awesome	GraphQL	HTML5	JavaScript	Prettier
React	React Router	SVG	Webpack