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

[@jt8251]

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!

[@SimpleCoder]

We are always learning! Thank you for watching 😊

[@BHancock9598]

Thanks! I love your content and style! Please keep up the good work!

[@urosuros100]

If anyone gets an error 'firebase.apps.length is not defined...' or something like that, then this is a fix: Now it's import firebase from 'firebase' And it was: import * as firebase from 'firebase'

[@julfendizhu9517]

Mr Uros, thank you so much for this valuable information

[@Sarathkumar455]

You are a saviour, sending you love bro!

[@prateekarora4549]

const uid = snapshot.query.EP.path.segments[1]; in action.js is not working now. Please help....

[@seyirin]

thx.

[@dapfap225]

thanks bruhhhhh... seeeeehehhhhh

[@KETANRAMTEKE]

Non Coders: Netflix and Chill. Coders: FCC and Chill.

[@46_rajivtiwari_aiml69]

netflix+fcc+chill

[@KETANRAMTEKE]

@@46_rajivtiwari_aiml69 Tam toh bade heavy multitasker nikle vai

[@arnikchakraborty1553]

@@KETANRAMTEKE waah bete

[@captainlennyjapan27]

Just came here in the Saturday morning ;)

[@sagar140]

what is FCC ??

[@hackerprincess8810]

“Only need to know a bit about JavaScript and HTML” *immediately adds course to list* can’t wait to do it

[@robsonoliveiraalves2878]

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

[@ahmedelsehrawy3809]

thanks for the tip

[@ziyanli4771]

Thanks! The content is so helpful!!!

[@ThatGuyDownInThe]

THIS IS THE ONLY TUTORIAL IVE SEEN THAT WORKS. MAY GOD BLESS YOUR SOUL

[@myabdi4]

Hi I need help ... I am stuck at the expo page. When I load the landing page, I get an error. .. "Module not found. " quick google search said i need to remove package-lock.json and reinstall npm back gain. I tried that method and i still run into the same problem. What should I do?

[@Sacteur]

@@myabdi4 A bit late I guess but try to delete package-lock.json then run "npm cache clean --force" then "npm install"

[@myabdi4]

@@Sacteur It's never too late. I appreciate it. Thanks.

[@edoardogribaldo2870]

Wooooooo I was looking for something like that!! I can never stop thanking you guys for your effort to the community. Big big shotout to you!!! Love from Italy

[@SimpleCoder]

Awesome 😊 hope you enjoy it!

[@nimigeorge8089]

Hey bro Do you have instagram I have a programming question but there's a picture attached to the question

[@danielwildegger7501]

Releases tutorial in December 2020, uses a workaround to deploy firebase functions without having to pay that won't work after 2020. Genius Move

[@nicholasspence480]

Cool transition effect.... It's equally as distracting as it is cool

[@arlandmv4053]

I think it helps to stay focused.. I liked it

[@mind_106]

If you get an error that firebase module cannot be resolved and you are around the 46:00 minute mark. I changed import firebase from 'firebase/compat/app'; import 'firebase/compat/auth'; import 'firebase/compat/firestore'; *** "firebase": "^9.14.0"

[@scrtempire8122]

Thanks man!

[@jay4ymar1]

Also make sure you add the firebase config to the Register class and call firebase.initializeApp(firebaseConfig); before calling firebase.auth().

[@clarice657]

@@jay4ymar1 hi James, what do you mean by add firebase config to the Register class

[@chams2385]

did any one told you guys that you are the best youtube channel ever made ?

[@newsupdates860]

46:58 I knew its going to happen and that 1 hour later joke shows that we all struggle with bugs. Respect

[@antsmasherjack]

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

[@derPHLOIS]

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

[@nimigeorge8089]

Hey bro Do you have instagram? Want to ask a programming question but there's a picture attached to the question

[@bilugaming3900]

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.

[@luuhuuduong6085]

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

[@nirushiwijesiri9382]

Worked for me 🤗 Thank you 😇

[@SportsLJ6]

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 ?

[@banda_bekaar]

6:43 (For Ubuntu beginners) Install node using "nvm". You would not get the permission error.

[@KrisTheCodeManDude]

Just use windows hehe

[@sidheshwartiwari9834]

@@KrisTheCodeManDude why not use sudo??

[@parthipankalayini8]

