Giter Club home page Giter Club logo

audubon-app1's Introduction

General Assembly Logo

Audubon Society Website

Build a website for the Audubon Society!

Prerequisites

  • React
  • Components, props, and state
  • React Router

Instructions

  1. Fork and clone this repository.
  2. Change into the new directory.
  3. Create a new React app
  4. Fulfill the listed requirements.

Create a new React app in the root of this repository (i.e. create-react-app .) and build your project out from there. You are required to turn in your submission by making a pull request on the original repository.

Unless otherwise specified on the calendar or by an instructor, homework is due the next morning by 9:00am.

Requirements

The Audubon Society has asked you to build them a website where users can upload pictures of birds and see those pictures in their own dedicated show page. So, your app will have Create and Read. Your app should therefore have the following pages:

Home Page: Users should see a thumbnail image for each bird. Clicking on the bird image should take the user to the show page for that bird.

Show Page: Users should see all the data for a particular bird. Each bird has an image, name, and genus. The show page should also include a link to the Audubon Field Guide page for that bird. Birds for which there is an active conservation effort will have a Conservation Status (not all birds will have this though).

Bonus

Create Page: Users should be able to navigate to this page from the homepage. It should have a form for adding a new bird with fields for:

  • name: the bird's common name
  • genus: the bird's scientific name
  • conservationStatus: If there is a conservation status for the bird
  • image: an image of the bird
  • homepage: a link to the Audubon Field Guide page.

Mocks

Build your app to the following mocks:

Home Page: homepage

Show Page: show page

Create Page: create page

Use the following for the initial state of your application:

const birds = [
  {
    name: "Acadian Flycatcher",
    genus: "Empidonax virescens",
    conservationStatus:
      "Would be vulnerable to loss of habitat, but no significant decline noted so far. In some regions, Brown-headed Cowbirds often lay eggs in nests of this species.",
    image:
      "https://www.audubon.org/sites/default/files/styles/bird_illustration/public/4492_Sibl_9780307957900_art_r1.jpg?itok=8HuhVVIy",
    homepage: "https://www.audubon.org/field-guide/bird/acadian-flycatcher"
  },
  {
    name: "Acorn Woodpecker",
    genus: "Melanerpes formicivorus",
    conservationStatus:
      "Still widespread and common. Reliance on specific oak habitats may make it vulnerable to the effects of climate change.",
    image:
      "https://www.audubon.org/sites/default/files/styles/bird_illustration/public/2420_Sibl_9780307957900_art_r1.jpg?itok=7khdegFX",
    homepage: "https://www.audubon.org/field-guide/bird/acorn-woodpecker"
  },
  {
    name: "American Black Duck",
    genus: "Anas rubripes",
    conservationStatus:
      'Still abundant locally, but has declined drastically in interior parts of range. Clearing of forest has favored invasion by Mallards, which hybridize extensively with Black Ducks, leading to genetic "swamping" of population.',
    image:
      "https://www.audubon.org/sites/default/files/styles/bird_illustration/public/783_Sibl_9780307957900_art_r1.jpg?itok=q04--9Fr",
    homepage: "https://www.audubon.org/field-guide/bird/american-black-duck"
  },
  {
    name: "American Flamingo",
    genus: "Phoenicopterus ruber",
    conservationStatus: "",
    image:
      "https://www.audubon.org/sites/default/files/styles/bird_illustration/public/601_Sibl_9780307957900_art_r1.jpg?itok=AcEmNVlO",
    homepage: "https://www.audubon.org/field-guide/bird/american-flamingo"
  },
  {
    name: "American White Pelican",
    genus: "Pelecanus erythrorhynchos",
    conservationStatus:
      "Colonies are vulnerable to disturbance and habitat loss. Total population probably declined through first half of 20th century, substantial increase since 1970s.",
    image:
      "https://www.audubon.org/sites/default/files/styles/bird_illustration/public/267_Sibl_9780307957900_art_r1.jpg?itok=eUpCM6_Y",
    homepage: "https://www.audubon.org/field-guide/bird/american-white-pelican"
  },
  {
    name: "Aplomado Falcon",
    genus: "Falco femoralis",
    conservationStatus: "",
    image:
      "https://www.audubon.org/sites/default/files/styles/bird_illustration/public/990_Sibl_9780307957900_art_r1.jpg?itok=gs0Ngawy",
    homepage: "https://www.audubon.org/field-guide/bird/aplomado-falcon"
  },
  {
    name: "Atlantic Puffin",
    genus: "Fratercula arctica",
    conservationStatus:
      "Major declines during 19th century were owing to overharvesting of eggs and adults. During 20th century, continued to decrease at southern end of breeding range in both North America and Europe. Vulnerable to introduction of predators (such as rats) to nesting islands. An ambitious Audubon project to re-introduce puffins on former nesting islands off Maine, started in the 1970s, has been a major success. However, at the southernmost colonies, puffins have poor breeding success in warm-water years, which are becoming more frequent as the climate heats up.",
    image:
      "https://www.audubon.org/sites/default/files/styles/bird_illustration/public/2514_Sibl_9780307957900_art_r1.jpg?itok=nTHL4EEu",
    homepage: "https://www.audubon.org/field-guide/bird/atlantic-puffin"
  },
  {
    name: "Aztec Thrush",
    genus: "Ridgwayia pinicola",
    conservationStatus: "",
    image:
      "https://www.audubon.org/sites/default/files/styles/bird_illustration/public/3556_Sibl_9780307957900_art_r1.jpg?itok=LP8V2DuC",
    homepage: "https://www.audubon.org/field-guide/bird/aztec-thrush"
  }
];

Plagiarism

Take a moment to refamiliarize yourself with the Plagiarism policy. Plagiarized work will not be accepted.

  1. All content is licensed under a CC­BY­NC­SA 4.0 license.
  2. All software code is licensed under GNU GPLv3. For commercial use or alternative licensing, please contact [email protected].

audubon-app1's People

Contributors

jkeohan avatar jrhorn424 avatar tomatohammado avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.