2.E.3: Instagram Posts
Last updated
Last updated
Understand how to use JavaScript promises
Understand how to use Firebase Storage
Understand how cloud storage works: upload files, store references to those files in our database
Know how to read documentation to apply a new technology
We will build on the previous exercise to incorporate file uploads and store data as posts to display on our shared feed.
Start with the code we wrote in the previous exercise in our forked and cloned copy of the .
Set up Firebase Storage in the repo as per the
Start from "Create a default Cloud Storage bucket"; we just completed the prerequisite in the previous step
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.
Choose a Cloud Storage location nearest to your users. See for a list of locations and their descriptions. Singapore is asia-southeast1
.
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.
We can ignore the options in "Advanced setup" for now; nothing there that we should need yet
Practice safe sharing, create implement your .env so that you do not share your Firebase credentials online when pushing to GitHub.
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.
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.
On form submit:
Upload the file to Firebase Storage
Save the response, the file's database URL together with the post text in Realtime Database.
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.
Note: We may want to import and use functions from firebase/storage
as per the Firebase Upload Files tutorial.
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.
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.
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.
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.
Submit a pull request to the main
branch of Rocket's Instagram repo and share your PR link in your section Slack channel.
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!