Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/aidanwhiteley/books-react
A simple React / Typescript front end for the books project
https://github.com/aidanwhiteley/books-react
Last synced: 14 days ago
JSON representation
A simple React / Typescript front end for the books project
- Host: GitHub
- URL: https://github.com/aidanwhiteley/books-react
- Owner: aidanwhiteley
- License: apache-2.0
- Created: 2024-09-06T17:09:58.000Z (4 months ago)
- Default Branch: main
- Last Pushed: 2024-11-06T21:31:59.000Z (about 2 months ago)
- Last Synced: 2024-11-06T22:29:04.805Z (about 2 months ago)
- Language: TypeScript
- Size: 655 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Table of Contents
## About The Project
[![Live app screen grab](public/images/screengrab.jpg)](https://cloudybookclub.com)
A while back, I wanted a simple "microservice" to use while playing with technologies like Docker, Docker Compose and Kubernetes. As I have a bad habit of wandering into book shops and buying books I've already read, my wife suggested writing something to record what I've read recently. Hence, the Books microservice and the The Cloudy Book Club were born.
This project provides a simple React / Typescript front end for the book microservice.
This project replaces a previous project that used AngularJS. Aside from AngularJS being long dead, that implementation was very poor on mobile devices (which is when I most need to use the project when in book shops).
## Getting Started
Here's how to get up and running with this project.
### Prerequisites
1. You should have a recent version of npm installed.
2. Ideally, you should have an instance of the Books microservice running locally on your computer on port 8080. However, if Java isn't your thing, an alternative that allows access to all the read-only functionality of this front end app is detailed further below.### Installation
1. Clone the repo
```
git clone https://github.com/aidanwhiteley/books-react.git
```
2. Install NPM packages
```
npm install
```## Usage
1. To run in development
```
npm run dev
```
and then enter "o" to open a browser
2. To build for production
```
npm run build
```
## Configuration
There are a few "global variables" defined in the `.env` file in the root folder. These should be edited as required.
In particular, the checked in .env file has `VITE_API_URL=http://localhost:8080` which assumes that you are running the books microservice locally (see earlier in this README).
To try out the read-only parts of this front end application this can be temporarily changed to `VITE_API_URL=https://cloudybookclub.com`. This won't allow you to logon to access editor or admin functionality but does allow you to get started. Make sure that you don't add a trailing slash.
## Tests
Nah - there aren't any. This front end project is deliberately light in any "business logic". It is all just display related code. And I have rather strong feelings about the utility (and encumberances) of much of the client side "unit tests" I've seen in the past. Anyways, the server side, where all the logic is, has about about 100 automated tests and about 85% code coverage split between unit tests and, the far more important in the long term, integration tests.## Docker
There is a Docker file in the root of the project that is intended to build a simple Docker image of the project that runs serves it using ngnix. The referenced nginx config file(s)
proxy API calls other Docker containers that are specified in the Docker Compose file in the Books microservice project.
See the Docker file for the suggested syntax for building the Docker image.## License
Distributed under the Apache 2.0 License. See LICENSE for more information.
## Contact
Your Name - [Aidan Whiteley](https://aidanwhiteley.com/) - [email protected]
## Acknowledgments
Here are the main components used in this project
* [React Router](https://reactrouter.com/en/main)
* [React Router Typesafe](https://github.com/fredericoo/react-router-typesafe)
* [Bootstrap 5](https://getbootstrap.com/)
* [React Bootstrap](https://react-bootstrap.netlify.app/)
* [React Bootstrap Typeahead](https://github.com/ericgio/react-bootstrap-typeahead)
* [React Data Table Component](https://github.com/jbetancur/react-data-table-component)
* [Swiper](https://swiperjs.com/react)
* [DOM Purify](https://github.com/cure53/DOMPurify)