Test Client

A simple full stack web application with the following technologies:

• React
• JavaScript
• Spring
• Java
• PostgreSQL
• Docker

Background

A simple web application where:

• The user can access the dummy database only if he/she logs in
• Jwt token based authentication
• Register themselves securely with hashed password
• Each columns can be filtered
• Multiple single filter options are available e.g. "consist", "contains", "starts with"
• Multi filtering option at the same is also available
• Dockerized version is available

Prerequisites

• Maven 3.6.3
• Node 19.8.1
• Java 17.0.7
• NPM 9.5.1
• PostgreSQL 12.16
• Git 2.30.2

Installation

Frontend

# Go to your local folder
cd {local_folder_of_cloned_project/frontend}

# Install dependencies
npm i

# Run application
npm run dev

# Visit localhost:5173

Backend

• Create a database called product for testing the application
• Use import.sql located in the db folder to populate the database
• Run the following command lines

# Navigate to the local folder
cd {local_folder_of_cloned_project/backend}

# Build the project to a jar file
mvn clean install

# Run the applicaiton
java -jar -Dspring.datasource.url=jdbc:postgresql://<YOUR_SQL_SERVER><YOUR_SQL_PORT>/<YOUR_DATABASE> -Dspring.datasource.password=<YOUR_DB_PASSWORD> -Dapplication.secret=<YOUR_SECRET_KEY> -Dapplication.username=<YOUR_DB_USERNAME> ./target/backend-0.0.1-SNAPSHOT.jar

Running with Docker

# Navigate to the local folder
docker-compose up

• Visit the dockerized website on localhost:5173

Usage

• The database is initialized with 50 products but no users
• User cannot access the database without first login
• First create a user and login afterwards
• With the received JWT token the user can browse the products
• User can use single filtering options located at the left upper corner of the table
• User can use multiple filtering options at the same time located above the table
• User can sort by each column
• User can export rows of data by selecting them one by one or by selecting all results
• Saved results keep their sorting order
• It is possible to save resulsts to both pdf and csv file formats