Please do more full stack React Native apps.

[@ThatGuyDownInThe]

there are virtually zero tutorials on it for whatever reason

[@codefriendly8528]

you can use rnfc 23:45 to generate react native function component. Then no need to replace dive with View. Thanks,

[@myabdi4]

Hi I need help ... I am stuck at the expo page. When I load the landing page, I get an error. .. "Module not found. " quick google search said i need to remove package-lock.json and reinstall npm back gain. I tried that method and i still run into the same problem. What should I do?

[@codefriendly8528]

@@myabdi4 hi, just remove nodemodule folder and .expo folder and close emulator and packger windows, then npm install and try to run again. Thanks.

[@chebby111]

Excellent tutorial. Also, please change that sound that plays whenever a graphic comes up. It's so loud compared to your voice

[@elvistsang832]

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.

[@club-euforia]

Basically everything about firebase is deprecated but still a very good guide to learn react native

[@DEV_XO]

Amazing! Thanks to you SimCoder and of course to Free Code Camp!

[@sheel6]

as the video proceeds, he gets better and better. . Well defined. like it.

[@SimpleCoder]

Thank you for watching ☺️

[@RootsMj]

Thank you! A really well explained and in depth tutorial! Loved this so much! 🙌👏

[@todoku1]

for everyone who has problems installing firebase on windows: deinstall nodejs and install the 12 version, delete the node_modules folder and package-lock.json and run npm install after that try again installing firebase

[@mitexz]

IDK about the code, all I see is you are such a cool guy 😍

[@rizmarzia]

This is exactly what I needed. So excited, Thankyou!

[@SimpleCoder]

Awesome 😊

[@tmhugin8312]

Just in case someone is struggling to understand, I really recommend yall to use Functional components instead of class components, it's something that even react is recommending since is easier and cleaner, and almost at every actual job they're gonna ask you to use functional components.

[@tmhugin8312]

export default function Register() { const {name, setName} = useState('') const {email, setEmail} = useState('') const {password, setPassword} = useState('') const onSignUp = () => { } return ( setName(name) } /> setEmail(email) } /> setPassword(password) } /> onSignUp()} title='Sign Up' /> ) }

[@sureshkrishna6417]

This is my first video watching in FCC.. You awesome...♥️

[@jp-hz6br]

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!

[@SimpleCoder]

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!

[@TheAndersomg]

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

[@ShaqDaddyx380]

@@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.

[@SportsLJ6]

@@ShaqDaddyx380 Where in the snapshot can you find the solution?

[@socialapp3231]

Thank you Simcoder! This has to be the most in-depth and real use case tutorial on KZbin! Just a quick question I hope you (or anyone else) can answer, you're pulling a lot of data from the database in different arrays. This will end up being quite expensive if you've found yourself with even 1000 users who all have 100 posts, likes, comments, followers etc. Can you point to the best places to add firebase limits() and pagination in your code i.e, when you get the users array or when you get the post array etc. I think we can look into pagination ourselves but if you can point to where you would implement it in your code that would be a great start! Any other information would also be great! Thanks again for your help and videos! 👍

[@mind_106]

if you are having problems with firebase-storage 2:34:26 Follow these steps Go to "Storage" Select "Rules" tab and edit rules as per below: if your application have authentication feature(login) then use this: rules_version = '2'; service firebase.storage { match /b/{bucket}/o { match /{allPaths=**} { allow read, write: if request.auth != null; } } }

[@medfaroukkhabir]

thank you , im now making an app for my facebook group i think it s a good idea 🙌🙌

[@TheSalaho1]

This is really great way and great explanation!

[@SimpleCoder]

Thank you so much for your kind words! Let me know if you have any questions on the series ☺️

[@markg4811]

Hi SimCoder & Community, at 4:17:00 I'm getting the following error, which leads to not displaying the feed. Possible Unhandled Promise Rejection (id: 0): TypeError: undefined is not an object (evaluating 'snapshot.query.EP.path') Did anybody experience the same issue? Thanks for the support?

[@deliocoder8822]

Me too :C

[@inderwool]

At 4:15:30 it should be user.uid and not user.id

[@ztayper]

Saved my life, thanks bro.

[@SportsLJ6]

You're a life changer ! Lot of love for you

[@theultimateshield5133]

