react-app-simple-book-search-graphql

A Simple Book Search Application using React JS, a JavaScript library to make awesome UI by Facebook, Node JS with AWS Lambda and MongoDB. To connect with the Backend GraphQL Server Apollo Client is used while Apollo Server is used to implement the Server.

This application uses component oriented UI creation paradigm. All components are written in JSX and ES6 style and are combined to get a single build for production purpose using Webpack 5.

Babel is used to transpile all JSX code to vanilla JavaScript. For UI creation HTML5 and CSS3 are used.

This is a responsive web application for viewing in both Mobile and Desktop.

Back end is implemented using Node JS with Apollo Server and MongoDB Atlas.

This Application uses standalone GraphQL Server. For Backend Deployment with AWS Lambda details please check aws-lambda branch.

Features

1. Code is rewritten with latest version of React JS and Node JS.
2. Latest features of JavaScript i.e. ESNext is used.

3. This is Simple Book Search Application. It is a CRUD application.
4. It is a Full Stack Application with Standalone GraphQL Server. For the Backend with AWS Lambda please check the aws-lambda branch.

5. All the book details, authors and publication detils are stored in the MongoDB Atlas. This example uses a free/ shared account. So Please use it wisely.

6. Login feature is added.
7. Error will be shown if the credentials are not correct or Network is not present.
8. Session tracking is supported using JSON Web Tokens (JWT). These tokens are saved into LocalStorage.
9. To implement the features of GraphQL like Queries, Mutations in Client side Apollo Client is used. On the otherhand, Apollo Server is used to implement the same in Server side.

10. for simplicity passwords are not encrypted

11. For the Schema generation Type Definitions are added. Queries are used for the Reading operations while Mutations are added for Mutable operations.

Installation

Clone the repository:

$ git clone https://github.com/anijitsao/react-app-simple-book-search-graphql.git

Navigate inside the directory:

$ cd react-app-simple-book-search-graphql

Install all the necessary dependecies and run the client side of the application

$ npm install

# To serve the application we use a npm module named http-server
$ npm run client-start

Now open Another Terminal and navigate to the same directory and run the GraphQL Server

$ cd /path/to/react-app-simple-book-search-graphql

# Run the GraphQL Server
$ npm run server-start

Login to book search

---

1. Open web browser and typehttp://localhost:8080 in the address bar to load the application.
2. Now login with Test users.

Test users

Username	Password
admin	admin123

tested with latest versions of Google Chrome and Mozilla Firefox

However, to test GraphQL API you can use any supported Client like Apollo Sandbox with the url and HTTP Verbs as shown in Terminal.

API Listing

API listing is given below, -

All APIs have common endpoint as following.

POST /url-of-the-deployed-service/graphql (for localhost it will be http://localhost:4000/graphql)

Following Queries use the same URL mentioned above

query CreateTokenQuery{
  // these are the only possible username and password
  createToken(username: "admin", password: "admin123") {
    token
  }
}

query HelloQuery {
  hello
}

query FindBooksQuery {
  findBooks {
    _id
    name
    published
  }
}

query FindAllAuthors{
  findAuthors {
    _id
    firstName
    lastName
  }
}

Following Mutations have the same URL mentioned above

mutation ModifyCount {
  getCount(count: 20)
}

mutation AddBookMutation {
  addBook(name: "You Don't Know JS") {
    _id
    name
  }
}

mutation DeleteBookMutation {
  deleteBook(_id: "id-of-the-book-to-delete")
}

mutation UpdateBookMutation($updateId: ID!, $bookData: UpdataBookParams!) {
  updateBook(_id: $updateId, updateBookData: $bookData)
}

// variables
{
  "updateId": "id-of-the-book-to-update",
  "bookData": {
   "name": "You Don't Know ES6"
  }
}

Following Author related Mutations have the same URL mentioned above

mutation AddAuthorMutation {
  addAuthor(firstName: "Agatha", lastName: "Christie"){
    _id
    firstName
  }
}

mutation DeleteAuthorMutation {
  deleteAuthor(_id: "id-of-the-author-to-delete")
}

mutation UpdateAuthorMutation(
  $updateId: ID!
  $authorData: UpdataAuthorParams!
) {
  updateAuthor(_id: $updateId, updateAuthorData: $authorData)
}

// variables
{
  "updateId": "id-of-the-author-to-update",
  "authorData": {
   "firstName": "Agatha",
   "lastName": "Christie",
   "country": "United Kingdom"
  }
}

Screenshots

Some screens of the application is given below for better understanding.

Desktop as well as Mobile version of the screenshots are given side by side.

Login Screen

If credentials are not correct

After submitting credentials and Search a book

Add a Book

Edit a Book

Delete a Book