Week 05 Day 3 - Photo Gallery

gstark commented 6 years ago

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

Objectives

Adding dependencies to your React Project
Navigating JSON data structures
Using the React Router library
Using parameters in React Router

Requirements

Using the JSON data below as a starter, build a photo gallery app. Here's an example: http://things-i-like.surge.sh/

{
  "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://cdn-images-1.medium.com/max/1600/1*i1vVm3EqqDIkyucD0079wg.jpeg",
        "sourceURL": "https://codeburst.io/pandas-for-data-stuff-code-challenge-7972207a8294"
      },
      {
        "title": "Großer Panda im Ocean Park, Hongkong",
        "imageURL":
          "https://upload.wikimedia.org/wikipedia/commons/thumb/0/0f/Grosser_Panda.JPG/2560px-Grosser_Panda.JPG",
        "sourceURL": "https://en.wikipedia.org/wiki/Giant_panda"
      }
    ]
  },
  "miniatures": {
    "title": "Miniature Painting",
    "description": "I enjoy painting miniatures. I've only been painting for about 6-months, here's some of my work.",
    "photos": [
      {
        "title": "Blood Rage, Ram Clan",
        "imageURL":
          "https://instagram.ftpf1-1.fna.fbcdn.net/vp/ac13de8676b9e7d7b3a4f1aaf38a9a55/5C3728A2/t51.2885-15/e35/32203464_178578342778306_8009127367152762880_n.jpg",
        "sourceURL": "https://www.instagram.com/p/BjRKLqYh4gK/?taken-by=ambethia"
      },
      {
        "title": "Cormac the Druid, work in progress",
        "imageURL":
          "https://instagram.ftpf1-1.fna.fbcdn.net/vp/fbe274a10d9f125721b996b1c900a38a/5BFA5B76/t51.2885-15/e35/37190638_643058652730656_5948932439748378624_n.jpg",
        "sourceURL": "https://www.instagram.com/p/Bl09Fg3jM54/?taken-by=ambethia"
      }
    ]
  }
}

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

[x] You should have at least 4 components: App, CategoryList, PhotoList, PhotoDetail.
[x] On the home page, your category list should render the title of each category and link using the key. For examples "Panda Bears" should link to /pandas
[x] Render each photo in the given category on the photo list page with a thumbnail sized version of your photos.
[x] Render a large version of the photo on the photo details page.

Adventure Mode

[x] Customize the given data to include your own photos and categories.
[x] Add bread crumb navigation, as seen in the example.
[x] Add a thumbnail to the first photo in each category to the home page, as seen in the example.

Epic Mode

[ ] Find an external API for a photo sharing site (such as Flickr) and use data from the API rather than the given JSON file.

Additional Resources

React Router Documentation

JOLee83 commented 6 years ago

https://github.com/JOLee83/photo-gallery.git https://things-i-like-justin.surge.sh

JOLee83 commented 6 years ago

Found a flaw with mine and Jason's pages. when you go to source page after the details then try and go back you get a page not found message from surge. Is there a way to fix this or should I just set the link to open in a new window?

gstark commented 6 years ago

Lets leave it as-is but come see me and Jason and we will take a look.

gstark commented 6 years ago

Your homework was marked: Meets Expectations

Gavin Approved!

“Gavin Approved!” — via Jason L Perry

JOLee83 / assignments