Introduction

Fabflix is a full-stack web-based application designed by Dennis Chuong and Michael Lofton for COMPSCI 122B: Project in Web Design, an upper division course offered at the University of California, Irvine. During the span of 11 weeks, we developed the front-end and back-end of this website, utilizing HTML, CSS, Bootstrap, JavaScript, jQuery, Java, JDBC, MySQL, Tomcat, Maven, and AWS to create a movie-based application. This course offering was notorious for being especially difficult at UC Irvine, where the drop rate is higher than other courses. We worked closely in a fast-paced environment using tools offered by git, such as branches, pull requests, and project management tools. By using feature branching, we were able to avoid many issues that would have arisen from merge conflicts. This application has a mobile version offered to Android users as well.

Objective

The objective of this project was to build a fully functional, full-stack application within the time-frame of 11 weeks in a team environment. We were to incorporate concepts within our applications such as sessions, login authentication, database management, REST APIs, and load balancing without the assistance of external libraries to accomplish these tasks. The only library we were allowed to use was a jQuery library to handle auto-complete searches. By creating this application without the help of external libraries, we were able to develop a thorough understanding of how these concepts work. It was rewarding being able to integrate concepts from other classes to accomplish this such as hashmaps and circular arrays.

System Architecture

The user interface of this application was developed using HTML, CSS, and Bootstrap. We handled the logic of the application using Java, JavaScript and jQuery. jQuery was particularly helpful in being able to dynamically update information on the website. The database of the application was managed using MySQL and JDBC. We utilized powerful tools such as stored procedures alongside our database, as well as using prepared statements within our server-side code to prevent SQL injections. Lastly, the application was built and deployed on AWS EC2 instances through using Tomcat, Maven, and Apache. We were able to incorporate load balancing and sticky sessions within EC2 instances.

Work Distribution

Dennis Chuong

• CSS Styling
• Login Authentication (including encryption of passwords)
• Login Filtering (users cannot access employee pages)
• Session and Cookie management
• Front-end caching
• reCaptcha
• Prepared Statements
• Stored Procedures
• Full Text Search
• Autocomplete Search (through jQuery Autocomplete Library)
• Creating REST APIs for application
• JSON Object and JSON Array management
• Dashboard for Employees
• Payment Processing
• AWS EC2 Load Balancing
• AWS EC2 Sticky Sessions

Michael Lofton

• Individual Movie Page
• Individual Actor Page
• Browsing
• Sorting
• Pagination
• Multi-field substring search for movies and actors
• Creating REST APIs for application
• JSON Object and JSON Array management
• Prepared Statements
• XML Parsing
• HTTPS for AWS EC2 Instance
• SQL Scripts for Database Backup and Cleanup Automation
• Android Application Logic and Styling
• Narrated Video Demos
• JMeter Log Processing Script
• JMeter Time Measurement Report
• JMeter Generated Logs

Challenges/Roadblocks

We ran into many challenges that we had to overcome to be successful within this class. One of the notorious roadblocks that we ran into was not having our data from the database display on the website after a search query was submitted when using an AWS instance. The issue was addressed by modifying the database on AWS to accept our queries as intended.

We also had to find a way to efficiently clean and restore our database after we added new movie entries for testing purposes. We determined each table that was being affected when we added a new entry, and created sql scripts that would allow us to backup our data and reset any new changes made to the database. This allowed us to test and develop faster.

Another challenge that we ran into was having both teammates access the AWS EC2 instances, since they were run on one account. After conducting outside research, we found that we were able to share access to these instances through using IAM accounts offered by AWS.

Future Work

If we had more time to work on this application, we would spend much more time on styling the application with CSS. It would be a nice addition to be able to add animations to the website and fix the layouts in some other areas. In addition, we would integrate photos of the movies and actors which we could retrieve from IMDB. Lastly, we would have revamped the application through using React.js.

Conclusion

Throughout these 11 weeks, we have learned many web-development principles that we can apply. By developing an application from the ground up as we have, we were able to gain a thorough understanding of full-stack development.