Portfolio Project 4: The Fish Store Using Javascript

I have finally reached the end of the Javascript module! Had some significant life changes that caused this module to last much longer than I expected.

Those changes involved working 60 to 80 hour weeks for several months, being on call on the weekends, and then being on call overnight. The job had already been very demanding over the last couple of years significantly ramped up this year. This left very little time and energy to work on my class and also give my family the time they deserve. After working at that company for over 6 years, I decided to resign at the end of July 2022, as I was no longer finding joy in what I was doing and it was impeding my personal goals for my life and my career. So moving forward I am throwing myself into finishing my class and pursuing the career that I want, in Software Engineering.

For my Javascript Portfolio project, I created a web application called The Fish Store. When I was in high school I had multiple saltwater fish tanks (both 90 gallons) and enjoyed the hobby. I remember back then that the websites for fish information and stores were pretty rudimentary in design and functionality. Thinking back to this time, I thought it would be a great "improvement project" to create a proof of concept that would bring a better user experience to this community/hobby.

For this project we had to create a ruby on rails API that would run on a server (back-end) and the HTML/Javascript front-end application would pull from it. Due to this design, I wanted the web application to be as dynamic as possible because as the background API database grows, the web application would need to be dynamic enough to handle the growing database.

What I came up with is a tile/card design for each fish along with a filter feature to be able to easily sort for fish in a certain category. Many of the older websites that I used to use for this hobby had the fish divided by category, so keeping with the similar structure, which I think makes sense, I created a filter feature that would only display the tiles of the fish that belong to that category.

Another improvement I made over existing websites is that I use video to show the fish, rather than just a picture. Pictures can sometimes be misleading and having a video showing how the fish moves and looks, creates a better user experience. I do admit that if you have too many tiles/cards on a single page with too many videos could slow down the website and require it to use a lot of resources. What I imagine is that as this website would evolve, if it was in use, the developers would limit the number of tiles on a single page and allow a user to load only a specific number at time. Then there would be a "next page" element which would not physically direct you to a new page, but would load the next set of tiles asynchronously.

I kept the HTML file very minimal, with only the title and the "Call for ordering" being the only HTML elements generated by the HTML file. Everything else would be handled by the Javascript code.

I definitely did run into some challenges when creating the Javascript code to dynamically handle the tiles. I'm not upset at all about the challenges, because this project definitely helped reinforce my understanding of Javascript as it took a significant amount of debugging and re-coding to get everything to work correctly.

During the process of developing the application, I did have to take a step back. Originally I was using one Fetch call to get the JSON structure when the page was initially loaded and then I was hiding/showing things based on the user navigating the page. I realized that this lead to some cumbersome resource use and also made the coding more messy. One example being that all videos were being loaded and running, but would just be hidden in the background. I decided it was best to create and remove elements as the user navigated the application, which helped me keep my code cleaner.

One challenge in particular gave me a lot of issues. This challenge was the setup of the Review page for each fish:

1. Loads a new review form in the tile
2. Loads existing reviews in the tile
3. Allows selecting of your rating out of 5 stars
4. Asynchronously posts and displays a newly submitted review

Figuring out the 5 star review process was enjoyable as this was new and not something that had been covered in the class (see my post on this particular topic here. It took some research and thought to get this working correctly. I had to look up how to add a star and how to use CSS to fill the star. Then I had to create a loop to generate not one, but five stars, and a listener for each star. It also took thought from a functionality standpoint because if I click on the fourth star, then I would want stars one through three to also automatically fill in and also save the star count to the API database. Also if a user accidentally clicked five stars, but meant to put four stars, and caught this mistake before submitting the review, they would need a way to allow the user to adjust the stars. I was quite proud when I got this to display and function correctly. To get the stars working I had to do the following:

Located in HTML file, I need to add a link to Font Awesome.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

I used the Javascript code to create the stars.

for (let k = 1; k < 6; k++){
          let starDiv = createDiv('fa fa-star', k)
          element = starsDiv.appendChild(starDiv)
          if (k <= review.stars){
            starDiv.className = 'fa fa-star checked'
          }
      }

Setup the following in the CSS file.

.checked {
  color: orange;
}

The most challenging thing I ran into with the development of the Review page was doing the submission of the new review and having it immediately update the page with the added review so the user can see their contribution without having to reload the webpage. The initial setup itself was not difficult, but since each tile runs asynchronously from the others, I ran into bugs when I would:

1. Open the Review page on a fish, which I will call Fish #1.
2. Open the Review page on a second fish, which I will call Fish #2.
3. Submit a review on Fish #1. This created some data integrity issues because the variables/arguments would carry over from opening the Fish #2 review page (last page opened) into the Fish #1 review submission. It took some serious thought and step-by-step troubleshooting to debug the code and make the code re-load the correct target Fish variables/arguments when the user has the ability to manipulate all tiles independent of each other. That is where console.log() function helps considerably as it can be inserted to see variable/argument information and to verify process flow of the code.

I kept the functionality of the page focused on the user experience with Javascript and did not include an admin page or online ordering/cart functionality. We have done that in the past in other phases of the class and I'm sure I will be having full blown functionality in my final project.

I am very excited for the final Phase of the course and my final project! That said, the Javascript portion has been my favorite so far because of the challenges you run into with displaying correct data, the design aspect of Javascript, and the ability to create a very dynamic web application with it.