Todos for Birb Wather in React

birbs.json

{
  "birbs": {
    "birb1": {
      "type": "eagle",
      "color": "green",
      "size": "small",
      "seenAt": "2020-08-27T15:14:54-05:00",
      "altColor": "white",
      "wasSleeping": true,
      "location": "NSS parking lot",
      "notes": "pretty bird",
      "uid": "JuFkoAbbDPeJuNgtb4ya1a9ueg43"
    },
    "birb2": {
      "type": "sparrow",
      "color": "black",
      "size": "large",
      "seenAt": "2020-08-27T15:14:54-05:00",
      "altColor": "brown",
      "wasSleeping": true,
      "location": "tree",
      "notes": "made me turn around and leave immediately",
      "uid": "JuFkoAbbDPeJuNgtb4ya1a9ueg43"
    },
    "birb3": {
      "type": "seahawk",
      "color": "orange",
      "size": "medium",
      "seenAt": "2020-08-27T15:14:54-05:00",
      "altColor": "white",
      "wasSleeping": true,
      "location": "at the park",
      "notes": "was a loud birb",
      "uid": "JuFkoAbbDPeJuNgtb4ya1a9ueg43"
    },
    "birb4": {
      "type": "flamingo",
      "color": "pink",
      "size": "large",
      "seenAt": "2020-08-27T15:14:54-05:00",
      "altColor": "black",
      "wasSleeping": false,
      "location": "Opryland Hotel",
      "notes": "i liked this one",
      "uid": "JuFkoAbbDPeJuNgtb4ya1a9ueg43"
    },
    "birb5": {
      "type": "blue jay",
      "color": "blue",
      "size": "small",
      "seenAt": "2020-08-27T15:14:54-05:00",
      "altColor": "white",
      "wasSleeping": true,
      "location": "In the sky",
      "notes": "just flying around, tweeting",
      "uid": "JuFkoAbbDPeJuNgtb4ya1a9ueg43"
    },
    "birb6": {
      "type": "parrot",
      "color": "green",
      "size": "medium",
      "seenAt": "2020-08-27T15:14:54-05:00",
      "altColor": "orange",
      "wasSleeping": false,
      "location": "public beach",
      "notes": "loud and liked saying things",
      "uid": "sdfawrf43453g"
    },
    "birb7": {
      "type": "barn owl",
      "color": "brown",
      "size": "large",
      "seenAt": "2020-08-27T15:14:54-05:00",
      "altColor": "white",
      "wasSleeping": true,
      "location": "a barn. Duh.",
      "notes": "It was sleeping because it was daytime",
      "uid": "JuFkoAbbDPeJuNgtb4ya1a9ueg43"
    },
    "birb8": {
      "type": "hummingbird",
      "color": "cyan",
      "size": "small",
      "seenAt": "2020-08-27T15:14:54-05:00",
      "altColor": "white",
      "wasSleeping": false,
      "location": "backyard",
      "notes": "was eating some sugar",
      "uid": "sdfawrf43453g"
    },
    "birb9": {
      "type": "finch",
      "color": "grey",
      "size": "small",
      "seenAt": "2020-08-27T15:14:54-05:00",
      "altColor": "orange",
      "wasSleeping": true,
      "location": "bird house",
      "notes": "",
      "uid": "JuFkoAbbDPeJuNgtb4ya1a9ueg43"
    },
    "birb10": {
      "type": "birds-of-paradise",
      "color": "black",
      "size": "small",
      "seenAt": "2020-08-27T15:14:54-05:00",
      "altColor": "shiny blue",
      "wasSleeping": false,
      "location": "table",
      "notes": "tap to add one mana of any color",
      "uid": "JuFkoAbbDPeJuNgtb4ya1a9ueg43"
    },
    "birb11": {
      "type": "Swallow",
      "color": "blue",
      "size": "small",
      "seenAt": "2020-08-27T15:14:54-05:00",
      "altColor": "white",
      "wasSleeping": false,
      "location": "stick",
      "notes": "smol",
      "uid": "sdfawrf43453g"
    },
    "birb12": {
      "type": "woodpecker",
      "color": "black",
      "size": "medium",
      "seenAt": "2020-08-27T15:14:54-05:00",
      "altColor": "red",
      "wasSleeping": true,
      "location": "My tree in the backyard",
      "notes": "v loud",
      "uid": "JuFkoAbbDPeJuNgtb4ya1a9ueg43"
    },
    "birb13": {
      "type": "heron",
      "color": "aquamarine",
      "size": "large",
      "seenAt": "2020-08-27T15:14:54-05:00",
      "altColor": "white",
      "wasSleeping": false,
      "location": "the lake",
      "notes": "I liked this one",
      "uid": "JuFkoAbbDPeJuNgtb4ya1a9ueg43"
    },
    "birb14": {
      "type": "wren",
      "color": "brown",
      "size": "small",
      "seenAt": "2020-08-27T15:14:54-05:00",
      "altColor": "brown",
      "wasSleeping": true,
      "location": "on a rock",
      "notes": "just a lil guy",
      "uid": "JuFkoAbbDPeJuNgtb4ya1a9ueg43"
    },
    "birb15": {
      "type": "albatross",
      "color": "white",
      "size": "medium",
      "seenAt": "2020-08-27T15:14:54-05:00",
      "altColor": "coral",
      "wasSleeping": true,
      "location": "california",
      "notes": "big daddy",
      "uid": "12345"
    },
    "birb16": {
      "type": "swift",
      "color": "black",
      "size": "small",
      "seenAt": "2020-08-27T15:14:54-05:00",
      "altColor": "black",
      "wasSleeping": true,
      "location": "flying around",
      "notes": "v cool shape",
      "uid": "JuFkoAbbDPeJuNgtb4ya1a9ueg43"
    },
    "birb17": {
      "type": "potoo",
      "color": "grey",
      "size": "small",
      "seenAt": "2020-08-27T15:14:54-05:00",
      "altColor": "yellow",
      "wasSleeping": false,
      "location": "following me around",
      "notes": "look at it's eyes!!!",
      "uid": "JuFkoAbbDPeJuNgtb4ya1a9ueg43"
    },
    "birb18": {
      "type": "stork",
      "color": "azure",
      "size": "large",
      "seenAt": "2020-08-27T15:14:54-05:00",
      "altColor": "pink",
      "wasSleeping": false,
      "location": "the hospital",
      "notes": "👼🏻",
      "uid": "sdfawrf43453g"
    },
    "birb19": {
      "type": "kingfisher",
      "color": "blue",
      "size": "small",
      "seenAt": "2020-08-27T15:14:54-05:00",
      "altColor": "orange",
      "wasSleeping": true,
      "location": "Oceania",
      "notes": "it is very pretty",
      "uid": "JuFkoAbbDPeJuNgtb4ya1a9ueg43"
    }
  }
}

birbWatcher.md

Birb Watcher

We're gonna make a Birb Watching app! A place to track all those 🐦s you see flying around! Here's what we need to do to get started:

1. If you have scat-surprise, that's the repo we'll be using. Let's change the name: mv scat-surprise birb-watcher
2. Make sure you've npm i and npm start and that it's all working as expected
3. Do the Auth bit
4. Initial Component creation

This is going to be even more simple than React Pinterest was, in the interest of showing off ReactRouter. So only one collection!

If you want your domain to be different than Birbs, feel free to substitute anything else!

Note About Components

1. We're going to be creating all of our initial components in src/components/pages/. So you'll need to make that directory. We'll talk about why in class
   • So this means that Auth.js will go in src/components/pages/Auth/Auth.js

Auth

1. Shouldn't be anything new at this point
2. Do what we did in React Pinterst
3. Make sure to create your firebase app, enable realtime db, and enable google auth
4. Test it locally, push it up, merge it in

Initial Component Creation

1. Create the following components:

• EditBirb
• Home
• NewBirb
• SingleBirb

2. Each should have an <h2> with the name of the component in the render()
3. Import and use those in App, just to make sure they work
4. PR that in and you'll be ready to rock and roll