This is a Fullstack Java ReactJS Application built on JHispter Stack with JUnit and JEST Unit Testing and Swagger API Documentation. Build Instructions will be followed by Screenshots and Walkthrough.

PC

JDK 11

Maven 3.6.3

Windows 10 X64

Tomcat Server

MySQL 5.7

Install Java JDK 11

Setup JavaHome Path

Setup Apache Maven 3.6.3

Before you can build this project, you must install and configure the following dependencies on your machine:

1. [Node.js][]: We use Node to run a development web server and build the project. Depending on your system, you can install Node either from source or as a pre-packaged bundle.

After installing Node, you should be able to run the following command to install development tools. You will only need to run this command when dependencies change in package.json.

npm install

Run the following commands in two separate terminals to create a blissful development experience where your browser auto-refreshes when files change on your hard drive.

./mvnw
npm start

To launch your application's tests, run: (these server side tests are located cargallery/src/test/java/com/deontakpuie/car/gallery and test for the Car Entity Class https://github.com/DTaksta/cargallery/blob/master/src/test/java/com/deontakpuie/car/gallery/domain/CarTest.java and Car Restful Service https://github.com/DTaksta/cargallery/blob/master/src/test/java/com/deontakpuie/car/gallery/web/rest/CarResourceIT.java)

./mvnw verify

Unit tests are run by [Jest][] and written with [Jasmine][]. They're located in src/test/javascript/ and can be run with:

npm test

1 First thing, before client and server are loaded, mvnw and npm start are run.

2 Then we see both the TypeScript Client and the Java Server loaded, we can now access the app on localhost:9060

3 We Know see the Java Car Gallery Landing Page

4 We try and sign in using the User User combination

5 We then are signed in and arrive at the landing of the app

6 We then choose to access the Cars grid from the Entities dropdown and are then presented with a Car Grid Filled with Dummy Data supplied by Faker.IO which seeds data that more or less does not violate field types but does is not real car data so we will add our own real data next.

7 We then create a new car and taken to new car page

8 We try and create a Kia Rio model but forget to fill in year and are reminded for it

9 We then fill in the correct information and submit

10 We try and view that car, and also notice that we can change the currency of price, which we do in ZA, this code can be found https://github.com/DTaksta/cargallery/blob/master/src/main/webapp/app/entities/car/car-detail.tsx which uses exchangerates.io for the rates.

11 We then try and edit Kia and put in a string for mileage and are told it can only be a number

12 We then change the year, leaving mileage as a number and see our result reflect successfully

13 As Can be seen above we also added a Ferrari, Porsche, and Aston Martin, but with all that elegance let us delete one, the Aston Martin.

and after click delete we get a warning

and we click yes, and see that Aston Martin is no longer there