Building an Instagram Clone with React Native and Cloudinary

  Рет қаралды 20,417

notJust․dev

notJust․dev

Күн бұрын

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: kzfaq.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
Clown takes blame for missing candy 🍬🤣 #shorts
00:49
Yoeslan
Рет қаралды 49 МЛН
ЧУТЬ НЕ УТОНУЛ #shorts
00:27
Паша Осадчий
Рет қаралды 10 МЛН
لااا! هذه البرتقالة مزعجة جدًا #قصير
00:15
One More Arabic
Рет қаралды 15 МЛН
Instagram Clone in React Native: Video, Backend & Push Notifications
3:46:12
Building an Apple Wallet Clone with React Native Reanimated
2:00:07
notJust․dev
Рет қаралды 7 М.
React Native CLI Setup for Windows [Created in 2024]
25:02
CodeLegends
Рет қаралды 2,7 М.
Build a Local-First Finance app with Expo & WatermelonDB
3:58:46
notJust․dev
Рет қаралды 26 М.
🔴  Build the Uber clone in React Native (Tutorial for Beginners)
3:43:51
Lime Clone Backend with React Native and Supabase
3:55:51
notJust․dev
Рет қаралды 13 М.
Infinite Scroll in React Native: Pagination with FlatList
2:51:02
notJust․dev
Рет қаралды 15 М.
Building a Health Application with React Native: Step Counter
3:57:53
notJust․dev
Рет қаралды 339 М.
Let’s Build an AI Chatbot for Expo Docs: RAG Tutorial
3:12:29
notJust․dev
Рет қаралды 12 М.
Tag him😳💕 #miniphone #iphone #samsung #smartphone #fy
0:11
Pockify™
Рет қаралды 4,6 МЛН
$1 vs $100,000 Slow Motion Camera!
0:44
Hafu Go
Рет қаралды 29 МЛН
Todos os modelos de smartphone
0:20
Spider Slack
Рет қаралды 65 МЛН
Klavye İle Trafik Işığını Yönetmek #shorts
0:18
Osman Kabadayı
Рет қаралды 8 МЛН
My iPhone 15 pro max 😱🫣😂
0:21
Nadir Show
Рет қаралды 1,8 МЛН