/fish-dish

Turing Front End Engineering Mod 3 Final Project

Primary LanguageJavaScript

Fish Dish

Fish Dish is an Application designed with the concerning pescatarian in mind. The application provides an expansive interactive list of all of the most popular ocean fish species consumed in the U.S.. As a user, you can:

  • see and search all of the fish by name
  • save fish (by clicking the star button on a fish's card)
  • see all of your saved fish by navigating to the saved button

Application Deployed at:

Screenshots of Deployed Application

Fish Dish Landing Screen

Fish Dish Popular Screen

Fish Dish Saving a Fish

Fish Dish Fish Details

Fish Dish Viewing Saved Fish

Fish Dish Search

Fish Dish Search with Term

Fish Dish Search Results

Fish Dish Error

Goals and Objectives

  • Although this App was built with mobile first in mind, it is fully functional on Apple and Android mobile devices, as well in most modern browsers
  • Create a beautiful and functional UI / UX
  • Continue honing REACT skills by:
    • utilizing life-cycle-methods
    • creating SRP components
    • Using functional v. class components in a well thought-out fashion
  • Research a new API and implement (chose FishWatch.gov Species Content API)
  • Write robust unit and integration tests

Setup

  1. Clone down this repo
  2. Install the library dependencies. Run:
npm install
  1. Then, run npm start in your terminal. Go to http://localhost:3000/ and you should see the page there! Then, you can enter control + c in your terminal to stop the server at any time.

Technologies Used

  • React
  • create-react-app
  • React Testing Library
  • Jest
  • DOM Testing Library
  • JavaScript
  • FishWatch.gov Species Content API

Contributors:

John Watterson