Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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

Awesome Lists containing this project

README

        





Logo

Books React


A simple React / Typescript front end for the Books microservice.


Table of Contents



  1. About The Project


  2. Getting Started


  3. Usage

  4. Configuration

  5. Tests

  6. Docker

  7. License

  8. Contact

  9. Acknowledgments

## 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).

(back to top)

## 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
```

(back to top)

## 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
```

(back to top)

## 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.

(back to top)

## 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.

(back to top)

## 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.

(back to top)

## License

Distributed under the Apache 2.0 License. See LICENSE for more information.

(back to top)

## Contact

Your Name - [Aidan Whiteley](https://aidanwhiteley.com/) - [email protected]

(back to top)

## 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)

(back to top)