Fabflix

This project is one of my favorites in UCI since me and my friend built a website from scratch.

I took this project course in Spring 2021. An old website of the class can be found here. There weren’t any changes to the requirements to any of the projects/tasks.

No code/Github repo is listed because this project course is offered almost every quarter in UCI and always have the same requirements.

Background

The course project is building a fictitious e-commerce website called Fabflix. On the website, you can find and purhcase movies.

You have to build everything from scratch.

Task 1 - Setting up the Website

Task 1 was a simple start to the project. We had to create DDL statements to start the foundation for our database. The requirements were already given to us, we just had to make them work when we import the data.

My friend and I used AWS to host our web server (it’s required for the project). We used MySQL as our database and Apache Tomcat as our application server.

Since the course was to scale and improve our website, we had to choose an architecture design. We ended up choosing a REST API since it was the easiest to maintain and we didn’t have to change anything for future tasks.

After we got our database running, we had to make the front end of the website. For Task 1, we only had to create 3 pages that had a “jump” functionality (the pages can be redirect to each other).

For every task, we had to record a demo of our site functionality. So here’s Task 1’s video.

Task 2 - Development of the Website

Task 2 was the most difficult task since we were only given two weeks to develop a well built website. From knowing nothing to building a full-fledge website was difficult.. but we managed to do it and we learned a lot.

The requirements was to build a login page, search page, and a shopping cart.

The most difficult part was trying to figure out where to start. We had to make sure all of our Java Servlets connected to each other. We also wanted to pass information from a previous page to the next to keep things consistent. We weren’t allowed to use HTTP cookies to store anything.

Here’s a demo of Task 2.

Task 3 - Security and Importing More Data to the Database

We had to make our website secure, so we added reCAPTCHA. reCAPTCHA was only used for our login page though. We also had to add HTTPS to our page. What we did was force all HTTP requests to be redirected to HTTPS through Tomcat.

Since we had a database full of passwords, we had to encrypt those passwords. We used jasypt to encrypt every users’ password in our database.

After adding all these security features, we had to create an “admin” dashboard to the website. The admin dashboard was used to add movies and other entries manually. This was built using MySQL’s stored proecedures.

The last part of the task was to parse XML data and add it to the database. I remember this being a diifficult task because I had to look through XML data (there were thousands of entries) that were inconsistent. The parser added about 20,000 more entries to our database.

The majority of the demo shows that we’re adding the parsed data to our database. So skip to 6:31 if you want to see the website.

Task 4 - Full Text Search, Autocomplete, and Android Development

For this task, we had to build an Android application that can read data from our website/database. This is why REST API is a very powerful architecture for building applications; everything can connect together.

Full text search was mostly handled with AJAX since you return records with terms that match like ‘%ABC%’. There was also a bit of caching done to keep a list of what searches that was used.

Task 5 - Scaling and Performance Tuning

To test the performance of our website, we had to enable connection pooling. This is very helpful when performance testing because we set up a Master-slave replication (aka primary-secondary) to scale our website. We used another AWS instance and created a GCP (Google Cloud Platform) instance for load balancing.

We then tested the performance of our website’s search fecture by using JMeter. We tested this with 10 threads on each of our load balancers.

Conclusion

This was one of my last class I had to take at UCI. And I’m glad I took it since I’ve learned so much. I had a lot of fun with this class/project. If I had to do this class again, I would use a different web stack just to learn more and probably spend more time developing the UI/UX design.

The website looks sloppy in the end because my friend and I were trying to reach the deadline for the tasks and we weren’t really given any extra credit on how pretty it looked.