Webslesson: react js tutorial

How to Build a Point of Sale (POS) System with React, Node.js & MySQL

A Point of Sale (POS) system is the backbone of modern retail businesses. It helps manage sales, inventory, billing, and customer transactions efficiently. In this tutorial, we will learn how to build a POS system using React.js, Node.js, Express.js, and MySQL.

This project is a real-world React.js project that demonstrates full-stack web development using REST APIs, database integration, authentication, and modern frontend tools.

Introduction

With the growing demand for web-based business applications, many companies are replacing traditional desktop software with web-based POS point of sale software. A web POS system allows business owners to access their sales data anytime and from anywhere.

In this React POS tutorial, we build a complete Point of Sale application using React.js for the frontend and Node.js with Express.js and MySQL for the backend. This tutorial is suitable for beginners and developers looking for a React JS Node JS MySQL project.

What Problem Does This POS System Solve?

Traditional POS systems are expensive, difficult to customize, and often depend on specific hardware. This POS system using React and Node.js solves many real business problems.

Centralized sales tracking and reporting
Efficient inventory management using MySQL database
Fast and responsive billing system
Secure authentication with JWT
Scalable web-based POS application

This makes the project ideal for retail shops, startups, and developers building a POS React JS Node JS project.

Technologies Used in This POS System

Backend Technologies (Node.js & Express.js)

The backend of this POS system Node.js project is built using Node.js and Express.js. It exposes REST APIs that communicate with a MySQL database.

Node.js – Backend JavaScript runtime
Express.js – API framework
MySQL – Relational database
REST API – Frontend and backend communication

Backend Library Installation Commands

Run the following command inside your backend directory to install required libraries:

npm install express mysql2 dotenv cors body-parser

Additional Node.js Libraries Used

bcryptjs – Password encryption
express-validator – API request validation
jsonwebtoken – JWT authentication
multer – File uploads

Install all backend dependencies using:

npm install bcryptjs express-validator jsonwebtoken multer

Frontend Technologies (React.js)

The frontend of this React Point of Sale system is developed using React.js. It provides a fast, interactive, and responsive user interface.

React.js – Frontend framework
React Router DOM – Navigation and routing
Axios – REST API communication
Bootstrap 5 – Responsive UI framework
jQuery DataTables – Advanced table management
Chart.js – Sales and analytics charts

Frontend Library Installation Commands

Install frontend dependencies using:


npm install axios bootstrap jquery datatables.net datatables.net-bs5
npm install react-router-dom jwt-decode chart.js react-bootstrap

Project Setup Commands

Node.js & Express.js Setup

Create a backend folder and initialize Node.js:


npm init -y
npm install express mysql2 dotenv cors body-parser

Start the Node.js server:

node index.js

The backend server will run on Port 5000.

React.js Setup

Create a new React.js application using:

npx create-react-app .

Start the React development server:

npm start

The React application will run on Port 3000.

React POS System Source Code

Application Architecture

This React JS Node JS Express MySQL project follows a clean client-server architecture:

React Frontend handles UI and user interaction
Node.js API processes business logic
MySQL database stores users, products, and sales data

The frontend communicates with the backend using REST APIs and Axios.

Key Features of the POS System

Product and inventory management
Sales and billing system
JWT-based authentication
CRUD operations with MySQL
Responsive UI using Bootstrap
Sales reports and charts

This makes it a complete POS React JS Node JS MySQL project.

Why This Project Is Perfect for Learning

This project is ideal for developers who want hands-on experience with:

React hooks and components
Node.js REST API development
MySQL database integration
Full-stack web development

It is suitable for programming beginners, students, and developers building React real projects.

Conclusion

Building a Point of Sale (POS) system with React, Node.js, and MySQL is an excellent way to learn modern full stack web development. This project demonstrates how frontend and backend technologies work together to create scalable business applications.

If you want to master React.js, Node.js, Express.js, and MySQL, this POS system is a powerful real-world project to add to your portfolio.

React POS System Source Code

