...
The final part of application is the profile page. It contains the summary of tattoo style analysis based on the InkBox content. Additionally, any liked artists are also shown. However, if the users were not logged on, they will be greeted by Tim Beaver, and prompted to sign up for free!
Implementation
We use javascript and jQuery to implement the frontend. We did everything from scratch because we realized that most people will be using twitter bootstraps, and we wanted our website to look different. This comes with a cost. We made heavy use of css and custom graphic design to make sure that our interface looks consistent. All interactions (drag and drop, slideshow, mouse hovering, etc) were all handled using javascript, jQuery, or css.
We use ruby on rails as our backend to handle our database, which was created by hand from google searches. All images were manually labeled. We also implemented cookie system to save user's preference in case they do not want to log in.
The most tricky thing we find was how to populate the display area in the browse page. We were hoping to display all the images we have, and separate them into pages, but this would complicate the mechanism that keeps track of image location on the display area, and we did not have time to implement it. For this reason, we decide to have a fix number of tattoo images shown in the random mode, which may be inconvenient if the user wants to browse the entire database.