2.E.2: Instagram Chat
- 1.Install, import and use a 3rd-party library in React
- 2.Understand how to use Firebase Realtime Database
- 3.Understand how to structure chat data in a NoSQL JSON database
- 4.Know how to read documentation to apply a new technology
This is the first of multiple exercises culminating in an Instagram clone. We start with chat because it a common example and will allow us to warm up to network requests, promises and Firebase.
- 1.Fork and clone the Rocket Academy Instagram starter repo
npm ito install packages in
- 1.Rocket recommends following the text and not video instructions on the Firebase docs page because the video demonstrates creating a Firebase app from scratch, not with Rocket's starter repo that includes starter code from Create React App.
- 2.Create a Firebase project in the Firebase console and call it "Rocketgram" (calling it "Instagram" may give our users scam warnings after we deploy)
- 1.There is no need to enable Google Analytics for this project. Disable that option when creating a project to avoid creating a Google Analytics account.
- 3.Register our app with our Firebase project - you can do this in your Firebase console underneath your registerted firebase project,
- 1.We can call our app "Rocketgram"
- 2.No need to set up Firebase Hosting for now
- 3.No need to
npm install firebasebecause Rocket has already installed it in
- 4.Replace the contents of the
src/firebase.jswith our app's config details. Consider adding this to a .env. We will retrieve the
databaseUrlproperty after the next step.
- 3.Set up Firebase Realtime Database in the repo as per the official Firebase documentation
- 1.Start from Create a Database; we just completed the prerequisite in the previous step
- 1.When creating a database in the Firebase console, select the location nearest to you when prompted to choose "Realtime Database location"
- 2.Select "Start in test mode" for security rules; we can set up more stringent security rules later after learning about authentication.
- 1.When we start in test mode, in 30 days Firebase may notify us they will turn off database access unless we update security rules. When that happens, feel free to set both read and write access to
true, even though it is insecure for now. Nobody will hack us because our apps are not "important", and if your app is storing important data please let your section leader know so we can secure it better.
- 2.Skip "Configure Realtime Database Rules" section in the docs; we will set up database rules after learning authentication.
- 1.Rocket has set up initialisation code in the starter repo in
- 2.Find your Realtime Database URL as per instructions in this section and paste it as the value of the
databaseURLproperty in the
src/firebase.js. Your database URL should look something like
- 3.Once we have added the database URL to
firebase.js, we should be able to start using our database in React components that import the database from
firebase.js. See how we import the database in
App.jsfor an example.
- 4.Practice safe sharing, create implement your .env so that you do not share your Firebase credentials online when pushing to GitHub.
- 1.As in previous exercises, most of this exercise's code and logic is in
- 1.Notice the use of the
- 2.Notice the use of
componentDidMountlifecycle method to add Firebase's listener only once on component mount.
- 3.Notice the use of
writeDatahelper method to save a message when the user clicks Send.
- 4.Notice the mechanics of sending and retrieving data from Firebase with
- 2.Notice the boilerplate Firebase config in
firebase.js. We will need to fill this in with our Firebase app's details.
- 1.Notice how
firebase.jsexports the Realtime Database instance that we import in
App.jsto access the database.
Add UI and logic to
App.jsto accept user input in a form, save it in Firebase on submit and render on the page after submit.
- 1.We may find material on controlled forms useful from Module 1
- 2.We should be able to open multiple client apps, e.g. multiple browser tabs or windows connected to our app and have them chat with each other in real time. We will be able to incorporate usernames once we implement authentication later in this module.
Dateobject to generate and send the current datetime to Firebase when a user sends a message. After retrieving datetimes with messages we can use
Date's built-in formatting methods to render datetime nicely next to each message.
Customise the UI to make it visually appealing. Rocket did not customise the UI in our starter code or solution because our focus has been on Firebase mechanics.
Submit a pull request to the
mainbranch of Rocket's Instagram repo and share your PR link in your section Slack channel.
To play with the solution, clone it, run
npm start. We did not host a reference deployment for this solution because we will build on this repo in the following exercises and will host a reference deployment for the final one.