Front-end interface for mySQL database application

Desktop version of the site with before user selection of query type

This is the frontend for the full stack mySQL application I built for the Databases CSCI-440 class at Montana State University. The server was hosted on Digital Ocean using CentOS 7.6, mySQL and Node.js for the backend. View the backend repository to see how the API endpoints are structured. The dataset used for this full-stack application was the FBI Crime Statistics for 2015 and 2016 with some expanded random data to meet the parameters of the assignment.

This frontend interface for the application is mobile responsive through the use of media queries and the styled-components node package (see below for screenshots of desktop/tablet/mobile displays). The interface allows for simple user selectable dropdowns that will generate the HTTP request and recieve a JSON response from the RESTful API.

Overview of the frontend technologies used to create the application:

• React
• Axios
• Styled-components
• React JSON to Table
• GitHub Pages for deployment of frontend
• ReactStrap for the dropdowns and submit button

Overview of the backend technologies used to create the application:

View the backend repository

• NodeJS
• Express
• mySQL
• Morgan

Desktop version of the site with a side-by-side comparison of API results


Tablet version of the site with a side-by-side comparison of API results


Mobile version of the site with a side-by-side comparison of API results


Desktop version of the site with the 'high crime' API results