The goal of this project is to implement two frontend ReactJS applications, author-book-ui and book-review-ui. They will consume the GraphQL endpoints of the two backend applications present in the project springboot-graphql-databases, author-book-api and book-review-api.

• author-book-ui

  ReactJS UI application where staff members can manage authors and books and customers can see the books and read/add book reviews and their rating. Its main backend application is author-book-api but all the reviews information are obtained from book-review-api. It uses Semantic UI React as CSS-styled framework.

• book-review-ui

  ReactJS UI application where staff members can manage books and customers can see the books and read/add book reviews and their rating. Its backend application is book-review-api. It uses Material UI as CSS-styled framework.

• npm

• springboot-graphql-databases

  • In a terminal, run the command below to clone springboot-graphql-databases project

    git clone https://github.com/ivangfr/springboot-graphql-databases.git 

  • Build author-book-api and book-review-api docker images as described at https://github.com/ivangfr/springboot-graphql-databases#build-applications-docker-images

First, you need to start the environment and backend applications. For it, follow the instructions at Start Environment and Running applications with Maven

• author-book-ui

  • Open a new terminal and go to react-graphql-databases/author-book-ui

  • Execute the command below if you are running author-book-ui for the first time

    npm install 

  • To start author-book-ui run

    npm start 

• book-review-ui

  • Open a new terminal and go to react-graphql-databases/book-review-ui

  • Execute the command below if you are running book-review-ui for the first time

    npm install 

  • To start book-review-ui run

    npm start 

In a terminal and inside react-graphql-databases root folder, run the following script

./docker-build.sh 

• author-book-ui

  Environment Variable	Description
  AUTHOR_BOOK_API_HOST	Specify host of the author-book-api service (default localhost)
  AUTHOR_BOOK_API_PORT	Specify port of the author-book-api service (default 8080)
  BOOK_REVIEW_API_HOST	Specify host of the book-review-api service (default localhost)
  BOOK_REVIEW_API_PORT	Specify port of the book-review-api service (default 9080)

• book-review-ui

  Environment Variable	Description
  BOOK_REVIEW_API_HOST	Specify host of the book-review-api service (default localhost)
  BOOK_REVIEW_API_PORT	Specify port of the book-review-api service (default 9080)

Add the line below to /etc/hosts

127.0.0.1 author-book-api book-review-api 

First, you need to start the environment and backend applications. For it, follow the instructions at Start Environment and Running Applications as Docker containers

In a terminal and inside react-graphql-databases root folder, run following script

./start-apps.sh 

• This gif shows a staff member adding a book using the wizard option. First, he looks for the author josh long. The search is looking for data at openlibrary.org. Then, he picks the book Getting Started With Roo. As the author Josh Long is new to the application, he is created. The information of the book is already fulfilled based on the response from openlibrary.org. Finally, the application shows the preview of the book card, as the customer will see it. The checkbox is enabled in order to create the book also in book-review-ui.

  

• This another gif shows a customer adding a review about the book Getting Started With Roo. Once the review is submitted, it is already available for customer checking books in author-book-ui application.

  

• To stop applications

  • If they were started with Npm, go to the terminals where they are running and press Ctrl+C

  • If they were started as a Docker container, go to a terminal and, inside react-graphql-databases root folder, run the script below

    ./stop-apps.sh 

• Finally, follow the shutdown steps for backend applications as described at Shutdown

• To remove the Docker images created by this project, go to a terminal and, inside react-graphql-databases root folder, run the following script

  ./remove-docker-images.sh 

• Remove the line below from /etc/hosts

  127.0.0.1 author-book-api book-review-api 

• In a terminal, make sure you are inside react-graphql-databases/author-book-ui or springboot-react-keycloak/book-review-ui folder

• Run the following commands

  npm upgrade npm i -g npm-check-updates ncu -u npm install 

• Add confirmation dialog before deleting a book or a author

book-review-ui is still using React 17 because it's depending on material-ui to support React 18. For more information see material-ui issue #32074

• https://mherman.org/blog/dockerizing-a-react-app/
• https://www.freecodecamp.org/news/how-to-implement-runtime-environment-variables-with-create-react-app-docker-and-nginx-7f9d42a91d70/