{"id":18048060,"url":"https://github.com/ivangfr/react-graphql-databases","last_synced_at":"2025-04-10T09:48:37.036Z","repository":{"id":38305565,"uuid":"192979268","full_name":"ivangfr/react-graphql-databases","owner":"ivangfr","description":"The goal of this project is to implement two front-end React applications, author-book-ui and book-review-ui. They will consume the GraphQL endpoints of the two back-end (BE) applications present in the project springboot-graphql-databases, author-book-api and book-review-api.","archived":false,"fork":false,"pushed_at":"2024-12-20T18:38:47.000Z","size":17031,"stargazers_count":7,"open_issues_count":0,"forks_count":5,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-03-24T08:42:31.547Z","etag":null,"topics":["graphql","javascript","material-ui","react","semantic-ui-react"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ivangfr.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"ivangfr"}},"created_at":"2019-06-20T19:51:00.000Z","updated_at":"2024-12-20T18:38:50.000Z","dependencies_parsed_at":"2024-12-20T19:38:18.911Z","dependency_job_id":null,"html_url":"https://github.com/ivangfr/react-graphql-databases","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivangfr%2Freact-graphql-databases","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivangfr%2Freact-graphql-databases/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivangfr%2Freact-graphql-databases/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ivangfr%2Freact-graphql-databases/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ivangfr","download_url":"https://codeload.github.com/ivangfr/react-graphql-databases/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248197425,"owners_count":21063619,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["graphql","javascript","material-ui","react","semantic-ui-react"],"created_at":"2024-10-30T20:11:07.251Z","updated_at":"2025-04-10T09:48:37.014Z","avatar_url":"https://github.com/ivangfr.png","language":"JavaScript","funding_links":["https://github.com/sponsors/ivangfr"],"categories":[],"sub_categories":[],"readme":"# react-graphql-databases\n\nThe goal of this project is to implement two **frontend** [`React`](https://react.dev) applications, `author-book-ui` and `book-review-ui`. They will consume the [`GraphQL`](https://graphql.org) endpoints of the two **backend** applications present in the project [`springboot-graphql-databases`](https://github.com/ivangfr/springboot-graphql-databases), `author-book-api` and `book-review-api`.\n\n## Proof-of-Concepts \u0026 Articles\n\nOn [ivangfr.github.io](https://ivangfr.github.io), I have compiled my Proof-of-Concepts (PoCs) and articles. You can easily search for the technology you are interested in by using the filter. Who knows, perhaps I have already implemented a PoC or written an article about what you are looking for.\n\n## Additional Readings\n\n- \\[**Medium**\\] [**Implementing and Securing a Spring Boot GraphQL API with Keycloak**](https://medium.com/@ivangfr/implementing-and-securing-a-spring-boot-graphql-api-with-keycloak-c461c86e3972)\n- \\[**Medium**\\] [**Implementing and Securing a Spring Boot GraphQL API with Okta**](https://medium.com/@ivangfr/implementing-and-securing-a-spring-boot-graphql-api-with-okta-78bc997359b4)\n\n## Project Diagram\n\n![project-diagram](documentation/project-diagram.jpeg)\n\n## Applications\n\n- ### author-book-ui\n\n  `React` 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`](https://react.semantic-ui.com) as CSS-styled framework.\n\n- ### book-review-ui\n\n  `React` 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`](https://material-ui.com) as CSS-styled framework. \n\n## Prerequisites\n\n- [`npm`](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)\n- [`springboot-graphql-databases`](https://github.com/ivangfr/springboot-graphql-databases)\n\n  - In a terminal, run the command below to clone `springboot-graphql-databases` project:\n    ```\n    git clone https://github.com/ivangfr/springboot-graphql-databases.git\n    ```\n\n  - Build `author-book-api` and `book-review-api` docker images as described at https://github.com/ivangfr/springboot-graphql-databases#build-applications-docker-images.\n\n## Run Applications with Npm\n\n### Start Environment and Backend Applications\n\nFirst, you need to start the environment and backend applications. For it, follow the instructions at [Start Environment](https://github.com/ivangfr/springboot-graphql-databases#start-environment) and [Running applications with Maven](https://github.com/ivangfr/springboot-graphql-databases#run-applications-with-maven).\n\n### Start Applications\n\n- **author-book-ui**\n\n  - Open a new terminal and go to `react-graphql-databases/author-book-ui`;\n\n  - Execute the command below if you are running `author-book-ui` for the first time:\n    ```\n    npm install\n    ```\n\n  - To start `author-book-ui` run:\n    ```\n    npm start\n    ```\n\n- **book-review-ui**\n\n  - Open a new terminal and go to `react-graphql-databases/book-review-ui`.\n\n  - Execute the command below if you are running `book-review-ui` for the first time:\n    ```\n    npm install\n    ```\n\n  - To start `book-review-ui` run:\n    ```\n    npm start\n    ```\n\n## Run Applications as Docker Containers\n\n### Build Application's Docker Images\n\nIn a terminal and inside `react-graphql-databases` root folder, run the following script:\n```\n./build-docker-images.sh\n```\n\n### Application's environment variables\n\n- **author-book-ui**\n\n  | Environment Variable   | Description                                                         |\n  | ---------------------- | ------------------------------------------------------------------- |\n  | `AUTHOR_BOOK_API_HOST` | Specify host of the `author-book-api` service (default `localhost`) |\n  | `AUTHOR_BOOK_API_PORT` | Specify port of the `author-book-api` service (default `8080`)      |\n  | `BOOK_REVIEW_API_HOST` | Specify host of the `book-review-api` service (default `localhost`) |\n  | `BOOK_REVIEW_API_PORT` | Specify port of the `book-review-api` service (default `9080`)      |\n\n- **book-review-ui**\n\n  | Environment Variable   | Description                                                         |\n  | ---------------------- | ------------------------------------------------------------------- |\n  | `BOOK_REVIEW_API_HOST` | Specify host of the `book-review-api` service (default `localhost`) |\n  | `BOOK_REVIEW_API_PORT` | Specify port of the `book-review-api` service (default `9080`)      |\n\n### Configure /etc/hosts\n\nAdd the line below to `/etc/hosts`:\n```\n127.0.0.1 author-book-api book-review-api\n```\n\n### Start Environment and Backend Applications\n\nFirst, you need to start the environment and backend applications. For it, follow the instructions at [Start Environment](https://github.com/ivangfr/springboot-graphql-databases#start-environment) and [Running Applications as Docker containers](https://github.com/ivangfr/springboot-graphql-databases#run-applications-as-docker-containers).\n\n### Start Applications\n\nIn a terminal and inside `react-graphql-databases` root folder, run following script:\n```\n./start-apps.sh\n```\n\n## Applications URLs\n\n| Application    | URL                   |\n| -------------- | --------------------- |\n| author-book-ui | http://localhost:3000 |\n| book-review-ui | http://localhost:3001 |\n\n## Demo\n\n- 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**](https://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`.\n\n  ![add-book-wizard](documentation/add-book-wizard.gif)\n\n- 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.\n\n  ![add-book-review](documentation/add-book-review.gif)\n\n## Shutdown\n\n- To stop applications:\n\n  - If they were started with `Npm`, go to the terminals where they are running and press `Ctrl+C`;\n\n  - If they were started as a Docker container, go to a terminal and, inside `react-graphql-databases` root folder, run the script below:\n    ```\n    ./stop-apps.sh\n    ```\n\n- Finally, follow the shutdown steps for backend applications as described at [Shutdown](https://github.com/ivangfr/springboot-graphql-databases#shutdown)\n\n## Cleanup\n\n- To remove the Docker images created by this project, go to a terminal and, inside `react-graphql-databases` root folder, run the following script:\n  ```\n  ./remove-docker-images.sh\n  ```\n\n- Remove the line below from `/etc/hosts`:\n  ```\n  127.0.0.1 author-book-api book-review-api\n  ```\n\n## How to upgrade application's dependencies to latest version\n\n- In a terminal, make sure you are inside `react-graphql-databases/author-book-ui` or `springboot-react-keycloak/book-review-ui` folder;\n\n- Run the following commands:\n  ```\n  npm upgrade\n  npm i -g npm-check-updates\n  ncu -u\n  npm install\n  ```\n\n## TODO\n\n- Add confirmation dialog before deleting a book or a author.\n\n## Issues\n\n`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://github.com/mui/material-ui/issues/32074).\n\n## References\n\n- https://mherman.org/blog/dockerizing-a-react-app\n- https://www.freecodecamp.org/news/how-to-implement-runtime-environment-variables-with-create-react-app-docker-and-nginx-7f9d42a91d70","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fivangfr%2Freact-graphql-databases","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fivangfr%2Freact-graphql-databases","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fivangfr%2Freact-graphql-databases/lists"}