React Native bootcamp - Build an Instagram Clone w/Firebase

Access the shared Google Drive to download and unzip the resources, organize them in a dedicated folder, and use the link provided in the resources text file.

Set up a firebase project for a react native expo app and generate the firebase config. Initialize firebase in code, import the database, and resolve npm versus yarn decisions.

Set up React Navigation in a React Native project, install the library, create a stack navigator with login and sign up screens, and enable navigation between screens.

Set up Redux in a React Native app to manage app-wide state with a provider, middleware, and a root reducer, and wire up reducers/index to enable shared data across screens.

Design and style a login screen for an Instagram clone using React Native, including responsive inputs, placeholders, a password field, a login button, and layout adjustments to center elements.

Explore how to access reducers within a React Native app, as part of building an Instagram clone with Firebase.

Explain how reducers work with React Native by connecting state and dispatch to a login form. Import actions, update email and password, and reference reducers in index.tsx.

Build a signup page in a React Native app with Redux reducers, background imagery, and navigation tweaks, then prepare for sign up with Firebase in the next video.

Sign up with Firebase authentication and store new user data in Firestore, creating a users collection with username, email, and password while validating input and handling errors.

Add real login functionality with Firebase authentication by signing in with email and password, fetching the user and their posts, and updating the app state via dispatch for controlled navigation.

Finish the welcome screen with centered content, add navigation flow and firebase authentication, and implement a login/signup workflow using redux for a smooth Instagram clone prototype.

Set up a bottom tab navigator using material bottom tab in a React Native app, create home and post screens, and configure a stack navigator with hidden headers.

Style the post screen, enable image upload via the library with permissions, and craft a header with a bottom border inside safe area view for an Instagram clone post flow.

Learn to implement firebase image upload in a react native app by compressing the uri with an image manipulator and uploading to storage to obtain the download URL.

Learn to implement multi-image uploads for a post by building a photos array, wiring up an open library flow, and updating actions and reducers to render a dynamic image gallery.

Style the photos array in a React Native app, conditionally render a plus button, manage the chosen state, and enable removing images with a touchable trash icon.

Learn to style an image upload UI in React Native, manage selected images, implement a plus button, limit to three images, and add a trash icon to remove images.

Master removing images in a React Native Instagram clone by correctly splicing the photo array, using the index for deletion, and updating the state to reflect the remaining photos.

Iteratively improves the Instagram clone UI by styling a centered add button, managing image slots with state, and enabling image selection, display, and removal through touch interactions.

Enhance the login ui by adding another image and applying header style options for the header color. Align the background color with the tab navigator theme to polish the app.

Build the upload post flow in a React Native Instagram clone, adding a post checkout screen, description input, scrollable photos, and a header button to trigger upload via redux.

Fix the post workflow in a React Native Instagram clone by wiring an upload post function to Firebase, triggering feed refresh, and managing navigation and post retrieval.

Build a profile picture feature in a React Native Instagram clone by selecting a photo, handling permissions, uploading to Firebase storage, and updating the user profile during sign up.

Upload posts to the firebase database for a react native instagram clone; implement upload post function that saves id, uid, photos, username, date, likes, comments, and description.

Display all posts on the home screen using a flat list with infinite scrolling, loading posts from firebase and rendering post images via redux data.

Create a reusable post component in React Native for an instagram-like feed by modularizing UI into custom components, wiring props like item, and managing internal state to improve performance.

Style post component for the Instagram clone: refine navigation bar to height 50 with white background and smaller icons, and add a bottom bar with a scrollable photo gallery.

Style the post component to resemble Instagram by detailing the bottom bar, likes, username and description layout, show all comments, add a comment, and a profile photo with moment-formatted timestamps.

Create a custom home screen header in a React Native Instagram clone. Replace the default header with a safe area based bar featuring a logo and icons on the right.

Learn to implement liking posts in a React Native Instagram clone with Firebase. Update local state, render a red heart when liked, and wire like/unlike actions to the database.

Learn to implement saving posts in a React Native Instagram clone with Firebase: toggle a save button, update saved by arrays, and sync saved posts to the user document.

Implement saved posts in a React Native Instagram clone with Firebase; navigate to saved posts, query posts where saved by contains UID, and create the necessary Firestore index.

Navigate from the home screen to the profile screen and pass the user id as a parameter. Fetch and display profile data from the database using dispatched actions and reducers.

Style the retrieved data on the profile screen of a React Native Instagram clone built with Firebase, configuring followers and following arrays, header layout, profile image, bio, and post counts.

Implement and refine follow and unfollow actions in a React Native Firebase Instagram clone, updating followers and following arrays in Firestore and refreshing the user interface.

Build and refine a profile screen in a React Native Instagram clone, displaying user posts in a grid, enabling post navigation, and applying redux-based data flow and firebase-backed bug fixes.

Finish building the profile screen as a shared component for both own and other users, compare user IDs to render an added profile button and navigate between profiles.

Fix a profile screen bug in the React Native Instagram clone by using a safe area view after the scroll view, and introduce an edit profile challenge for learners.

This solution shows the added profile implementation, with the name nature, how changes are accepted, and the user is successfully updated.

Watch this short update showing a profile screen bug that caused a user switch to Bob and a screen flick, and introduces new content.

Build a real-time chat on the messages screen using Firebase Firestore, with a live listener that updates messages and a text input for sending conversations in React Native.