If you're diving into the world of web development with React.js and need to incorporate file uploads into your project, you're in the right place. This guide will walk you through the process step by step, utilizing a PHP backend API. By the end, you'll have a solid understanding of how to implement file uploads seamlessly in your React.js application.

Prerequisites

Before we get started, make sure you have the following installed:

Node.js and npm (Node Package Manager)
React.js development environment set up
A PHP server for the backend (e.g., XAMPP, WampServer, or any other PHP server of your choice)

A Beginner's Guide to Implementing File Uploads in React.js with PHP Backend

Download Source Code

Step 1: Set Up Your React.js App

First we have to create React App in our local computer. So if you want to know how to install React App then you you have to follow this React.js Crud Application Tutorial. In which you can find step by step guid for download and install dependencies in our React Application.

Step 2: Install Dependencies

Install the necessary packages for file handling in React:


npm install bootstrap

Step 3: Create a File Upload Component

In your src folder, there is one App.jsx in which we have create File Upload component. This component will handle the file upload functionality.

src/App.jsx


import React, { useState, useRef } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';

function App() {
	
	const [selectedFile, setSelectedFile] = useState(null);

	const [imageLink, setImageLink] = useState(null);

	const [validationError, setValidationError] = useState(null);

	const fileInputRef = useRef(null);

	const handleFileChange = (event) => {

		const file = event.target.files[0];
		if(file)
		{
			const allowedExtension = ['.jpg', '.png'];
			const selectedFileExtension = file.name.split('.').pop().toLowerCase();
			if(allowedExtension.includes('.' + selectedFileExtension))
			{
				setSelectedFile(file);
				setValidationError(null);
			}
			else
			{
				setSelectedFile(null);
				setValidationError('Invalid file extension. Please select a file with .jpg or .png extension.');
				fileInputRef.current.value = '';
			}
		}

	};

	const handleUpload = async() => {
		if(selectedFile)
		{
			const formData = new FormData();
			formData.append('file', selectedFile);
			const response = await fetch('http://localhost/tutorial/file-upload/api/upload.php', {
				method : 'POST',
				body : formData
			});

			const responseData = await response.json();
			setImageLink(responseData.image_link);
			fileInputRef.current.value = '';
		}
		else
		{
			setValidationError('Please select a file before uploading.');
		}
	};

	return (
		<div className="container">
            <h1 className="mt-5 mb-5 text-center"><b>Upload File in React.js</b></h1>

            <div className="card">
                <div className="card-header">Upload File in React.js</div>
                <div className="card-body">
                    <div className="row">
                        <div className="col col-2"><b>Select File</b></div>
                        <div className="col col-3">
                        	<input type="file" ref={fileInputRef} onChange={handleFileChange} />
                        </div>
                        <div className="col col-3">
                        	<button className="btn btn-primary" onClick={handleUpload}>Upload</button>
                        </div>
                    </div>
                    <div className="row">
                        <div className="col col-2">&nbsp;</div>
                        <div className="col col-3">
                            {validationError && (
                            	<p className="text-danger">{validationError}</p>
                            )}

                            {imageLink && (
                            	<div>
                                    <p><b>Uploaded Image : </b></p>
                                    <img src={imageLink} className="img-fluid img-thumbnail" />
                                </div>
                            )}
                        </div>
                    </div>
                </div>
            </div>
        </div>
	)
}

export default App

Import Statements:


import React, { useState, useRef } from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';

The code imports React, which is necessary for creating React components.
It also imports the useState and useRef hooks from React. useState is used to manage component state, and useRef is used to create a reference to the file input element.
The bootstrap.min.css file is imported to apply Bootstrap styling to the component.

Functional Component Declaration:


function App() {
  // ... component logic
}

This code defines a functional component named App.

State Hooks:


const [selectedFile, setSelectedFile] = useState(null);
const [imageLink, setImageLink] = useState(null);
const [validationError, setValidationError] = useState(null);

Three state variables (selectedFile, imageLink, and validationError) are initialized using the useState hook.
selectedFile represents the currently selected file for upload.
imageLink holds the link to the uploaded image, if any.
validationError stores any validation error messages.