Hey, a subscriber from your original channel Simcoder🤘

[@SimpleCoder]

Awesome! Hope you enjoy the content ☺️

[@ryanlozon5712]

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!

[@SimpleCoder]

Thank you for your feedback, I'll be sure to remember that on the next one! :)

[@khushaalchoithramani8401]

I was searching for same today , thank you❤️🚀

[@SimpleCoder]

Awesome 😊

[@kalustepheneke1838]

Perfect video. Been looking for this.

[@SimpleCoder]

Awesome 😊

[@tarnastamm5615]

great video :) but i cant see the posts in the flatlist, the posts are an empty array?! Did i forget something?

[@yannik8271]

What an awesome Christmas gift*-* Thank you!!:)

[@SimpleCoder]

Awesome :) Hope you enjoy it!

[@rishabhmodi4151]

Great vid brother... Helped alot!!

[@albnayem8652]

Cool effect! Thanks Brother! It was really helpful.

[@Al-mougheer-Al-cyberany]

amazing I hope you do more projects like this

[@SimpleCoder]

We are currently doing twitter in my chanel, feel free to take a look 😉

[@Al-mougheer-Al-cyberany]

@@SimpleCoder yes I know I mean react native with firebase and sure thank you for this great content

[@ritikchauhan5082]

Thanks for creating this React Instagram clone ❤ 💕Please do more full stack React Native apps.

[@SimpleCoder]

Thank you for watching Ritik 😊

[@ambushsniping5407]

Any idea how to do the firebase imports for firebase 9.6.1 at 2:24:58 ?? i did them before for the other classes like App.js and followed what everyone in the comments was saying, but im not sure what to do for the 'require(firebase/firestore)' or the 'require(firebase/firebase-storage)' Please help! currently stuck

[@NadavOssendryver]

Did you get an answer?

[@mind_106]

if you are having problems with firebase-storage 2:34:26 Follow these steps Go to "Storage" Select "Rules" tab and edit rules as per below: if your application have authentication feature(login) then use this: rules_version = '2'; service firebase.storage { match /b/{bucket}/o { match /{allPaths=**} { allow read, write: if request.auth != null; } } }

[@bagusarichandra7748]

try this instead: import firebase from 'firebase/compat'; import 'firebase/compat/firestore'; import 'firebase/compat/storage';

[@johannsebastianbach3411]

4:05:45 that was unexpected :D :D

[@sachiiinnnn9734]

lol🤣🤣🤣🤣🤣

[@sourabhmahato5618]

Love you for this 🥺💖

[@Waywardwind13]

Truly a Christmas miracle

[@brandonshilling5820]

Thank you for using dark theme

[@geraldserafin5790]

Hi, i wonder why do u use class components instead of functional? U said that the class ones have states but u can achieve the same result by using hooks! Is using class components any better?

[@partacanna]

1:21:28 where did USER_STATE_CHANGE go???

[@myhendry]

excellent course. tqvm

[@SimpleCoder]

thank you for watching :)

[@suleimanodetoro2824]

Can you please create a similar course for flutter?

[@lucastavares206]

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.

[@dontbetoxic4387]

i was looking for this comment

[@moai545]

Thank you Very Much For Greater Work!!! RESPECT!!!!!🙏

[@SimpleCoder]

Thank you for watching ☺️

[@prashoonbhattacharjee8211]

Very informative tutorial!!

[@beanonymous1]

Loving the channel, I want to be like you build channel like you sir... Very useful content... Very very useful.. It supports All programmers.. I feel like I am lucky.

[@MrDanify]

How can i do that it instantly shows the picture into the profile posts without having to restart the app so it shows?

[@sajithsadanandan8828]

Please increase font size in your browser or system. Code editor is fine but for other screens it is difficult to read.

[@robmills8882]

Great tutorial! But I'm currently stuck at 3:01:32 - when I change Profile to {currentUser.name} I get the error message: null is not an object (evaluating 'currentUser.name'). If anybody knows how to solve this issue - I would really appreciate being told the solution. Thanks a lot!

[@robmills8882]

For anyone interested, the issue was solved by creating a button to log out and then re-register with a new account, (the button could then be deleted).

[@abdulrehmanmuneer3752]

use 'currentUser?.name'

[@alicia9678]

@@abdulrehmanmuneer3752 this helped a lot! Thanks!

