Build the original Instagram with React Native & Firebase

Set up a firebase project and a react native app from the command line, copy the web app code snippet with keys and domains for the next integration steps.

Navigate to your project folder, create a new Firebase app directory, and initialize a blank React Native project with Expo CLI. Start the app to view bundling.

Install Firebase dependencies in your React Native project and connect the app to Firebase. Create a config folder with API details and export Firebase objects for database, authentication, and storage.

Explore Firebase authentication setup, test the config, initialize the app, and configure sign-in methods such as email/password and Facebook on the Firebase dashboard.

Configure firebase email/password sign-in, create a register user function that passes email and password to firebase, and handle success with a user object, console logs, and error handling.

Learn to check if a user is logged in or locked out using Firebase on/off state changes and implement sign-out with error handling, plus email/password and Facebook login.

Learn to implement Facebook login in a React Native app using Expo and Firebase, including Facebook app setup, iOS and Android config, and permissions for public profile and email.

Build a login form in React Native using text input and state to toggle login status, with email/password sign-in via Firebase and basic validation.

Explore Firebase database options, including the real-time database (supported) and cloud file store, and set up a real-time database in test mode while learning security rules, backups, and usage metrics.

Learn how to set, update, and delete data in Firebase Realtime Database by using references, batch updates across multiple paths, and handling different data types like strings and numbers.

Fetch data from the firebase database using single value and on value approaches, compare live updates with on value versus on child added, and understand real-time syncing and event handling.

Learn how Firebase security rules secure data by controlling read and write access. Test rules in the dashboard simulator with authentication and user ID variables to ensure proper permissions.

Learn how to structure data in the Firebase Realtime database by keeping the json tree flat, avoiding nested elements, and planning queries to minimize bandwidth and simplify data access.

Explore how to upload photos and videos using Firebase storage, secure uploads with storage security rules, and navigate a dashboard of files, buckets, and usage to plan for scale.

Master Firebase storage security rules with default rules, showing path-based read and write access for authorized users, and how top-level checks tailor access within storage buckets.

Create a Expo app via the command line, configure a bottom tab navigator with feed, upload, and profile screens. Install React Navigation and add screen files to run and test.

Build base screen components by adding a constructor, super props, and a render function to display page labels, then use inline flex styling to center content for simulator preview.

Develop the feed screen by adding a title bar, planning photo items with time and user, and rendering images from Unsplash with captions and a comments area in React Native.

Build a feed with a flatlist using a simple photo array and a load new refresh function. Set up keyExtractor and renderItem, style the list, and render images to show a dynamic, refreshable feed.

Apply styling to the FlatList and related views in a React Native app, adjusting padding, flex direction, and alignment to improve the instagram-like feed before wiring up firebase database interactions.

Create a Firebase project, generate web config, paste into a config file, export Firebase config, database, functions, and storage, and install Firebase dependencies to connect the app.

Plan and implement a database structure for a social app, organizing users, photos, and comments in firebase real-time database, with example entries to fetch data instead of hardcoded arrays.

Begin to fetch photos and user data from the Firebase database in a React Native feed, populating the photo feed ordered by post date with loading and error handling.

Update the flatlist to render feed data from the database, replacing hard-coded images. Show a loading state and display time-ago timestamps by converting unix timestamps for a live, data-driven feed.

Secure Firebase database rules by restricting actions to the author via photo IDs and author user IDs, and expose only name, username, profile picture; keep email private.

Strengthen security rules for the instagram clone by limiting firebase data access to the user name and enabling read access to comments while restricting writes to authors only.

Learn to check user authentication in React Native and Firebase app, updating profile and upload screens to show content based on locked in status, and enforce login before viewing profiles.

Enable email/password sign-in in Firebase, create a test user, and enforce a logged-in profile interface by implementing a login function, guarded checks, and proper imports.

Build a profile screen UI in React Native with a title, circular profile image, user name, and action buttons (edit profile, upload, log out) wired to navigation and flexible styling.

Build a profile modal screen with a back button in a React Native Instagram clone, using stack and tab navigators and passing a user id to fetch data from Firebase.

Adjust the comments screen and add a button to open the comment screen in a React Native and Firebase app, wiring it to fetch comments by photo ID.

Style the upload screen, make the image picker touchable, and wire a function to open the picker and upload the photo to the database.

Create a unique image id generator using random alphanumeric sequences with dash separators. Implement permission checks and the image picker flow, including editing options and a placeholder for firebase storage upload.

Set up firebase storage rules and implement image upload for users, extracting the file extension with a regex, converting to a blob, and uploading to user/{uid}/images/{imageId}.{ext} while tracking progress.

Enhance the upload screen by adding a caption input and a live photo preview, while showing upload progress with an activity indicator and managing image selection and unique image ids.

Students implement an upload button that triggers a photo upload to Firebase, display progress, show a preview, handle caption validation, and retrieve the image download URL for posting.

Process uploaded photos and captions by creating a photo object with id, caption, timestamp, and url, then update the main feed and user profile in Firebase.

Update FlatList to display uploaded photos from the database in a React Native feed, fetch and refresh images, and extend profile views to show each user's photos.

Create a reusable photo list component in React Native to display user photos across screens using Firebase, enabling home feed and profile views via props and shared code.

Build the comments screen for the Instagram clone with React Native and Firebase. Display existing comments and let logged-in users post, reusing profile components and adding fetch and empty-state logic.

Fetch and display photo comments from Firebase, ordered by posting time, handle empty states, fetch author usernames, and update the UI with a flat list.

Add a post comment form to the Instagram clone screen, including a comments area, user profile link, and a keyboard-aware input that saves comments to the database.

Develop the post comment feature for a React Native and Firebase Instagram clone by validating input, creating a unique comment with photo and user IDs, and writing to Firebase.