useRef Hook:


const fileInputRef = useRef(null);

The useRef hook is used to create a reference (fileInputRef) to the file input element. This reference will be used to manipulate the file input, such as clearing its value.

Event Handler - handleFileChange:


const handleFileChange = (event) => {
  // ... file change logic
};

handleFileChange: This function is triggered when a user selects a file using the file input. It performs validation to check the file extension and updates the state accordingly.


const file = event.target.files[0];

This line extracts the first file from the array of files selected by the user through the file input.


if (file) {
  // ...
}

This condition checks whether a file is actually selected. If not, the subsequent logic is not executed.


const allowedExtension = ['.jpg', '.png'];

An array (allowedExtension) is created, containing the allowed file extensions (in this case, '.jpg' and '.png').


const selectedFileExtension = file.name.split('.').pop().toLowerCase();

The selected file's name is split at the period ('.') to extract the file extension. It is then converted to lowercase for case-insensitive comparison.


if (allowedExtension.includes('.' + selectedFileExtension)) {
  // If allowed, set the selected file in the component state
  setSelectedFile(file);
  // Clear any previous validation error
  setValidationError(null);
} else {
  // If not allowed, set the selected file to null
  setSelectedFile(null);
  // Set a validation error message
  setValidationError('Invalid file extension. Please select a file with .jpg or .png extension.');
  // Clear the file input value to prevent submitting an invalid file
  fileInputRef.current.value = '';
}

This block of code checks if the selected file's extension is included in the allowedExtension array.
If the extension is allowed, it sets the selected file in the component state (setSelectedFile(file)) and clears any previous validation error.
If the extension is not allowed, it sets the selected file to null, sets a validation error message, and clears the file input value to prevent submitting an invalid file.

This handleFileChange function is designed to handle the logic when a user selects a file in the file input. It ensures that the selected file has a valid extension before updating the component state or displaying a validation error.

Event Handler - handleUpload:


const handleUpload = async () => {
  // ... file upload logic
};

handleUpload: This function is called when the user clicks the "Upload" button. It checks if a file is selected, and if so, it constructs a FormData object and sends a POST request to the PHP backend.


if (selectedFile) {
  // ...
} else {
  // ...
}

This condition checks whether a file is selected (selectedFile). If no file is selected, it executes the else block to set a validation error.


const formData = new FormData();

This line creates a new FormData object. FormData is used to construct a set of key/value pairs representing form fields and their values.


formData.append('file', selectedFile);

The selected file is appended to the FormData object with the key 'file'.


const response = await fetch('http://localhost/tutorial/file-upload/api/upload.php', {
  method: 'POST',
  body: formData
});

