Rocket Academy Bootcamp
  • 🚀Welcome to Bootcamp!
  • 🛠️Logistics
    • Course Schedules
    • Course Methodology
    • Required Software
    • LinkedIn Education Badge
  • 📚General Reference
    • Naming, Casing, and Commenting Conventions
    • VS Code Tips
    • Recommended Resources
  • 🪨0: Foundations
    • 0.1: Command Line
    • 0.2: Git
      • 0.2.1: Branches
    • 0.3: GitHub
      • 0.3.1: Pull Requests
    • 0.4: JavaScript
      • 0.4.1: ES6
      • 0.4.2: Common Syntax
      • 0.4.3: Reference vs Value
      • 0.4.4: Classes
      • 0.4.5: Destructuring and Spread Operator
      • 0.4.6: Promises
        • 0.4.6.1: Async Await
    • 0.5: Node.js
      • 0.5.1: Node Modules
      • 0.5.2: NPM
      • 0.5.3: Nodemon
  • 🖼️1: Frontend
    • 1.1: HTML
    • 1.2: CSS
      • 1.2.1: Layout
    • 1.3: React
      • Styling in ReactJs
      • Using Styling Libraries with React
      • React Deployment
    • 1.E: Exercises
      • 1.E.1: Recipe Site
      • 1.E.2: Portfolio Page
      • 1.E.3: World Clock
      • 1.E.4: High Card
      • 1.E.5: Guess The Word
    • 1.P: Frontend App
  • 🏭2: Full Stack
    • 2.1: Internet 101
      • 2.1.1: Chrome DevTools Network Panel
      • 2.1.2: HTTP Requests and Responses
    • 2.2: Advanced React
      • 2.2.1: AJAX
      • 2.2.2: React Router
      • 2.2.3: useContext
      • 2.2.4: useReducer
      • 2.2.5: Environmental Variables
      • 2.2.6: React useMemo - useCallback
    • 2.3: Firebase
      • 2.3.1: Firebase Realtime Database
      • 2.3.2: Firebase Storage
      • 2.3.3: Firebase Authentication
      • 2.3.4: Firebase Hosting
      • 2.3.5: Firebase Techniques
    • 2.E: Exercises
      • 2.E.1: Weather App
      • 2.E.2: Instagram Chat
      • 2.E.3: Instagram Posts
      • 2.E.4: Instagram Auth
      • 2.E.5: Instagram Routes
    • 2.P: Full-Stack App (Firebase)
  • 🤖3: Backend
    • 3.1: Express.js
      • 3.1.1 : MVC
    • 3.2: SQL
      • 3.2.1: SQL 1-M Relationships
      • 3.2.2: SQL M-M Relationships
      • 3.2.3: SQL Schema Design
      • 3.2.4: Advanced SQL Concepts
      • 3.2.5: SQL - Express
      • 3.2.6: DBeaver
    • 3.3: Sequelize
      • 3.3.1: Sequelize One-To-Many (1-M) Relationships
      • 3.3.2: Sequelize Many-To-Many (M-M) Relationships
      • 3.3.3: Advanced Sequelize Concepts
      • 3.3.4 Database Design
    • 3.4: Authentication
      • 3.4.1: JWT App
    • 3.5: Application Deployment
    • 3.E: Exercises
      • 3.E.1: Bigfoot JSON
      • 3.E.2: Bigfoot SQL
      • 3.E.3: Bigfoot SQL 1-M
      • 3.E.4: Bigfoot SQL M-M
      • 3.E.5: Carousell Schema Design
      • 3.E.6: Carousell Auth
    • 3.P: Full-Stack App (Express)
  • 🏞️4: Capstone
    • 4.1: Testing
      • 4.1.1: Frontend React Testing
      • 4.1.2: Backend Expressjs Testing
    • 4.2: Continuous Integration
      • 4.2.1 Continuous Deployment (Fly.io)
      • 4.2.2: Circle Ci
    • 4.3: TypeScript
    • 4.4: Security
    • 4.5: ChatGPT for SWE
    • 4.6: Soft Skills for SWE
    • 4.P: Capstone
  • 🧮Algorithms
    • A.1: Data Structures
      • A.1.1: Arrays
        • A.1.1.1: Binary Search
        • A.1.1.2: Sliding Windows
      • A.1.2: Hash Tables
      • A.1.3: Stacks
      • A.1.4: Queues
      • A.1.5: Linked Lists
      • A.1.6: Trees
      • A.1.7: Graphs
      • A.1.8: Heaps
    • A.2: Complexity Analysis
    • A.3: Object-Oriented Programming
    • A.4: Recursion
    • A.5: Dynamic Programming
    • A.6: Bit Manipulation
    • A.7: Python
  • 💼Interview Prep
    • IP.1: Job Application Strategy
    • IP.2: Resume
    • IP.3: Portfolio
Powered by GitBook
On this page
  • Learning Objectives
  • Introduction
  • Setup
  • Base: Upgrade form to include file uploads, build news feed
  • Example: File input field in React
  • Example: Import aliases for multiple named imports of the same name from different modules
  • Comfortable: Implement likes
  • More Comfortable: Comments
  • Submission
  • Reference Solution
  1. 2: Full Stack
  2. 2.E: Exercises

2.E.3: Instagram Posts