[@lucouedraogo3111]

thank you very much brother the tutorial really help me. although I don't speak too much English I manage to follow you and I understand you well. I can have the playlist of your tutorial on react. thanks again

[@Ayush_kumar123]

You can check out his channel. Pinned at the top

[@errinwright]

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

[@gtasa0629]

no error but Feed not showing to me , please help and how you got the signin page

[@siriusvatsa]

Waiting for some flutter projects 😃

[@SimpleCoder]

We are currently doing twitter with flutter, feel free to check it out 😉

[@siriusvatsa]

@@SimpleCoder yes of course !!!

[@vishalarora3676]

@@SimpleCoder where is the link

[@usmanmunir1559]

@@vishalarora3676 click on the name ' SimCoder ' , channel will open automatically ... @SimCoder is awesome

[@Mohit-gb9dv]

Why shuld i learn flutter

[@kdvr60]

@4:07:54 TypeError: Cannot read property 'path' of undefined. Please help

[@staspopadynets1941]

I kind of solved it by just using the *_uid_* passed on to the *_fetchUsersFollowingPosts_* function instead of trying to extract it from *_snapshot.query.EP.path.segments[1]_* Not sure but it appears to work fine.

[@TheAndersomg]

@@staspopadynets1941 I experience the same issue & can‘t find a fix. Could you show how you replaced the „const uid = snapshot.query.EP.path.segments[1]“? Would be very helpful, thanks so much?

[@staspopadynets1941]

@@TheAndersomg sure, I'll do my best. By the time I was done with this method it had looked like this: export const fetchUsersFollowingPosts = (uid) => { // I just take the _uid_ that is passed here return (dispatch, getState) => { firestore() .collection('posts') .doc(uid) .collection('userPosts') .orderBy('creation', 'asc') .get() .then((snapshot) => { console.log({snapshot, uid}); const user = getState().usersDataState.users.find((el) => el.uid === uid); // this is where the _uid_ is used const posts = snapshot.docs.map((doc) => { const data = doc.data(); const id = doc.id; return {id, ...data, user}; }); for (let i = 0; i < posts.length; i++) { dispatch(fetchUsersFollowingLikes(uid, posts[i].id)); } dispatch({type: USERS_POSTS_STATE_CHANGE, posts, uid}); }) .catch((err) => console.log(err.message)); }; }; Hope this helps. If I didn't make myself clear enough let me know. I'll try to put it better.

[@TheAndersomg]

@@staspopadynets1941 big thanks! Your solution got it work without any problems!!!

[@TheAndersomg]

@@staspopadynets1941 sorry for the inconvenience but I‘m relatively new to react native & redux. I have another question maybe you could help. I‘m trying to update the data in the props everytime a specific screen gets focused. So for example I want to update the posts data when entering the own profile or the feed data when clicking on the feed tab. So I placed the this.props.fetchUserPosts() function into the useEffect hook and added the mapDispatchProps function to the specific screen, but all the time I get an error called „undefined is not an object (evaluating this.props.fetchUserPosts)“. Do you know what I have to do to achieve my goal? Thanks in advance!

[@luismiguelrodriguez4561]

In the part of forms is good practice use Formik very easy way to do the Forms.

[@bharatjagoar6092]

brother really a nice build .... i have seen the last time stamp ... just wanna ask you that have also added the story means where we create and add story ???

[@UttamKumar-tk3sl]

It's a amazing bootcamp 🙏🙏

[@yagami-light]

too early Hi chat how ya doin, have a nice day

[@RYMY]

Im new to this javascript, but doesnt it seem alot like WCF?

[@matkomilic201]

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

[@momo9719]

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 !!

[@toggleway]

None, as they made it open source.

[@RamanjeetSinghshemis]

Great job bro loved ur work Can you please add admin panal for admi use wich will show active use and other info

[@kdvr60]

TypeError: Cannot read property 'length' of undefined @43:17. Please help. Firebase version is 8.2.1

[@stephencalderon]

Try changing "import * as firebase from 'firebase'" to "import firebase from 'firebase';"

[@kdvr60]

@@stephencalderon thanks, man!

[@kdvr60]

@@stephencalderon @4:07:54 TypeError: Cannot read property 'path' of undefined. Please help.

[@stephencalderon]