The fetch function is used to send a POST request to the specified URL (http://localhost/tutorial/file-upload/api/upload.php).
The request includes the method ('POST') and the body, which is set to the FormData object containing the selected file.


const responseData = await response.json();

The response from the server is expected to be in JSON format. This line parses the JSON data using await response.json().


setImageLink(responseData.image_link);

If the upload is successful, the image link returned from the server is set in the component state using setImageLink.


fileInputRef.current.value = '';

After a successful upload, the file input value is cleared to allow selecting a new file in the future.


setValidationError('Please select a file before uploading.');

If no file is selected, a validation error message is set to inform the user to select a file before attempting to upload.

This handleUpload function is responsible for sending a file to the PHP backend for upload, handling the server's response, and updating the component state accordingly. It also takes care of error handling and validation messages.

JSX Markup:


return (
		<div className="container">
            <h1 className="mt-5 mb-5 text-center"><b>Upload File in React.js</b></h1>

            <div className="card">
                <div className="card-header">Upload File in React.js</div>
                <div className="card-body">
                    <div className="row">
                        <div className="col col-2"><b>Select File</b></div>
                        <div className="col col-3">
                        	<input type="file" ref={fileInputRef} onChange={handleFileChange} />
                        </div>
                        <div className="col col-3">
                        	<button className="btn btn-primary" onClick={handleUpload}>Upload</button>
                        </div>
                    </div>
                    <div className="row">
                        <div className="col col-2">&nbsp;</div>
                        <div className="col col-3">
                            {validationError && (
                            	<p className="text-danger">{validationError}</p>
                            )}

                            {imageLink && (
                            	<div>
                                    <p><b>Uploaded Image : </b></p>
                                    <img src={imageLink} className="img-fluid img-thumbnail" />
                                </div>
                            )}
                        </div>
                    </div>
                </div>
            </div>
        </div>
	)

The return statement contains the JSX markup for the component.
The component is structured using Bootstrap classes for styling.
It includes a file input, an "Upload" button, and displays validation errors or the uploaded image based on the state.

Export Component


export default App;

The App component is exported to be used in other parts of the application.

Overall, this component provides a simple file upload form using React.js, where users can select an image file, validate its extension, and upload it to a PHP backend. The UI is styled using Bootstrap classes for a clean and responsive design.

Step 4: Set Up the PHP Backend

Create a PHP file (upload.php) in your React Application working api directory to handle file uploads. Here's a basic example:

api/upload.php


<?php

//upload.php

header("Access-Control-Allow-Origin:* ");
header("Access-Control-Allow-Headers: *");
header("Access-Control-Allow-Methods: *");

$upload_directory = '../upload/';
$file_name_array = explode(".", $_FILES['file']['name']);
$file_name = time() . '.' . end($file_name_array);
$upload_file = $upload_directory . $file_name;
$image_link = 'http://localhost/tutorial/file-upload/upload/' . $file_name;
if(!file_exists($upload_directory))
{
	mkdir($upload_directory, 0777, true);
}

if(move_uploaded_file($_FILES['file']['tmp_name'], $upload_file))
{
	echo json_encode([
		'message' => 'File uploaded successfully', 
		'image_link' => $image_link
	]);
}

?>

CORS Headers:


header("Access-Control-Allow-Origin:* ");
header("Access-Control-Allow-Headers: *");
header("Access-Control-Allow-Methods: *");

These lines set CORS headers to allow cross-origin requests. This is important when the frontend (React.js) and backend (PHP) are hosted on different domains.

Upload Directory and File Naming:


$upload_directory = '../upload/';
$file_name_array = explode(".", $_FILES['file']['name']);
$file_name = time() . '.' . end($file_name_array);

$upload_directory is set to the relative path where the uploaded files will be stored.
The uploaded file's name is modified to include the current timestamp, ensuring a unique filename.

Complete File Path and Image Link:


$upload_file = $upload_directory . $file_name;
$image_link = 'http://localhost/tutorial/file-upload/upload/' . $file_name;

The complete file path is formed using $upload_directory and $file_name.
An $image_link is created, representing the URL where the uploaded image can be accessed.

Create Upload Directory if Not Exists:


if (!file_exists($upload_directory)) {
    mkdir($upload_directory, 0777, true);
}

This block of code checks if the upload directory exists. If not, it creates the directory with full permissions.

Move Uploaded File:


if (move_uploaded_file($_FILES['file']['tmp_name'], $upload_file)) {
    // If successful, return a JSON response with a success message and the image link
    echo json_encode([
        'message' => 'File uploaded successfully',
        'image_link' => $image_link
    ]);
}

The move_uploaded_file function is used to move the uploaded file from its temporary location to the specified directory.
If the file is moved successfully, a JSON response is echoed with a success message and the image link.

This PHP script is designed to handle file uploads, create a unique filename, move the file to a specified directory, and return a JSON response with a success message and the URL of the uploaded image. It also includes CORS headers to allow cross-origin requests from the frontend.

Step 5: Run Your Applications

Start your React.js development server:


npm run dev

Start your PHP server and visit your React app in the browser. You should now be able to upload files successfully!

Congratulations! You've successfully implemented a file upload functionality in React.js using a PHP backend. Feel free to customize and expand upon this foundation to meet your specific project requirements. This guide should serve as a solid starting point for anyone looking to integrate file uploads into their React.js applications. Happy coding!