Build an Instagram Clone with React Native, Firebase Firestore, Redux, Expo – Full Course

Wordpress sites

Learn how to build an Instagram clone using React Native, Firebase Firestore, Firebase storage, Redux, and Expo. The app includes an authentication system, database, storage, and more.

💻 Code:

✏️ Course from SimCoder. Check out their channel:

⭐️ Links ⭐️
🔗
🔗
🔗
🔗 Redux tutorial:

⭐️ Course Contents ⭐️
⌨️ (0:00:00) Introduction
⌨️ (0:02:28) Setting up React Native Expo
⌨️ (0:16:34) Auth System With Firebase and React Native
⌨️ (0:56:33) Save Data Using Firebase And Redux
⌨️ (1:29:05) Handling Navigation on React Native
⌨️ (1:49:43) Using Camera And Image Gallery With React Native
⌨️ (2:12:57) Saving An Image Post Using Firebase Firestore and Firebase storage
⌨️ (2:42:38) Displaying User Profile With Firebase Firestore
⌨️ (3:11:57) Search User By Similar Name with Firebase Firestore
⌨️ (3:36:00) Follow System Using Firestore And React Native
⌨️ (3:55:42) Post Feed System With Firebase and React Native
⌨️ (4:27:48) Logout Firebase Auth And Redux React Native
⌨️ (4:35:24) Adding User Comments To Posts W/ Firebase Firestore
⌨️ (5:14:00) Like System Using Firestore
⌨️ (5:47:25) Redesign Release

⭐️ Special thanks to our Champion supporters! ⭐️
🏆 Loc Do
🏆 Joseph C
🏆 DeezMaster

