A RESTful and hardening bookstore web application called BookGalaxy. The web app is developed through Vue framework for the frontend, and mySQL for the backend. It uses Tomcat server and update the webpage content through Ajax. The web app uses Vuex for state management to organize the shopping cart content. In the bookstore web app, you can shop the books through adding them to the shopping cart and checkout. The checkout page would require customer information such as name, address, phone, email and etc. It would validate the information based on its format through Vuelidate and server side validation. When hitting the complete purchase button, customer & order information would be recorded to the database and then clear the shopping cart.
https://cs5244.cs.vt.edu:8443/WenjunBookstoreTransact/
There are two transition effects on the web app. One is the category drop-down menu, when hover the category name such as "History", the list item would be enlarged for emphasis.
The second transition effect is the add-to-cart button. When hover the button, the text on the button would become bolder.
All the buttons and links in the web app have active/hover effects such as change the button background color.
The client-side validation would validate the name, address, phone, email, and credit card information to check if they are in a correct format.
In the server-side validation, before sending the information to the database, the customer information would be further validated as well as the shopping cart(such as invalid price, invalid quantity and etc.). The server-side would clean the customer data and organize the format(such as phone xxx-xxx-xxxx is the same as (xxx)xxx-xxxx). If fail to validate the information, the purchase would not be completed and error message would be sent back as response.