{"id":2010,"date":"2024-09-21T12:00:00","date_gmt":"2024-09-21T10:00:00","guid":{"rendered":"https:\/\/kindsonthegenius.com\/blog\/inventoryms-complete-application-react-ui\/"},"modified":"2026-08-28T11:32:22","modified_gmt":"2026-08-28T09:32:22","slug":"inventoryms-complete-application-react-ui","status":"publish","type":"post","link":"https:\/\/kindsonthegenius.com\/blog\/inventoryms-complete-application-react-ui\/","title":{"rendered":"InventoryMS Complete Application \u2013 React UI"},"content":{"rendered":"\n<p class=\"wp-block-paragraph\"><em>Learn how to build the InventoryMS Complete Application with React UI, Vite, CoreUI, SpringBoot API integration, authentication, CRUD, routing, and Redux.<\/em><\/p>\n\n\n<p><strong>Note:<\/strong> <em>this document is live and will continue to be updated while we develop the InventoryMS application<\/em><\/p>\n<h3>TL;DR<\/h3>\n<ul>\n<li>\n<p><strong>InventoryMS Complete Application \u2013 React UI<\/strong> uses React, Vite, and CoreUI to build the frontend for an inventory management system.<\/p>\n<\/li>\n<li>\n<p>Connect the React UI to the <strong>SpringBoot REST API<\/strong> using Axios and display inventory data in tables.<\/p>\n<\/li>\n<li>\n<p>Implement <strong>user authentication, protected routes, login, and logout<\/strong> across the React application.<\/p>\n<\/li>\n<li>\n<p>Build reusable <strong>CRUD components<\/strong> with pagination, searching, filtering, dialogs, and image handling.<\/p>\n<\/li>\n<li>\n<p>Set up <strong>dashboard statistics, application routes, navigation, Redux state management, and deployment<\/strong> for the React application.<\/p>\n<\/li>\n<\/ul>\n<p>This is the second part (Part 2) of our Complete InventoryMS application in React and Spring Boot. In this part (<a href=\"https:\/\/kindsonthegenius.com\/blog\/inventoryms-complete-application-spring-boot-api\/\" target=\"_blank\" rel=\"noopener\">SpringBoot API<\/a>), we would develop the React UI application.<\/p>\n<p>To help simplify the styling, we would be using the <a href=\"https:\/\/coreui.io\/\" target=\"_blank\" rel=\"noopener\">CoreUI template<\/a> and we would be using the <a href=\"https:\/\/vitejs.dev\/\" target=\"_blank\" rel=\"noopener\">Vite framework<\/a>.<\/p>\n<p><strong>Content<\/strong><\/p>\n<ol>\n<li><a href=\"#t1\">What we would in this Tutorial<\/a><\/li>\n<li><a href=\"#t2\">Setup the CoreUI Template<\/a><\/li>\n<li><a href=\"#t3\">Establish Communication with the Spring REST API<\/a><\/li>\n<li><a href=\"#t4\">Setup User Authentication<\/a><\/li>\n<li><a href=\"#t5\">Setup CRUD for Various Components<\/a><\/li>\n<li><a href=\"#t6\">Add Stats to the Dashboard<\/a><\/li>\n<li><a href=\"#t7\">Setup the Routes and Navigation<\/a><\/li>\n<\/ol>\n<p>Here\u2019s a preview of what we want to achieve<\/p>\n<figure id=\"attachment_15053\" class=\"wp-caption aligncenter\" style=\"width: 1024px;\" aria-describedby=\"caption-attachment-15053\"><a href=\"https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2024\/09\/Screenshot-2024-09-25-at-21.48.09-scaled.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-15053 size-large\" src=\"https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2024\/09\/Screenshot-2024-09-25-at-21.48.09-1024x640.jpg\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" srcset=\"https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2024\/09\/Screenshot-2024-09-25-at-21.48.09-1024x640.jpg 1024w, https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2024\/09\/Screenshot-2024-09-25-at-21.48.09-300x188.jpg 300w, https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2024\/09\/Screenshot-2024-09-25-at-21.48.09-768x480.jpg 768w, https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2024\/09\/Screenshot-2024-09-25-at-21.48.09-1536x960.jpg 1536w, https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2024\/09\/Screenshot-2024-09-25-at-21.48.09-2048x1280.jpg 2048w, https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2024\/09\/Screenshot-2024-09-25-at-21.48.09-600x375.jpg 600w\" alt=\"Inventory Management System (InventoryMS) dashboard\" width=\"1024\" height=\"640\" \/><\/a>\n<figcaption id=\"caption-attachment-15053\" class=\"wp-caption-text\">Inventory Management System (InventoryMS) dashboard<\/figcaption>\n<\/figure>\n<h4><strong id=\"t1\">1. What we Will Cover in this Tutorial<\/strong><\/h4>\n<p>As we build the UI application for the InventoryMS, we would learn the following concepts:<\/p>\n<p><strong>React routing\/Protected Routes \u2013<\/strong> we would learn how to configure routes as well as protected routes which requires authentication to access<\/p>\n<p><strong>Using the Context Hook<\/strong> \u2013 this would help us store shared states that we need accross our components<\/p>\n<p><strong>Managing User Authentication<\/strong> \u2013 how to handle basic authentication as well as JSON Web Tokens (JWT)<\/p>\n<p><strong>Table Rendering<\/strong> \u2013 for data on a table, how do we implement pagination, sorting, filtering and searching<\/p>\n<p><strong>Request Interceptors<\/strong> \u2013 with this we can create default configuration that would apply to all requests made from our React application. This include some common headers such as bearer token and user credentials<\/p>\n<p><strong>Working With Images<\/strong> \u2013 we would learn how to asynchronously upload images to a remote blob storage while saving the image url in\u00a0 a database record<\/p>\n<p><strong>User Login\/Logout<\/strong> \u2013 how to manage user login and logout<\/p>\n<p><strong>Hosting React Application<\/strong> \u2013 we would first learn how to containerize our React application. Then we proceed to deploy to various cloud platforms including: VPS, AWS and Azure.<\/p>\n<p><strong>State Management Using REDUX<\/strong> \u2013 we would see how we can use state management tools to handle shared application states.<\/p>\n<p>&nbsp;<\/p>\n<h4><strong id=\"t2\">2. Setup the Core UI Template<\/strong><\/h4>\n<p>In this part we would set up the CoreUI Free React Admin Template<\/p>\n<p>Visit the <a href=\"https:\/\/github.com\/coreui\/coreui-free-react-admin-template\" target=\"_blank\" rel=\"noopener\">Github Repo for the CoreUI template<\/a> and clone the repository to your local machine.<\/p>\n<p>After cloning, make the changes described in this tutorial to setup the Core UI template (<a href=\"https:\/\/youtu.be\/lX9fWpX3dqA?si=awwRh8ccDx0yOVgF\" target=\"_blank\" rel=\"noopener\">how to setup React template<\/a>)<\/p>\n<p>After this part, we should be able to start the application and access the index page.<\/p>\n<p>&nbsp;<\/p>\n<h4><strong id=\"t3\">3. Establish Communication With SpringBoot API<\/strong><\/h4>\n<p>In this part we would establish communication with the SpringBoot API, fetch some data and display on a table.\u00a0 We start with the brands table.<\/p>\n<p>Create a React functional component named Brand<\/p>\n<p>Define the state hook for brands with an initial state of empty array<\/p>\n<p>Define a state the represents a single brand<\/p>\n<p>Setup the useEffect hook and using axios, fetch the brands list and update the state using setBrands (you may need to hardcode the credentials in the header for now. We fix this in the next step using Request Interceptor)<\/p>\n<p>Finally, return a table of brands. You can use &lt;TableContainer&gt; component provided by Material UI.<\/p>\n<p>Start the application to make sure you have data displayed on the page<\/p>\n<p>&nbsp;<\/p>\n<h4><strong id=\"t4\">4. Setup User Authentication (Login\/Logout)<\/strong><\/h4>\n<p><a href=\"https:\/\/kindsonthegenius.com\/blog\/how-to-authenticate-from-react-to-spring-boot\/\" target=\"_blank\" rel=\"noopener\">The procedure for this is outlined here<\/a><\/p>\n<p><a href=\"https:\/\/www.youtube.com\/watch?v=h9LJd09tOks&amp;list=PL9l1zUfnZkZnmca4gYPVQQ9msSR5tQTdk\" target=\"_blank\" rel=\"noopener\">Authentication video tutorial here<\/a><\/p>\n<ul>\n<li>Create the AuthProvider component<\/li>\n<li>Create the ProtectedRoute component<\/li>\n<li>Update the Login component<\/li>\n<li>Update the Register component<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h4><strong id=\"t5\">5. Setup the Components for CRUD on Various Objects<\/strong><\/h4>\n<p>In this part, we first update the Brand component to include additional features. This includes: Add, Edit and Delete operations.<\/p>\n<ul>\n<li>Create the handlers<\/li>\n<li>Create the dialog components for New\/Edit\/Details as well as the Delete dialog (how to implement CRUD)<\/li>\n<li>Implement table pagination on the table (how to implement pagination)<\/li>\n<li>Implement search\/filtering (how to do filtering)<\/li>\n<\/ul>\n<p>You will first need to install the following dependencies:<\/p>\n<pre style=\"margin: 0; line-height: 125%;\">    axios\n    @mui\/icons-material\n    @mui\/material\n    @emotion\/styled\n<\/pre>\n<p>Get the <a href=\"https:\/\/raw.githubusercontent.com\/KindsonTheGenius\/inventoryms-react-ui\/refs\/heads\/main\/brand.txt\" target=\"_blank\" rel=\"noopener\">initial template from here for the Brand component<\/a> and use it\u00a0 for this setup. Next do the following:<\/p>\n<ul>\n<li>add some initial data to the brands table. <a href=\"https:\/\/raw.githubusercontent.com\/KindsonTheGenius\/inventoryms-react-ui\/refs\/heads\/main\/brand.sql\" target=\"_blank\" rel=\"noopener\">Get the query here<\/a><\/li>\n<li>create the .env file and add the credentials and base url<\/li>\n<li>create the axiosConfig.js file<\/li>\n<li>update the route.js file adding the \/brand route for the Brand component<\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n<h4><strong id=\"t6\">6. Add the Stats to the Dashboard<\/strong><\/h4>\n<p>Implement the stats computation at the SpringBoot API and then display the values on the dashboard.<\/p>\n<p>Example of stats below:<\/p>\n<figure id=\"attachment_15056\" class=\"wp-caption aligncenter\" style=\"width: 1024px;\" aria-describedby=\"caption-attachment-15056\"><a href=\"https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2024\/09\/Dashboard-with-Stats.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-15056 size-large\" src=\"https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2024\/09\/Dashboard-with-Stats-1024x410.jpg\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" srcset=\"https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2024\/09\/Dashboard-with-Stats-1024x410.jpg 1024w, https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2024\/09\/Dashboard-with-Stats-300x120.jpg 300w, https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2024\/09\/Dashboard-with-Stats-768x308.jpg 768w, https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2024\/09\/Dashboard-with-Stats-1536x615.jpg 1536w, https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2024\/09\/Dashboard-with-Stats-600x240.jpg 600w, https:\/\/www.kindsonthegenius.com\/wp-content\/uploads\/2024\/09\/Dashboard-with-Stats.jpg 1590w\" alt=\"InventoryMS dashboard with various stats\" width=\"1024\" height=\"410\" \/><\/a>\n<figcaption id=\"caption-attachment-15056\" class=\"wp-caption-text\">InventoryMS dashboard with various stats<\/figcaption>\n<\/figure>\n<p>&nbsp;<\/p>\n<p>To implement the stats, the following needs to be done:<\/p>\n<p>In the service layer for the model, implement a function that calculates total for current month, total for previous month and the percentage difference<\/p>\n<p>Return this result in the controller layer. <a href=\"https:\/\/raw.githubusercontent.com\/KindsonTheGenius\/code-snippets\/refs\/heads\/master\/orderStatsCalculation\" target=\"_blank\" rel=\"noopener\">See the calculate stats function for order here<\/a>.<\/p>\n<p>&nbsp;<\/p>\n<h4><strong id=\"t7\">7. Setup the Navigation and Routes and Links<\/strong><\/h4>\n<p>Here we are going to be setting up the navigation for different sections.<\/p>\n<p>First, we would create all the elements we need for the application<\/p>\n<p>Open the routes.js component\u00a0 and create the routes for all the elements<\/p>\n<p>Open the AppHeaderDropdown (components\/header\/AppHeaderDropdown) component and update the links as needed<\/p>\n<p>Do the same for:<\/p>\n<ul>\n<li>AppHeader (components\/AppHeader)<\/li>\n<li>_nav (src\/_nav) \u2013 this controls what display on the sidebar<\/li>\n<\/ul>\n<h3>FAQs<\/h3>\n<p><strong>What is the InventoryMS Complete Application \u2013 React UI?<\/strong><\/p>\n<p>It is the React frontend for the InventoryMS application, designed to communicate with the SpringBoot REST API and provide an interface for managing inventory data.<\/p>\n<p><strong>Which technologies are used to build the InventoryMS React UI?<\/strong><\/p>\n<p>The tutorial uses React, Vite, CoreUI, Axios, Material UI components, and Redux for state management.<\/p>\n<p><strong>How does the React UI communicate with the SpringBoot API?<\/strong><\/p>\n<p>The React application uses Axios to send requests to the SpringBoot REST API, retrieve data, and display it in components such as inventory tables.<\/p>\n<p><strong>How is authentication handled in the React UI?<\/strong><\/p>\n<p>The application includes user login and logout, an AuthProvider, ProtectedRoute components, request interceptors, and support for Basic Authentication and JWT.<\/p>\n<p><strong>What CRUD features are covered in the InventoryMS React UI?<\/strong><\/p>\n<p>The tutorial covers adding, editing, deleting, and viewing records, along with table pagination, searching, filtering, dialogs, and related API operations.<\/p>\n<h3>Final Thoughts<\/h3>\n<p>The InventoryMS Complete Application \u2013 React UI brings together the frontend concepts needed to build a practical inventory management application with React and SpringBoot. Instead of focusing only on individual components, the tutorial connects authentication, API communication, CRUD operations, routing, navigation, dashboard statistics, and state management into one application.<\/p>\n<p>Using React with Vite and CoreUI provides a practical foundation for building the interface, while the SpringBoot API handles the application&#8217;s backend functionality. As the application grows, concepts such as protected routes, request interceptors, Redux, image uploads, and deployment become important for keeping the frontend organized and maintainable.<\/p>\n<p>The goal is not just to build an inventory dashboard, but to understand how the different pieces of a modern React and SpringBoot application work together.<\/p>","protected":false},"excerpt":{"rendered":"<p>Learn how to build the InventoryMS Complete Application with React UI, Vite, CoreUI, SpringBoot API integration, authentication, CRUD, routing, and Redux.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"pagelayer_contact_templates":[],"_pagelayer_content":"","footnotes":""},"categories":[414],"tags":[],"class_list":["post-2010","post","type-post","status-publish","format-standard","hentry","category-programming"],"acf":[],"_links":{"self":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/2010","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/comments?post=2010"}],"version-history":[{"count":3,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/2010\/revisions"}],"predecessor-version":[{"id":2540,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/posts\/2010\/revisions\/2540"}],"wp:attachment":[{"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/media?parent=2010"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/categories?post=2010"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/kindsonthegenius.com\/blog\/wp-json\/wp\/v2\/tags?post=2010"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}