Inventory Viewing system is a simple solution for managing inventory records. It consists from two parts: the back-end service and the front-end server.
The back-end service is built on the basis of Spring Boot with H2 in-memory database for persistence level.
Due to potentially big amount of inventory records I decided to implement server-side variant of pagination: only a small subset of all records needed to be displayed is queried on server and returned to front-end side. This approach is considered to be the best practice when dealing with Big Data and will guarantee low response time for page and smooth UX, regardless of size of the database.
Back-end has only one end-point at /api/v1/items
Full API Documentation for back-end server's API is available on http://localhost:9000/swagger-ui.html. Swagger UI works in the latest versions of Chrome, Safari, Firefox, and Edge.
The front-end server is implemented in two variants: using React 16 library, and the second one with the help of Angular framework. Both variants styled with Material Design. By architecture front-end is a single-page application allowing to view and navigate through all available inventory records. Database is pre-populated with 10 sample records. Page-size limit is set to 5 records/page, just to demonstrate pagination functionality.
In order to build and run both back-end and front-end the following prerequisites are needed:
This project is organized as a typical multi-module project with the following structure:
-
inventory-service -- module containing source code of back-end server
-
inventory-ui-react -- module containing source code of front-end server (React 16)
-
inventory-ui-angular -- module containing source code of front-end server (Angular 10)
Run from the project's root directory:
mvn clean package
Run from /inventory-ui-react directory (where the package.json is located):
npm install
Run from /inventory-ui-angular directory (where the package.json is located):
npm install
- run
org.warehouse.MainAppclass using IDE or - run
mvn spring-boot:runfrom /inventory-service directory using command line
Server will start on localhost:9000 address. One can point browser to http://localhost:9000/swagger-ui.html to see API documentation
-
run
npm startfrom /inventory-ui-react directory, this will compile the React app and automatically launch it in the browser on the URL http://localhost:3000 -
run
npm startfrom /inventory-ui-angular directory, this will compile the Angular app, after that point your browser on the URL http://localhost:4200