aksnell / assignments

0 stars 0 forks source link

07 - 04 - React Router Photo Gallery #27

Open aksnell opened 4 years ago

aksnell commented 4 years ago

Get to know React Router by building yourself a small photo gallery site.

Objectives

Requirements

Using the JSON data below as a starter, build a photo gallery app. Here's an example.

{
  "pandas": {
    "title": "Panda Bears",
    "description": "Pandas are bears native to south-central China, and are objectively the cutest animals on earth.",
    "photos": [
      {
        "title": "Panda Waving",
        "imageURL": "https://things-i-like.netlify.com/images/baby_panda.jpg",
        "sourceURL": "https://codeburst.io/pandas-for-data-stuff-code-challenge-7972207a8294"
      },
      {
        "title": "Großer Panda im Ocean Park, Hongkong",
        "imageURL": "https://things-i-like.netlify.com/images/grosser_panda.jpg",
        "sourceURL": "https://en.wikipedia.org/wiki/Giant_panda"
      },
      {
        "title": "Wild pandas get a boost; the iconic species has been upgraded from 'endangered' to 'vulnerable.'",
        "imageURL": "https://things-i-like.netlify.com/images/tree_panda.png",
        "sourceURL": "https://www.worldwildlife.org/magazine/issues/spring-2017/articles/wild-pandas-get-a-boost--2"
      },
      {
        "title": "Sacred Warrior, by Adrian Smith",
        "imageURL": "https://things-i-like.netlify.com/images/rising_sun.png",
        "sourceURL": "https://www.artstation.com/adrian-smith/albums/1298277"
      }
    ]
  },
  "miniatures": {
    "title": "Miniature Painting",
    "description": "I enjoy painting miniatures from board games. I've been painting since early 2018, here's some of my work.",
    "photos": [
      {
        "title": "City of Kings",
        "imageURL": "https://things-i-like.netlify.com/images/city_of_kings.jpg",
        "sourceURL": "https://www.instagram.com/p/Btv-0uYH8Xc"
      },
      {
        "title": "Blood Rage, Ram Clan",
        "imageURL": "https://things-i-like.netlify.com/images/ram_clan.jpg",
        "sourceURL": "https://www.instagram.com/p/BjRKLqYh4gK"
      },
      {
        "title": "Cormac the Druid, work in progress",
        "imageURL": "https://things-i-like.netlify.com/images/cormac.jpg",
        "sourceURL": "https://www.instagram.com/p/BnW2QrWDaky"
      }
    ]
  }
}

Save this as a JSON file in your project and import it.

If you hot-link photos from the internet, be sure to include a valid link back to the source.

Explorer Mode

Adventure Mode

Additional Resources