Previous2.E.2: Instagram ChatNext2.E.4: Instagram Auth

Last updated 1 year ago

Learning Objectives

  1. Understand how to use JavaScript promises

  2. Understand how to use Firebase Storage

  3. Understand how cloud storage works: upload files, store references to those files in our database

  4. Know how to read documentation to apply a new technology

Introduction

We will build on the previous exercise to incorporate file uploads and store data as posts to display on our shared feed.

Setup

  1. Start with the code we wrote in the previous exercise in our forked and cloned copy of the .

  2. Set up Firebase Storage in the repo as per the

    1. Start from "Create a default Cloud Storage bucket"; we just completed the prerequisite in the previous step

      1. Choose "Start in Test mode" when setting up Cloud Storage to avoid setting up security rules for now. We will address this after learning Firebase Authentication.

      2. Choose a Cloud Storage location nearest to your users. See for a list of locations and their descriptions. Singapore is asia-southeast1.

    2. In "Add your bucket URL to your app", our bucket URL may already be in our Firebase config in firebase.jsx, but we will want to import getStorage from firebase/storage and export const storage = getStorage(firebaseApp); from firebase.jsx with the same pattern we used for Realtime Database. We can then import storage from ./firebase in App.jsx like what we did with Realtime Database.

    3. We can ignore the options in "Advanced setup" for now; nothing there that we should need yet

  3. Practice safe sharing, create implement your .env so that you do not share your Firebase credentials online when pushing to GitHub.

Base: Upgrade form to include file uploads, build news feed

  1. Upgrade the form we created in Instagram Chat to accept file uploads in addition to text. Form submissions will now be considered "posts" that we will save to our database and render in our news feed.

    1. We can use <input type="file" /> to accept file inputs in our form. See code snippet below for an example of how to use file input fields with React.

    2. On form submit:

      1. Upload the file to Firebase Storage

      2. Save the response, the file's database URL together with the post text in Realtime Database.

        1. Note: Be careful when using promises we may have to wait for the upload and getDatabaseURL promises to resolve before we can save the database URL.

        2. Note: We may want to import and use functions from firebase/storage as per the Firebase Upload Files tutorial.

    1. You may find that the images we upload render too large. Rocket found that creating and applying a CSS class on card images and setting width to 50vw and height to 30vh gave a good look.

Import Bootstrap CSS to use React Bootstrap

Warning
(6:29521) autoprefixer: Replace color-adjust to print-color-adjust. The color-adjust shorthand is currently deprecated.

Example: File input field in React

File input example
import { useState } from "react";

function App() {
  const [textInputValue, setTextInputValue] = useState("");
  const [fileInputFile, setFileInputFile] = useState(null);
  const [fileInputValue, setFileInputValue] = useState("");
  return (
    <>
      <h1>Instagram Bootcamp</h1>
      <div className="card">
        <form {/* Add in submit handler*/}>
          <input
            type="file"
            value={fileInputValue}
            onChange={(e) => {
              setFileInputFile(e.target.files[0]);
              setFileInputValue(e.target.value);
            }}
          />
          <br />
          <input
            type="text"
            value={textInputValue}
            onChange={(e) => setTextInputValue(e.target.value)}
          />
          <input
            type="submit"
            value="Send"
            // Disable Send button when text input is empty
            disabled={!textInputValue}
          />
        </form>
      </div>
    </>
  );
}

Example: Import aliases for multiple named imports of the same name from different modules

import { onChildAdded, push, ref as databaseRef, set } from "firebase/database";
import {
  getDownloadURL,
  ref as storageRef,
  uploadBytes,
} from "firebase/storage";

Comfortable: Implement likes

  1. Implement like functionality on posts. Every post in the news feed has a heart-shaped like button that increments the posts' like count by 1 when we toggle it on. When we toggle the like button off, our app decrements the relevant posts' like count.

    1. This feature will be buggy for now (e.g. we can refresh our page and like the same post again for duplicate likes) until we implement authentication in the next exercise.

More Comfortable: Comments

Implement commenting functionality on posts. Every post in the news feed has a comment bar that allows users to leave comments. We can store comments together with their post in our database.

Submission

Submit a pull request to the main branch of Rocket's Instagram repo and share your PR link in your section Slack channel.

Reference Solution

To play with the solution, clone it, make sure you are on the solution-base branch, run npm i and npm run dev. Then open a browser and navigate to http://localhost:5173. 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.

are nice sunset images you can use as sample images

Note: We may want to use when importing functions of the same name such as ref from multiple modules, e.g. both firebase/storage and firebase/database. See code snippet below for example.

Upgrade the UI of our app to render posts nicely. Consider using as a simple solution.

If we wish to use React Bootstrap, don't forget to in either main.jsx or App.jsx.

If you see the following Webpack warning, this is an , non-breaking and should be resolved by Bootstrap soon. Can ignore for now.

The following code is in the reference solution. We give using as syntax to the named imports ref from both firebase/database and firebase/storage.

If you would like to deploy your app to the internet, follow Vitejs GitHub Pages .

Here is for this exercise. You can do better!

🏭
Rocket Academy Instagram starter repo
official Firebase documentation
Firebase docs
Here
import aliases
React Bootstrap Cards
import Bootstrap CSS
open Bootstrap issue
aliases
deployment instructions here
reference code