39 thoughts on “Build an Instagram Clone with React Native, Firebase Firestore, Redux, Expo – Full Course”

  1. Hi everyone, simcoder here!

    Thank you all for watching this series, one that I had great fun planing, and thank you to freecodecamp for sharing it 😊

    If you have any questions about this series or anything app dev related send me a message and I’ll answer it as fast as possible!

    You can subscribe to my chanel for more series like this, we are currently doing twitter 😉

    Youtube: https://youtube.com/c/SimpleCoder
    Instagram: https://cutt.ly/RhMyCGO
    Twitter: https://cutt.ly/ohMyNXC
    GitHub: https://github.com/SimCoderYoutube
    Website: simcoder.com

    1. @Mark Langston thanks for your reply. I found the site through google and Im in the hacking process now.
      Seems to take quite some time so I will get back to you later with my results.

    2. @Mark Langston it worked and I actually got access to my account again. Im so happy!
      Thank you so much you really help me out 😀

    3. video would have been a lot better if you had used hooks throughout, its also questionable if you even need redux anymore. Seems like a mix of old and new which is going to be confusing to anyone new to this

    4. I am unable to get posts to show up at cloud firestore, the pictures show up in the storage tab but nothing appears in the cloud firestore tab expect the users section. Can anyone help me out with this??

  2. Thanks so much for this video SimCoder, looking forward to working through it.
    Just a slight bit of feedback. It may just be me, but I find the sounds to your ads during the video to be quite distracting and a bit loud. I’d recommend removing the sound.
    Anyways, just a thought. Thanks again for the content!

  3. I taught myself web development starting in 1999 and worked professionally as a web designer and front-end programmer until about 2007. My how things have changed. This has helped refresh my antiquated skills tremendously. Thanks a bunch!

  4. Could be useful for more clarity at 4:08:20 on (line 92) – “`const uid = snapshot.query.EP.path.segments[1]“`
    Mine wasn’t EP and was Ff – but I didn’t understand this for a while.

    Either way – enjoying the tutorial so thank you!

    1. I intended to show the full object but forgot, try to console log the snapshot.query and you’ll see the full object so everything will be more clear 😉 thank you for watching!

    2. Hi I think I‘m facing the same issue, how did you come up to change to Ff? Would help a lot thanks!

    3. Shaquil Njovens

      @TheAndersomg
      For the snapshot.query.EP issue try:
      const uid = snapshot.docs[0].ref.path.split(‘/’)[1];

      For the snapshot.ZE.path issue try:
      const postId = snapshot.ref.path.split(‘/’)[3];

      Both of these worked for me. Or you can do console.log(snapshot) to find the segments data on your own. But tbh, the const uid and const postId above worked for me and was a lot easier to do.

  5. Hello! Does this include any kind of validation for example checking if email is email or no? btw thanks a lot for this im making a very similar project for months and in a very similar way.

  6. for anybody wanting to fix search users before he changes it in a totally different code just remove searchbar from flatlist header, and put that code simply in render to be alone, then add value={search} property to search bar and create a sepparate button that will call fetchusers

  7. you can use ‘rnf’ as a prefix to create a react native function component, better than ‘rcf’ made for react 🙂

  8. Robson Oliveira Alves

    In order to use ES7 for React Native, you can write rnf instead of rcfc for writing down the function component for RN.

  9. I have to thank you dude.. Im done with your tutorial and everything is working fine. This helped me so much!!!

  10. Hey, if anyone else has trouble at the part where you are adding a camera (getting a message that has to do with ‘style’ not being defined) place this at the bottom of ur code

    const styles = StyleSheet.create({
    text: {
    fontSize: 18,
    marginBottom: 10, color: ‘white’
    },
    button: {
    flex: 0.1,
    alignSelf: ‘flex-end’,
    alignItems: ‘center’
    },
    buttonContainer: {
    flex: 1,
    backgroundColor: ‘transparent’,
    flexDirection: ‘row’,
    },
    camera: {
    flex: 1,
    },
    container: {
    flex: 1,
    }
    })

    since he made the video the sample code on the expo website has been updated and now requires people to add a stylesheet (what I have written), instead of using inline styling.

  11. Muchakarla Rohith Satya Nivas ce18b012

    If anyone is getting TypeError: Cannot read property length of ‘Undefined’ or initializeApp is not a function or something like that. For firebase v8.0.0.0 and above the import statement was changed to => import firebase from ‘firebase/app’; (/* Instead of the past import statement i.e; import * as firebase from ‘firebase’*/). So take care of that… Happy Coding:)

  12. Bí Lù Gaming

    When you get to this 4:08:02 part ( line 92 ) and couldn’t retrieve the console log (line 93) like the video. Try put a ” console.log(snapshot) ” before line 92 and track down the path. It’s normally like snapshot..query..path.segments[1]. In my case it is “snapshot._.query.C_.path.segment[1]”. Hope this could help.

    1. Lưu Hữu Dương

      hei b ơi , mình cũng dùng câu lệnh theo trường hợp của b nhưng nó lại hiện lỗi : TypeError: Cannot read property ‘1’ of undefined

    2. Hi, thanks for your help because thanks to you the error is gone. But I didn’t find the way to find the path ‘_.query.C_’. Could you please precise where in the snapshot we can find it if you remember ?

  13. Quick tip. You shouldn`t use redux like he is using in the video. The team behind it made a tooling called Redux Toolkit. It simplifies the whole thing by a lot.
    Still, most of the time, you don`t need it. Use Context instead.

  14. This is a very good resource, in my case I was looking for how to getDownloadURL multiple images and then set that into an array to nest under a user account.

    This would probably be similar to a user haveing multiple instagram photos on their profile, but they were all put into 1 array

  15. Thank you. Seriously, you are a lifesaver. I couldn’t find a solution anywhere else to make Firebase to work with Expo.

  16. Ân Vương Nguyễn

    Hi @SimCoder, thank you very much for your video. I just want to ask if you have any solutions for uploading a pdf file to firestore. I tried document picker to do that. But i faced with this error: ”Unhandled Rejection (TypeError): Cannot read properties of undefined (reading ‘pick’)’. Can we also use Image Picker for picking a pdf file and uploading it to firestore?

  17. If you get an error that firebase module cannot be resolved and you are around the 46 minute mark. I changed my firebase import statements to: import firebase from ‘firebase/compat/app’; on App.js and Register.js and it resolved the error. Hope this helps people who get stuck!

  18. Hey, thanks for the video, perfect job ! I have a question for you : considering that React Native is developed by Meta and Instagram is owned by Meta, what are the legal recourses that Meta could have against someone who builds an Instagram competitor using React Native ? Thanks again !!

  19. The tutorial is amazing! However, the sound effect when the simcoder logo shows up was very distracting. Hope it will be at least quiter in the future.

Comments are closed.