Building an Instagram Clone with React Native and Cloudinary
Ғылым және технология
Optimize and deliver your media effortlessly with Cloudinary. Sign up for FREE now: cld.media/notjustdev
In this tutorial, we'll guide you through building an Instagram clone using React Native, Expo, Supabase, and Cloudinary. You'll learn to set up a new project with Expo, create the UI, handle backend functionalities with Supabase, and optimize media storage with Cloudinary. Let's get started 🔥
2️⃣ Watch the second part here: kzread.infoCRIMOPhiWG8
📝 Project Page: www.notjust.dev/projects/inst...
✅ Guide: notjust.notion.site/Instagram...
💻 Source Code: github.com/notJust-dev/Instagram
📄 Cloudinary docs: cld.media/notjustdevreactnative
⚛️ React Native Mastery is the ONLY course you need to Master mobile development with React Native & Expo 🚀
Join the waitlist now: www.notjust.dev/react-native-...
📚 This video includes a lot of tools and technologies, providing an excellent opportunity to learn about:
- Setting up a new React Native project with Expo and Expo Router
- Building a simple UI of Instagram
- Using Supabase as the backend for the Database and Authentication
- Using Cloudinary to store and deliver optimized images and videos
- and so much more...
❗Try our FREE 2-day Masterclass on notJust.Academy: assets.notjust.dev/masterclas...
💡 Have an idea for a future tutorial? Share it on our Idea Board: github.com/orgs/notJust-dev/d...
💬 Join the notJust Development gang and let's build together:
Twitter: / vadimnotjustdev
Instagram: / vadimnotjustdev
Facebook: / notjustdev
LinkedIn: / vadimsavin
Discord: / discord
Timecodes:
0:00 Intro and Project Overview
5:14 Setting up a new Expo project
16:01 Defining the app directories and screens
23:02 Setting up Tab Navigation using Expo Router
40:10 Installing and Setting up the NativeWind library
1:02:03 Building the User Interface: Feed Screen
1:38:23 Making the Feed Responsive
1:51:04 Building the New Post Screen
2:07:00 Adding the Image Picker Functionality
2:15:09 Building the Profile Page Screen
2:32:33 Setting up Cloudinary Images
3:03:03 Uploading Images to Cloudinary
3:26:16 Setting up Supabase
3:31:26 Implementing Authentication
3:34:08 Fetching User Posts and Pull to Refetch
Disclaimer: This build is for educational purposes only. All views, opinions, and technology choices expressed in this video are my own and do not represent the views, opinions, or technology choices of any entity I have been, am now, or will be affiliated with.
#notjustdev #instagram #reactnative
Пікірлер: 45
Optimize and deliver your media effortlessly with Cloudinary. Sign up for FREE now: cld.media/notjustdev
I've been waiting for an update on this one. Thank you! Batch 1 checking in.
@notjustdev
29 күн бұрын
You bet!🙌
amazing tutorial , optimizing images is so important for app perfomance, looking watched the tut gonna attempt it myself over the next week without watching the video as a challange
I like that you explained it simply and in detail! appreciate it
@notjustdev
27 күн бұрын
Thanks for the appreciation!
I am happy that you found a new good sponsor! Thanks for the videos!
@notjustdev
29 күн бұрын
Glad you like them!
Thank you 🎉
Real nice
Really enjoying this tutorial late night
@notjustdev
16 күн бұрын
I'm glad you're finding it helpful 🙌
thank you brother ❤
@notjustdev
Ай бұрын
Welcome!
Please incorporate nativewind in future tutorials as well🙌🏻
Woooow 🎉
Hi there, I've been following many of your videos and really appreciate the content you share. I'm currently working on a cross-platform app using Expo Router SDK 49. During development, I've encountered some limitations with React Native Web, particularly with using certain web libraries. For instance, I couldn't find any libraries for Mapbox, which makes me consider if using Next.js with Expo might be a better option to leverage React libraries. Do you have any advice on how to integrate web libraries within a React Native project or if there's a more effective approach to this? Thank you for your videos and all the valuable insights you provide! Best regards,
Can you please create a project wherein you use nested navigation? I mean, the tab navigation bar is in the entry level of the project together with the Stack Navigation. Maybe a real-estate project or something.
Can you just keep building this instagram clone 2 part 2/ part 3 and so on would be a good project
Vadim is a saviour 🎉
dear your tutorials are good, but the thing is you teach us very well but you start and leave us in middle , kindly make complete lecture . Kindly don't mind i like your work, bit you miss so many points , kindly add Responsive design, teach us how to make development, staging and production modes, how to manage admin and users , working according to their roles and permissions ,teach us how to upload app on play store and later how to update app, testing parameters , points to save our app from hacking e.t.c , In short my point is make one complete project in which you cover all these and other things. Kindly its a humble request to do that, you may continue this project or make some complete eCommerce app. Kindly reply will you do this or not.
@notjustdev
Ай бұрын
For this, we have: notjust.dev/react-native-mastery
@GigglesDose
Ай бұрын
@@notjustdev call you tell us when it will be start some expected date
@tahrizade
Ай бұрын
its good idea. pls record new video about this points. waiting . and say about best folder structure for every project . ..... ❤
After 2.43.00, I am getting "Cannot convert null value to object" (after implementing the demo code of Cloudinary). Works only if I do let postImage = cld.image(post.image); var postURL = postImage.toURL();
Thanks i used to upload b64 and often get payload request error lol thanks for that
❤
cool stuff, native wind is far from stable tho, would rather use tamagui
🙂
Sorry I can't watch the complete stream but I have a question can please make small video on it The question is how does Instagram or tick tok or any other platform display this infinite scroll of reels and posts how do they overcome performance issues Because when display data on flatlist you you can show data in chunks like load more data when end reach but at some time when i keep on scrolling i get a large list of data which is causing performance issues.
@exploit222
Ай бұрын
kzread.info/dash/bejne/m2ierdGNnLbXpqw.html
@codewithgeeks366
Ай бұрын
there is alot of content about this on youutbe
@shahrozatiq5312
28 күн бұрын
@@codewithgeeks366 can you share some?
Record Auth with react native best folder structure, tanstack query..... noooot clerck. waiting thx )
59:40 you don't have to use those breakpoints md, lg etc. It's a mobile application development, screens won't be large like web development 🤷♂️
@Devaratha6823
20 күн бұрын
Haa yes😂😂
cloudinary not working((
po
Strange studio
@notjustdev
29 күн бұрын
It's in the building phase 😁
@tehtron
29 күн бұрын
@@notjustdev How different is this to the old student tutorial?
first commet
Create something new
i can do better than you bro but with only firebase