Uploaded March 2026 | Updated September 2026, 2 weeks ago
In Part 33 of our React POS System series, we build the core "Add New Order" experience by loading Product Categories and Products from the database and displaying them in the POS screen. First, we create a fetchCategories() function in React using Axios to call our secured API with a JWT token stored in localStorage. Then we render categories as Bootstrap buttons, so users can quickly switch between product groups.
Next, we implement fetchProducts(categoryId = 0) to load all available items or filter items by selected category. This gives us a clean POS workflow where clicking any category button instantly refreshes the product list. We also handle error states properly, so the UI shows helpful messages when data fails to load.
On the backend (Node.js + Express), we build a POST API to return products by category using Express Validator for safe input validation and prepared statements for secure MySQL queries. The endpoint returns only Available products, and supports optional filtering using category_id.
By the end of this tutorial, your POS "Create Order" screen will have dynamic category-based product loading, a responsive grid layout, and a full-stack structure ready for the next step: loading cart data on page load.
💡 Tech used: React.js, Node.js, Express.js, MySQL, REST API, JWT Auth, Axios, Bootstrap 5
For Source Code - webslesson.info/2026/01/react-pos-system-nodejs-mysql.html
In Part 33 of our React POS System series, we build the core "Add New Order" experience by loading Product Categories and Products from the database and displaying them in the POS screen. First, we create a fetchCategories() function in React using Axios to call our secured API with a JWT token stored in localStorage. Then we render categories as Bootstrap buttons, so users can quickly switch between product groups.
Next, we implement fetchProducts(categoryId = 0) to load all available items or filter items by selected category. This gives us a clean POS workflow where clicking any category button instantly refreshes the product list. We also handle error states properly, so the UI shows helpful messages when data fails to load.
On the backend (Node.js + Express), we build a POST API to return products by category using Express Validator for safe input validation and prepared statements for secure MySQL queries. The endpoint returns only Available products, and supports optional filtering using category_id.
By the end of this tutorial, your POS "Create Order" screen will have dynamic category-based product loading, a responsive grid layout, and a full-stack structure ready for the next step: loading cart data on page load.
💡 Tech used: React.js, Node.js, Express.js, MySQL, REST API, JWT Auth, Axios, Bootstrap 5
For Source Code - webslesson.info/2026/01/react-pos-system-nodejs-mysql.html
