AZ Fish Tracker
Seth Preble
Project Requirements
1. Save data utilizing web storage and display that data
2. Include an API connection that loads content dynamically to the page
3. A carousel of images through the use of a jQuery plugin
4. Include a jQuery plugin that allows more interaction on the page
5. Fully design the web app with valid HTML and CSS
Inspiration
After brainstorming ideas for the project, I decided I would focus on one of my longest lasting passions/hobbies. I've been fishing since I was a little kid, so I decided this would be the main purpose of my web app. With the knowledge of fishing at desert and forest lakes in Arizona, I made AZ fishing the main attraction of using the application.
Goal
With so many websites about fishing, I wanted to make something unique that would serve a purpose other than just the same regurgitated information. The record weight/length is one of the most fun aspects that many track when it comes to fishing so my original idea was to create a site where users could create an account and track their personal records. I also wanted to include all the fish species in Arizona with focus on the most popular and common game fish. I was going to use the fish species aspect as the API requirement, but I decided providing the approximate weather for the common fishing lakes would make more sense. This was because I wanted species info already available with no need to make an api call, while weather changes and is unique to each lake location. I knew I probably wouldn't have time to set up the entire backend for the users and fish tracking, so the lake forecasts and the fish information was the focal point. as I wouldn't be setting up the backend yet, I decided to also make the web app responsive.
Steps
The first element I focused on was the structure of the frontend and gathering information. I was quite surprised as to how many species of fish were in Arizona, so I ended up collecting smaller bits of data on the most commonly fished species. I then worked my way through the JavaScript requirements. This was in unison with some minimal styling which ended up being my primary focus towards the end of the project development. the most time consuming aspect was actually the information gathering, and I am extremely thankful I was able to find a congregated list of Arizona fish records.
Final Product
The Home Page with Nav and Carousel
The Fish Species with filtering tabs
Weather section that calls an API
Saves form data in web storage
Tools
Visual Studio Code
OWL Carousel- https://owlcarousel2.github.io/OwlCarousel2/
Informational Content
Some information used pertaining to the fish is licensed under the Creative Commons Attribution-ShareAlike 4.0 International License (CC BY-SA 4.0).
- [Largemouth Bass] - "https://en.wikipedia.org/w/index.php?title=Largemouth_bass&action=history"
- [Smallmouth Bass] - "https://en.wikipedia.org/wiki/Smallmouth_bass"
- [Yellow Bass] - "https://en.wikipedia.org/wiki/Yellow_bass"
- [White Bass] - "https://en.wikipedia.org/wiki/White_bass"
- [Rainbow Trout] - "https://en.wikipedia.org/wiki/Rainbow_trout"
- [Brook Trout] - "https://en.wikipedia.org/wiki/Brook_trout"
- [Cutthroat Trout] - "https://en.wikipedia.org/wiki/Cutthroat_trout"
- [Gila Trout] - "https://en.wikipedia.org/wiki/White_bass"
- [Tiger Trout] - "https://en.wikipedia.org/wiki/Tiger_trout"
- [Channel Catfish] - "https://en.wikipedia.org/wiki/Channel_catfish"
- [Flathead Catfish] - "https://en.wikipedia.org/wiki/Flathead_catfish"
- [Yellow Bullhead] - "https://en.wikipedia.org/wiki/Channel_catfish"
- [White Crappie] - "https://en.wikipedia.org/wiki/White_crappie"
- [Black Crappie] - "https://en.wikipedia.org/wiki/Black_crappie"
AZ records - https://premierangler.com/every-arizona-state-fishing-record/
Images
All images in the collage below were taken from Wikipedia commons that are part of public domain, aside from the last three- one from Unsplash under the Unsplash license and the last two from Adobe Stock under their extended license. The yellow bass at the very bottom is the only attribution required
Attribution: Iowa Department of Natural Resources, Attribution, via Wikimedia Commons
Final Thoughts
Most difficult:
Making the web app responsive, and reordering content that is populated by an API
Most fun:
Setting up the carousel and the filtering tabs with images
Next Steps:
In the end I was quite happy with not only the overall feel and design, but the project also serves a purpose. I plan on implementing a backend with a user system and functionality for users to save their own records for each species of fish. I may also include the option to save images of fish that could then be seen/shared with other users. Besides functionality, I would also want to do a much deeper dive into the statistics on fish in different lakes, add lake addresses, fish catch limits, US fish records, and basically a TON more information on the fish and how/where/when they are caught.
