Up for grabs: Create a sample Firebase app that adds penguins to the database!

[LearningNerd]

We've created a Firebase app, practiced using arrays and objects for more complex data structures, and we've even done some data modeling with penguins! Now let's take that example penguin app and make it into a real, functional Firebase app!

📚 Prerequisites: First complete the following challenges:

1. "Practice with JavaScript objects and arrays"
2. "Create a data model for our app"
3. "Create an example of the Firebase push() method"

✔️ To complete this challenge: Fork your own copy of this CodePen, write code to finish the sample app, save it, and then post a comment at the bottom of this page with a link to your CodePen!

❓ If you have any questions, please post a comment at the bottom of this page! (You can also ask us on Slack, but please post a comment here too so we can more easily reference it later.)

Review of the penguin data model

Remember our fictional penguins from the previous challenge? We used JavaScript objects to model each fictional penguin, using properties to contain each piece of information that we wanted to track for them!

Here's the example code that was provided at the end of that challenge, leaving out the methods (like sayHello) and instead only including the properties that we want to track for our penguins:

var gunter = {
  name: "Gunter",
  origin: "Adventure Time",
  canFly: false,
};

var ramon = {
  name: "Ramón",
  origin: "Happy Feet",
  canFly: true,
};

var fred = {
  name: "Fred",
  origin: "Sitting Ducks",
  canFly: false,
};

Then we created an array to contain a list of our three penguins: var penguins = [gunter, ramon, fred];

This sample CodePen uses a working Firebase database that contains a list of those penguins! Here's what the above penguin data looks like inside the Firebase console for this sample app:

Remember: Firebase only stores objects, strings, numbers, and Boolean values -- it actually doesn't have any native support for arrays! So to get around that, we stored the list of penguins as nested objects (objects inside of other objects). Now instead of using array indexes to uniquely identify each penguin, we're assigning each penguin object to a property that serves as a unique ID number -- just like a social security number!

Challenge: Finish the sample app to add penguins to the database!

🏆 The goal: Add a couple lines of code to this sample CodePen to make a working app that adds a penguin to the database every time the user clicks the button.

💡 Hint: if you haven't already, first take a look at the challenge to "Create an example of the Firebase push() method" and read all the solutions posted in the comments at the bottom of that page!

✔️ To complete this challenge: Fork your own copy of the sample CodePen, write code to get it working, save it, and then post a comment at the bottom of this page with a link to your CodePen!