Here is the WEBSITE

(Please note this is a web app prototype and you may encounter some functions not working properly. This is just to show an idea. The Web App and Database are deployed on Heroku. The first time loading will take longer as the server is trying to 'warm-up'. After that, it should respond more quickly.

You can register as new user and then login to play with it. Also, you can use admin/admin for admin login to access some admin functions, but please just don't modify the content. The source code can be found on my github, where the link can be found at the bottom of the page.)


This is an E-Commerce Online Music Store Website involving front-end and back-end, where user can browse and search products. User can add products to shopping cart and checkout by filling customer information. User can leave messages asking questions. Admin can manage product inventory. Admin can manage messages left by customer.


Here we'll take a look at how the system is actually designed.

System Architecture

Here is an overview on the system architecture:

Unsplashed background img 3

It uses the popular MVC pattern, which separates concerns of business logic. This will make it easier to manage the complexity of large applications and keep it well organzied.

The Model part deals with domain objects such as product, cart, cartItem, customer and etc. The view part uses Bootstrap as front-end css framework and JSP to show the pages with dynamic content. Besides that, angular js is used to call REST service APIs on the backend to deal with shopping cart operations (add, update, remove cart items). Controllers will be handling the incoming requests and depending on the request type, it will be delegated to the correponding controller.

When a http request comes in, it is first filtered to make sure it has proper privilege to proceed. This is handled by the security controllers. After the security is cleared, it will be distributed to corresponding controllers. The controller will then either go to view block to send back the view content as response, it will need to consult some service components for further operations. For example, a registered customer wants to login and once successfully logged in (security cleared), the customer will be brought to the product list page (default controller to display view).

Business Flow
Unsplashed background img 3

The business flow looks like this. Before login, a guest can view product list and can also register as a customer. When logging in, the user can login as customer or administrator, depending on the credentials. Admin can view customer list or manage product. Customer can browse products and add products to shopping cart. Then he/she can proceed to checkout the shopping cart.

Tech Stack

· Front-end: HTML, CSS, Bootstrap, JSP, JavaScript, JQuery

· Back-end: Spring MVC, Spring Security, Spring Webflow

· Database: Spring Data, JPA, Hibernate, MySQL

Entity-Relationship Diagram

Unsplashed background img 3