Build the original Instagram with React Native & Firebase

React Native User Authorisation & Database with Firebase

3.55 (196 reviews)

Udemy

platform

English

language

Mobile Apps

What you will learn

Make an app ready to be published onto app stores

Understand how you use Firebase with React Native

Upload photos in React Native to Firebase Storage

Build apps that require user authorisation

Description

In this course you we cover all the steps from creating an app in the command line all the way through to build an app very similar to the original Instagram.

We will start by quickly looking at how to use Firebase User Authorisation. Using email and password or Facebook login.
From here we will then cover the Firebase realtime database and look at how to set, update and delete data.
Next we look at fetching data from the database and look into the Firebase security rules and how to structure your firebase database, before we look into firebase storage.
Now it is time to start building a real app with these techniques. We will build an app based on the idea of the original Instagram, the next sections of the course will cover each step to create this app.

At Rusty Courses we regularly update our courses with new & updated content to keep things fresh.

Enroll now and get started on your journey to build mobile app for both Android and iOS today!

Content

Introduction

Register & Setup

Create React Native app on the command line

Connect Firebase To App & Login Code Examples

Connect Firebase project to React Native app

Intro to Firebase Authentication

Using email and password to register user

Check if user is logged in & how to log user out.

Using Facebook login (Including Facebook app setup)

Using email and password login with TextInput

Firebase Database

Intro to Firebase Database

How to set, update and delete data in Firebase

Fetching and retrieving data from the Firebase database

How to use Firebase security rules

Structuring your Firebase database

Firebase Storage

Intro to Firebase storage

Quick overview of Firebase storage security rules

Start Building The Photo Feed App

Setup and create app from the command line

Adding base components to each screen

Starting to setup the feed screen

Adding a FlatList to the feed screen

Adding some styling to the FlatList

Create Firebase project and connect to our app

Structure database for project

Begin to make calls to the database to fetch information

Update our FlatList to user data from our database

Add Security & Authentication to Photo Feed App

Adding security rules part one

Adding security rules part two

Check if user is logged into the app

Begin to create Photo Feed app UI

Make sure user is logged in whilst creating profile interface

Building out the profile screen UI

Creating our profile modal screen & adding back button

Adjust comments screen & add button to open comment screen

Building Upload screen - Part One

Building Upload Screen - Part Two

Upload function changes

Building Upload Screen - Part Three

Continue to create Photo Feed App

Add caption input area to upload screen

Adjust upload photo function to get uploaded image url.

Create function to process photo and add to feed

Update FlatList to display uploaded photos

Create component to show list of photos across different screens

Adding a comments section to each photo

Building comments screen part one

Fetch comments from Firebase

Add post comment form to the screen

Create function to post comments to the database

Adding user authorisation & other adjustments

Update profile to show user details from Firebase

Add edit profile form to profile page

Create save profile function

New component to contain login and sign up

Add login and signup buttons to component

Create login and signup functions

Create user object and test signup function

Final adjustments to the app

React Navigation Version 3

Reviews

Don

September 10, 2020

Only talk and show - no resources - too few updates to videos - too many errors - too many 'shortcuts' naming of variables could be better outdated versions of react and the one good thing is that it was not too long - firebase was the only thing that was explained really well. The course was rusty metaphorically!

Glaudiston

August 19, 2020

It's being a good course, but it's not working anymore, I have to make several adaptations to use what is being showed on this course, in other words, I need to know how to adapt, or maybe I can buy another course to show me how to adapt it

Pooja

August 19, 2020

not able to follow up properly as the firebase and react-native documentations are updated now, have to look for the commands properly.

Luis

December 21, 2019

I love that this course shows you how the functionality of an app similar to IG works. It works great for me because I'm working on a project that has similar aspects to IG and this has been really useful. Also, I was already familiar with JS, React, and Firebase so it's easy for to follow the instructor. I learned a lot about Firebase and the ways authentication works with it.

Mika

October 23, 2019

You learn a lot during the course, but the code is really messy. The teacher should read up on clean code and other best practices when it comes to React.

Zehur

June 22, 2019

Although the course is said to be for "beginners", he will not explain the meaning of any of the code. I'm just copying and pasting a lot of things, while also searching the meaning and function behind a lot of the code.

Kuroash

May 9, 2019

So far its simple to follow. One issue is my expo init created an assets folder that doesnt show up in the video example. Also setting up firebase may have changed because when i click the web button it popped up a different menu but i think i was able to navigate through it correctly.

Alexander

March 5, 2019

Example code is poorly structured and not following accepted code style conventions. React best practices are not respected. RN app should better be using react-native-firebase lib, not Web SDK. Redux is not used.

Eliza

February 20, 2019

Honestly this may have been the best course I've ever taken on Udemy. It was thorough, made sense to someone new to React Native, and actually built something that I needed to build in the real world- with all of the things other courses leave out (ex: Firebase auth/data/storage). The instructor was also very responsive. Thank you!!

Alex

January 14, 2019

An extremely useful and well structured course. In my opinion the course is very complete because it collects the fundamental pieces of any app: front with navigation, database (firebase), authentication (facebook, email ...). The course has several extras. The instructor for example has been concerned to explain how to work with styles. The instructor responds quickly. For me it's one of the best courses I've had at Udemy and I definitely recommend it. Thank you very much, Russell!

Jose

January 13, 2019

Not organized, no source code which would have come in handy to cross reference all the code issues and library updates. The author is not responsive.

Jagdish

January 8, 2019

This course really helps me learn react. Rusty always respond on time and helps to solve the problem quickly. Thanks @Rusty...:)

Hodari

December 3, 2018

So far, really good and clear explanations. No too much explanation of react but i understand thats not what this is for.

Hristomir

November 24, 2018

Very nice course! It help me a lot to understand react native and firebase connection. You can add also video upload.

AMIZAN

November 7, 2018

So far I find this course meeting my expectation, the instructions is short and simple, the instructor spoke with clear pronunciation.

Charts

Price

Rating

Enrollment distribution

Build the original Instagram with React Native & Firebase - Distribution chart