Up for grabs: Create a sample Firebase app that updates penguins' names

[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 child() method"
4. "Create an example of the Firebase set() 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 update penguins' names!

:trophy: The goal: Add a couple lines of code to this sample CodePen to make a working app that updates the name of a specified penguin based on the user's input.

💡 Hint: if you haven't already, first take a look at the challenges for "Create an example of the Firebase child() method" and "Create an example of the Firebase set() method", and read all the solutions posted in the comments for both of those challenges!

✔️ 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!