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

  • @notjustdev
    @notjustdev27 күн бұрын

    Optimize and deliver your media effortlessly with Cloudinary. Sign up for FREE now: cld.media/notjustdev

  • @JS-gx8vv
    @JS-gx8vvАй бұрын

    I've been waiting for an update on this one. Thank you! Batch 1 checking in.

  • @notjustdev

    @notjustdev

    29 күн бұрын

    You bet!🙌

  • @thatolebethe8069
    @thatolebethe806929 күн бұрын

    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

  • @Proximity_Bondage
    @Proximity_Bondage28 күн бұрын

    I like that you explained it simply and in detail! appreciate it

  • @notjustdev

    @notjustdev

    27 күн бұрын

    Thanks for the appreciation!

  • @Muhammed_Furkan_Yilmaz
    @Muhammed_Furkan_YilmazАй бұрын

    I am happy that you found a new good sponsor! Thanks for the videos!

  • @notjustdev

    @notjustdev

    29 күн бұрын

    Glad you like them!

  • @skayu2000
    @skayu2000Ай бұрын

    Thank you 🎉

  • @codeMercenary001
    @codeMercenary001Ай бұрын

    Real nice

  • @peterkyle_0125
    @peterkyle_012523 күн бұрын

    Really enjoying this tutorial late night

  • @notjustdev

    @notjustdev

    16 күн бұрын

    I'm glad you're finding it helpful 🙌

  • @Suhaybkaofficial
    @SuhaybkaofficialАй бұрын

    thank you brother ❤

  • @notjustdev

    @notjustdev

    Ай бұрын

    Welcome!

  • @eashumrazzaq8150
    @eashumrazzaq8150Ай бұрын

    Please incorporate nativewind in future tutorials as well🙌🏻

  • @abilioscoelho
    @abilioscoelhoАй бұрын

    Woooow 🎉

  • @senoremc4628
    @senoremc462828 күн бұрын

    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,

  • @vincentvargas9251
    @vincentvargas925128 күн бұрын

    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.

  • @Osmanity
    @OsmanityАй бұрын

    Can you just keep building this instagram clone 2 part 2/ part 3 and so on would be a good project

  • @emmanuelakogwu9078
    @emmanuelakogwu9078Ай бұрын

    Vadim is a saviour 🎉

  • @GigglesDose
    @GigglesDoseАй бұрын

    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

    @notjustdev

    Ай бұрын

    For this, we have: notjust.dev/react-native-mastery

  • @GigglesDose

    @GigglesDose

    Ай бұрын

    @@notjustdev call you tell us when it will be start some expected date

  • @tahrizade

    @tahrizade

    Ай бұрын

    its good idea. pls record new video about this points. waiting . and say about best folder structure for every project . ..... ❤

  • @Happyenings
    @Happyenings17 күн бұрын

    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();

  • @edge0601
    @edge060125 күн бұрын

    Thanks i used to upload b64 and often get payload request error lol thanks for that

  • @Shubham-rf2bs
    @Shubham-rf2bsАй бұрын

  • @FaysalBDev
    @FaysalBDev26 күн бұрын

    cool stuff, native wind is far from stable tho, would rather use tamagui

  • @justkoding25
    @justkoding25Ай бұрын

    🙂

  • @shahrozatiq5312
    @shahrozatiq5312Ай бұрын

    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

    @exploit222

    Ай бұрын

    kzread.info/dash/bejne/m2ierdGNnLbXpqw.html

  • @codewithgeeks366

    @codewithgeeks366

    Ай бұрын

    there is alot of content about this on youutbe

  • @shahrozatiq5312

    @shahrozatiq5312

    28 күн бұрын

    @@codewithgeeks366 can you share some?

  • @tahrizade
    @tahrizade22 күн бұрын

    Record Auth with react native best folder structure, tanstack query..... noooot clerck. waiting thx )

  • @sammed.sankonatti
    @sammed.sankonatti23 күн бұрын

    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

    @Devaratha6823

    20 күн бұрын

    Haa yes😂😂

  • @designdesign-d9m
    @designdesign-d9m24 күн бұрын

    cloudinary not working((

  • @jerryjohn-d2j
    @jerryjohn-d2jАй бұрын

    po

  • @tehtron
    @tehtronАй бұрын

    Strange studio

  • @notjustdev

    @notjustdev

    29 күн бұрын

    It's in the building phase 😁

  • @tehtron

    @tehtron

    29 күн бұрын

    @@notjustdev How different is this to the old student tutorial?

  • @mykus1000
    @mykus1000Ай бұрын

    first commet

  • @shivamkumar-qp1jm
    @shivamkumar-qp1jm27 күн бұрын

    Create something new

  • @akhari.dastak7029
    @akhari.dastak70297 күн бұрын

    i can do better than you bro but with only firebase

Келесі