@@kdvr60 sorry I haven't gotten that far into the tutorial yet.

[@vickymns]

26:53 .why landingscreen is used instead of landing while importing.cause i saw landing function on that file

[@abdelfata7]

you can name your component whatever you want when you import it but the path must be accurate

[@xxtrczlmjrxx]

48:11 Can't see my app. "Failed to compile. C:/Users.../Ig/app.js Module not found: can't resolve 'firebase' in 'C:\...\Ig' Am I missing something?

[@juniordataengineer]

I am stuck here too ... did you get away around the error

[@xxtrczlmjrxx]

@@juniordataengineer no chance. I double checked everything and it still won't work. Haven't tried again for a while, since I've just got a job

[@EUROLIFEE]

Perfect video I think😀

[@kellyn103]

sir i got stuck on 47:33 with those three packages to install it keeps giving errors and I dont know what to do. maybe ill fail this class cuz im following only your tutorial and now i have no idea so maybe i quit this sht cuz i dont even enjoy stuff if it keeps getting error and im sick of it. so yeah *yeah drops mic and quits :)*

[@dharmanshusingh1331]

feel you bro

[@DRDR3ADSA]

Just fyi, expo has updated those package names since this video. Make sure you're installing with npx not npm

[@rakab2010]

Please use functional components and Context Reducer hooks instead of class and redux.

[@prafullkumar6369]

Every new topic that sound 🔥🔥🔥🔥

[@monles2352]

42:17 import * as firebase from 'Firebase/app';

[@hollxws]

what version of react-navigation asre you using?

[@baljitsandhu7813]

starting for 5:05 when he says "all we have to do is come in here" what is he referring to.

[@chil1t0]

Can't post anything to the firebase backend, it shows an Unhandled Promise Rejection. TypeError: Network request failed, any solution to this error?

[@benrittenhouse6881]

2:13:00 ... I have some questions, does anyone have more detail on how to set up this part of the database? I created a posts collection, but do we do auto increment ID? this part was kind of vague and I am stuck, as well as the part where he creates storage, it says .storage() is not a method for firebase? any help would be appreciated

[@vaibhavsinha9271]

Awesome!! But I have a question. Can we host this clone online or will there be some kind of issues?

[@SimpleCoder]

Yes, feel free to use it, it has an apache v2 license 😉

[@vaibhavsinha9271]

@@SimpleCoder Great. Thanks.

[@KrisTheCodeManDude]

Would stuff like this help us get a job in the future?

[@SimpleCoder]

It wouldn't hurt! The more you now the better 😉

[@Dcooper676]

Deos this have infinite scrolling?

[@asasinplatit]

Hey! at 1:27:56 when you check if the currentUser is undefined. It only renders the undefined part but not the second return.Help?

[@이H-k4c]

i have the same issue,, i'll let you know if i find any tips,,

[@binhnguyenthanh6755]

That is the data in your firestore was wrong. I think you should delete all data in that and start register again. Good luck!

[@septembermanu]

at 29:00 also do npm i --save react-native-safe-area-context

[@fallowsx2]

hi, did u solve your issue with this?

[@aytac8135]

30:00 Why dont you use useState hook and functional components?

[@SimpleCoder]

Hi aytac! I used to think class components were easier to explain and to use for RN novices (primarily because it is more vanilla JS like), but I was wrong, that's why when we get to the camera part I move away from class components and just use function components. Thank you for watching :)

[@aytac8135]

SimCoder thanks for your answer and this tutorial 🌟

[@SimpleCoder]

@@aytac8135 no worries, let me know if you have any further questions ☺️

[@musicduniya1887]

i am at 54:38 , my state is not loading all it shows every time is "Loading" kindly help me through this bro

[@musicduniya1887]

Helpppp

[@danielwildegger7501]

Whats the reason for having the "userPosts" collection inside posts/uid/? I can't think of why this structure would be advantageous and you don't mention any reason for doing so either.

[@kmperdememore]

hello! i would like to make a simple question do i need android studio to follow this tutorial or to deploy an app ?

[@deslangan3157]

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.

[@corinnetinacci7250]

thank you!

[@ayushsarangi4095]

Thank u so much

[@rayanabid1303]

thank u so much will subscribe to your channel as well 😁

[@SimpleCoder]

Awesome 😊 thank you for watching!