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

Подписаться 116 тыс.

Просмотров 12 тыс.

50% 1

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: ru-vid.comCRIMOPhiWG8
📝 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

Наука

Опубликовано:

3 авг 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 17

@fonbarnabas2667 22 дня назад

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

@skayu2000 22 дня назад

Thank you again 😊

@oberlordan6373 22 дня назад

Thank you bro ❤

@AhmedFahmy-g4w 22 дня назад

you are realy an amazing person

@srahul4178 21 день назад

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

@notjustdev 13 дней назад

You're welcome 🙌

@michealskup5730 21 день назад

Plz, use appwrite for the backend 🎉

@exploit222 22 дня назад

love Supabase

@keymoment 22 дня назад

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 21 день назад

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

@Sandeepkumar-dm2bp 21 день назад

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

@himanishkoul748 21 день назад

may I know which vscode font are you using

@damini2003 22 дня назад

how do you upload multiple videos?

@nehat786 20 дней назад

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 20 дней назад

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.