Instagram Clone in React Native: Video, Backend & Push Notifications

Optimize and deliver your media effortlessly with Cloudinary. Sign up for FREE now: cld.media/notjustdev
In this second part of our tutorial series, we'll dive deeper into building an Instagram clone using React Native, Expo, Supabase, and Cloudinary. In this part we'll learn how to upload, play, and optimize videos, implement advanced backend features, and set up push notifications. We will build on top of the UI we built in the first part and improve overall the feel and functionality of our application. Let's get building 🚀
1️⃣ Watch the first part here: ruclips.net/user/liveCRIMOPhiWG8
📝 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:
- Video uploading, playinh, and optimization
- Building a powerful backend with Supabase
- Advanced backend features
- Implementing Push notifications
- 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
2:14 Getting Started and Initialising the Project
6:52 Implementing Image Fallbacks
14:10 Adding Update Profile functionality
33:21 Adding Update Profile Avatar functionality
46:50 Implementing Upload Videos feature
1:33:05 Refactoring the Post Component
2:11:54 CRUD: Post Likes functionality
2:36:55 Fetching Post Likes from the backend
2:57:01 Counting the number of Likes
3:01:25 Implementing Push Notifications
3:44:30 Outro
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

[@fonbarnabas2667]

You give hope to react native devs and that's amazing. Thanks much.

[@skayu2000]

Thank you again 😊

[@oberlordan6373]

Thank you bro ❤

[@AhmedFahmy-g4w]

you are realy an amazing person

[@srahul4178]

Thank you save my life last 2 years 😂😂😂😂

[@notjustdev]

You're welcome 🙌

[@michealskup5730]

Plz, use appwrite for the backend 🎉

[@exploit222]

love Supabase

[@keymoment]

What do you think about using a monorepo to manage all apps in one project folder, such as API, web, admin, and mobile app? Is it a good idea for production?

[@affiliatepaid747]

this is what freelancers face....im tired of different repos for day?

[@Sandeepkumar-dm2bp]

there is no tutorial, quiz app with pocketdb. if possible please create one.

[@himanishkoul748]

may I know which vscode font are you using

[@damini2003]

how do you upload multiple videos?

[@nehat786]

Sir how to handle the situation if the puchToken is already stored in the db, and if user opens the app again that it will again the api request to save the push token to db. Should we stored the token in local storage too and conditionally make the api request based on the condition

[@notjustdev]

I don't think that's a bad problem. In a way, you are updating the push token with the most recent one.
If you want to optimize it, and not send the update request if it didn't change, you could either use the suggested approach of local store, or you could fetch the user profile data inside your Auth provider, and compare the new push token with the one from the user profile. If it's different, then send the update.
Another thing around push tokens you should think about is multi-device support. With our approach, the user will receive the push notification only to the last device that he signed from. Because the user can only have 1 push token and we are overriding it.
To support multi device, and send the notification to all devices that the account signed from, then you need a many to many relationship between user and push tokens. Create a separate table with tokens, and the token will have a user_id.

[@HassanKhan-vc6ij]

Thanks Brother