07 - 04 - React Router Photo Gallery

AbtaheeAli commented 4 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.

{
  "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

[ ] You should have at least 4 components: App, CategoryList, PhotoList, PhotoDetail.
[ ] 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
[ ] Render each photo in the given category on the photo list page with a thumbnail-sized version of your photos.
[ ] Render a large version of the photo on the photo details page.
[ ] Customize the given data to include your own photos and categories.
[ ] Add bread crumb navigation, as seen in the example.
[ ] Add a thumbnail to the first photo in each category to the home page, as seen in the example.

Adventure Mode

Choose one of the following:
- [ ] Find an external API for a photo-sharing site (such as Flickr) and use data from the API rather than the given JSON file.
- [ ] Create a C# backend to produce a list of categories with titles and descriptions, each category should have many photos. Create an API for this, deploy it, and then restructure your React front end to use this API.

Additional Resources

React Router Documentation

AbtaheeAli commented 4 years ago

https://github.com/AbtaheeAli/gallery-of-photos

I was finally able to get photo details working but could not get the bread crumbs to work. Honestly just got frustrated with my code. I should have hard-coded everything first which would have made my life easier.
I will be tackling the bread crumbs sometime this week on this app.

https://github.com/AbtaheeAli/photo-gallery

after getting frustrated with the bread crumbs, I decided to watch today's lecture, but this time follow along which helped me understand the flow of data more and how helpful it is to have a dynamic application. Adding my third card would have been tedious if it was not dynamic. After rewatching the lecture and following along, I feel like I have a better grasp of routers and classes.
This time around, I was able to get the bread crumbs to work. Having a dynamic and clean app seemed to make it easier, or maybe it's just me who needed a fresh start.

AbtaheeAli commented 4 years ago

Your homework 07 - 04 - React Router Photo Gallery was marked: Meets Expectations

Well done!

“Well done!”

gstark commented 4 years ago

Well done! I'm glad you took the time to see what we covered in class and applied it to your own project!

AbtaheeAli / assignments