Alyjuoma-UI

A full-stack application with Node.js backend and React frontend, connected to MySQL database to show data as bar chart and line chart. The work was a continuation of the Smart Beverage Vending Machine 2022 project, which was funded by the European Agricultural Fund for Rural Development (Finland's Rural Development Programme 2014–2020 EU Recovery Fund additional resources, rural innovation groups EIP). You can find more information about the project on the project website Älyjuoma-​automaatti 2022. The work reported in the article was primarily carried out by Joni Rikula as a teaching assistant alongside his regular duties during 2024–2025.

Prerequisites

Before you begin, ensure you have the following installed on your system:

• Node.js (version 14 or higher)
• npm (comes with Node.js)
• MySQL database server

Installation

1. Clone the repository

git clone <your-repository-url>
cd <your-project-directory>

2. Install dependencies

Backend dependencies

# Navigate to backend directory (if separate) or root directory
npm install

Frontend dependencies

# Navigate to frontend directory
cd frontend  # or wherever your frontend code is located
npm install

Configuration

Environment Variables

Create a .env file in the root directory of your project and add the following environment variables:

PORT=4000
MYSQL_HOST=your_mysql_host
MYSQL_USER=your_mysql_username
MYSQL_DATABASE=your_database_name
MYSQL_PASSWORD=your_mysql_password

Important:

• Replace the placeholder values with your actual MySQL database credentials
• Never commit the .env file to version control for security reasons
• Add .env to your .gitignore file

Database Setup

1. Ensure your MySQL server is running
2. Create the database specified in your MYSQL_DATABASE environment variable
3. Make sure the user specified in MYSQL_USER has appropriate permissions to access the database

Running the Application

Start the Backend Server

# From the root directory (or backend directory)
node server.js

The backend server will start on port 4000 (or the port specified in your .env file).

Start the Frontend Development Server

# Navigate to frontend directory
cd frontend  # adjust path as needed
npm start

The frontend development server will typically start on port 3000 and should automatically open in your browser.

Project Structure

project-root/
├── server.js          # Backend entry point
├── package.json       # Backend dependencies
├── .env              # Environment variables (not in repo)
├── .gitignore        # Git ignore file
├── frontend/         # Frontend application
│   ├── package.json  # Frontend dependencies
│   └── src/          # Frontend source code
└── README.md         # This file

Development

Backend Development

• The backend server runs on the port specified in the PORT environment variable
• Server file: server.js
• Restart the server after making changes: node server.js

Frontend Development

• The frontend development server supports hot reloading
• Changes will automatically refresh in the browser
• Start command: npm start

Environment Variables Reference

Variable	Description	Example
PORT	Backend server port (needs to be 4000)	4000
MYSQL_HOST	MySQL server hostname/IP	localhost or 192.168.1.100
MYSQL_USER	MySQL username	your_username
MYSQL_DATABASE	MySQL database name	your_database_name
MYSQL_PASSWORD	MySQL password	your_secure_password

Authors

2025 Joni Rikula

License

Licensed under the MIT license. We are probably happy to help if you need a different open license.

Copyright

Copyright 2025 HAMK Häme University of Applied Sciences