This is hands down the best introduction to a framework, I have ever seen. You cover everything that people are wondering about and keep it concise nevertheless. And due to the pacing that is on point, I can keep watching without getting bored, which is a huge issue for me with most other tutorials.
The moment i noticed you were implementing auth -signup and signin i subscribed, liked and kept the notification bell ON, you are a good teacher buddy. nice job.
00:02 Learn to build full-stack food ordering app using React Native and Supabase. 02:14 Focus on backend development with Supabase for easy implementation of features like authentication, database design, query, mutation, image uploading, and real-time updates. 06:42 Expo allows building projects without setting up Android Studio or Xcode 09:00 Running the development server and testing the application on physical and emulator devices 13:52 Using Git to manage project changes 16:13 Understanding the app directory and its relationship to screens. 20:36 Using reusable colors and importing constants for consistent design 22:49 Accessing JavaScript variables inside GSX syntax. 27:16 Creating custom components in React Native 29:28 Creating and using custom components in React Native. 33:39 Moving components to separate files for best practice 35:56 Creating type-safe components with TypeScript 40:37 Using default or fallback image for missing product image 42:49 Enabling TypeScript path AL support in app.json and creating aliases in TS config for mapping 47:15 Easy to render a scrollable list of items using FlatList 49:30 Fixing layout issues and introducing grid layout 53:56 Creating separate screen for product details 56:14 Creating deep links for mobile navigation 1:00:38 Creating dynamic routes with React Native and Expo Router 1:02:51 Creating a nested Navigator for grouping screens within the tabs Navigator. 1:07:35 Adding an index screen inside the folder is essential for navigation. 1:09:50 Configuring navigation and hiding header 1:14:19 Working with Expo router and rendering product details 1:16:31 Handling undefined products and image rendering in React Native 1:21:05 Rendering a list of items using map operator 1:23:22 Styling and layout adjustments for views in React Native 1:28:01 Using conditional styles and state in React Native component rendering 1:30:18 How to update selected item and use state variables 1:34:56 Implementing the shopping cart feature with React context for data sharing 1:37:03 Configuring header and navigation in React Native 1:41:32 Creating a context provider and consumer in React Native 1:44:02 Using card provider component to wrap screens in the application. 1:48:54 Creating and using context in React Native 1:51:16 Implementing items and add item inside our card provider 1:55:49 Creating and adding new items to the cart 1:58:03 Adding functionality to the card list item. 2:02:40 Implement logic to merge and increment quantity of card items. 2:04:57 Adding update quantity function to card context for quantity management 2:09:39 Updating and filtering items in the array. 2:12:01 Checking and updating cart items based on product and size 2:16:41 Implementing order creation and management 2:18:50 Admin side features include product creation, updates, and filtering between active and archived items 2:23:31 Understanding navigation in React Native 2:25:48 Using segments to redirect to different screens based on user actions. 2:30:27 Creating a new screen for product creation 2:32:37 Styling input and label elements 2:37:10 Adding custom input validation for forms 2:39:32 Basic input validation and rendering an image 2:44:05 Implementing image selection, editing, form validation, and setting state in a React Native app. 2:46:34 Creating and updating item screens navigation and dynamic parameters 2:51:12 Updating form validation and prefilling input forms 2:53:21 Using React Native's alert component for confirmation dialogues 2:57:42 Creating custom components and navigation structure in React Native. 2:59:50 Implementing backend and authentication with Supabase 3:03:57 Implementing screen navigation and authentication logic. 3:06:03 Creating folder structure for wers and updating layout 3:10:27 Using day.js library to parse and display dates 3:12:42 Creating the order details page and obtaining the ID from search parameters. 3:17:15 Rendering order items in a list 3:19:30 Managing scrolling with flatlist and list header component 3:23:42 Creating a selector for order status 3:25:48 Implementing nested Navigator for managing list of orders 3:30:23 Using SafeAreaView from React Native Safe Area Context 3:32:34 Implementation of backend with Supabase for mobile app 3:36:50 Setting up Superbase and configuration 3:39:04 Creating an account using the sign up flow 3:43:28 Implementing sign in functionality with Supabase 3:45:41 Creating an authentication provider for managing user sessions 3:50:17 Using session imported from Supabase Library for user authentication. 3:52:23 Implement loading state for session fetch 3:56:56 Protecting authentication screens and implementing basic authentication flows. 3:59:12 Setting additional parameters for user profiles and group-based authentication 4:03:31 Fetching profile information from Superbase and redirecting based on user group 4:05:43 Setting up admin and user profiles 4:10:25 Creating and designing the product table for CRUD operations 4:12:36 Setting up and querying a new table in Superbase 4:16:56 Protect routes for authenticated users 4:19:08 Leveraging caching mechanism with react query and query provider 4:23:34 React Query manages loading, data, error states, and optimizes queries automatically. 4:25:44 Using the custom hook 'useProductList' for querying and rendering data, making components lean. 4:30:20 Parsing and processing ID for product retrieval. 4:32:26 Implementing CRUD operations for products and admin functionality. 4:37:14 Using the insert product function to save data in the database 4:39:30 Using on success function to update the UI after creating a new product. 4:44:17 Using the update product function and passing the ID parameter. 4:46:46 Updating product details and handling related errors 4:51:37 Handling routing and error management in Superbase 4:53:58 Configuring TypeScript integration with Supabase 4:58:38 Using helper functions and types to integrate with Superbase in TypeScript. 5:01:02 Implementing CRUD operations for orders in the application. 5:05:23 Creating table for order items and defining relationships. 5:07:36 Setting up table relationships and policies for authentication. 5:11:54 Updating query and regenerating types for superbase integration 5:14:00 Implementing error handling and data filtering in React Native 5:18:30 Filtering orders based on archive status and order status 5:20:40 Using dynamic query keys based on conditions for filtering data 5:24:47 Creating orders using mutations and typing 5:27:01 Using session to automatically handle user ID in data mutations 5:31:20 Creating and linking order items to the order for relationship 5:33:41 Creating and calling a function to save order items 5:38:04 Creating and linking cart items with word items and sizes in React Native using TypeScript 5:40:06 Sorting orders chronologically based on the most recent created date. 5:44:28 Updating order items and implementing related data queries. 5:46:43 Adding required ID for table update 5:51:07 Enable real-time updates for specific tables 5:53:14 Handling new data insertion and updating state 5:57:59 Subscribing to order updates using a specific ID 6:00:08 Real-time functionality for order updates 6:04:37 Uploading and linking files using Superbase storage 6:06:51 Troubleshooting issue with image upload and display 6:11:14 Storing and displaying images using remote image on React Native with Supabase 6:13:28 Adding payment processing and advanced features 6:17:37 Updating a product image and implementing logout functionality. 6:19:38 Creating a profile screen and implementing sign out functionality 6:24:00 Install and configure Docker desktop for local Superbase setup 6:26:07 Resetting database password in Supabase 6:30:33 Setting default values for environment variables and server restart in React Native application development. 6:32:42 Database synchronization issues between local and remote environments. 6:37:10 Creating and managing admin accounts and permissions 6:39:22 Integrating stripe as a payment processor 6:43:41 Server-side processing for secure payment handling. 6:45:45 Setting up test mode and Stripe integration for development 6:50:12 Function is watching files and auto-refreshing code 6:52:29 Using server-side Stripe integration for secure transactions 6:56:55 Troubleshooting and testing payment intent creation with dynamic amounts 6:59:19 Deploy function on remote Superbase instance 7:04:03 Initialize payment sheet on checkout 7:06:14 Creating and fetching payment sheet parameters using Edge function and Supabase client 7:10:46 Implementing payment processing and error handling in the app. 7:12:57 Payments are integrated in the application with dynamic prices and test mode usage 7:17:20 Creating and applying database migrations 7:19:32 Interacting with Supabase database from Edge function 7:24:05 Fetching and handling profile data with error checks 7:26:36 Saving customer ID from stripe to database 7:31:18 Understanding the process of initializing and handling payment sheets in React Native. 7:33:24 Stripe handling payments and card reuse 7:37:49 Configuring push notifications for iOS and Android 7:40:19 Expo push notification service simplifies remote notification management for Android and iOS apps 7:44:49 Setting up configuration for Expo notifications 7:47:14 Creating a notification provider for Expo push notifications. 7:51:59 Setting up push notifications in Expo go 7:54:00 Handling push notifications and notification listeners in React Native 7:58:32 Using migrations to track changes and apply them to remote database 8:01:07 The process of storing push notification tokens and sending notifications to users' devices using Expo. 8:05:57 Updating status and notifying user 8:08:23 Sending push notifications using Expo push token 8:13:14 Sending remote push notifications using Expo push API 8:15:28 Setting up Firebase Cloud messaging for Android notifications
you are a legend. i ve been following hundreds of tutorials and imo you are among the best out there. So much material. So many explanations and the website to follow step by step a f legend.
I was following another RN tutor for a while, I have completed his 3 videos, totally like 15-20 hours. But your approach is just awesome Vadim. It's clear that you have spent so much time for this tutorial plus Notion part. This video alone, with Supabase part, TanStackQuery part, production part... I have joined your channel Vadim, thank you for your efforts. I'll suggest this channel of yours to every RN enthusiasts. Cheers man!🌻
Just finished the course, and wow! It was a lot but I wouldn't have had anyone else teach it. You made this so much fun and understandable for someone who just learned TS and React a day before. The Notion database was a huge help and you made sure to never leave us behind or in the dust by showing us your debugging process. Thank you!
No one on youtube makes better RN content than Vadim NotJustDev. The videos and material are comprehensive and show just how much work Vadim has put into making this possible. Aside from that, its very clear that Vadim is an expert and knows the ins and outs. I've watched so many RUclips videos on react native and most of them are inexperienced amateurs looking to suck your money for code and assets before even starting the project. Thanks Vadim.
This is the best RN tutorial video, even the best tutorial video among all fields I've ever seen. It is very accurate and consistent, and it meets the practical scenario in real industry.
I'm a newbie in React Native, and you made it easy for me to understand how to use it. I was struggling understanding the docs from Expo. Thankfully you have a video that explains it in much simpler way. 🙏 Also, I like how detailed you are through your video having prepared of list of steps laid out is very nice, it's easier for me to follow and not get lost throughout the video! Keep it up!
Wow, What a video, i am coming from the web and i wanted to learn React Native, and holy did i learn it _so much knowledge _great pace _great resources i wish we had a video like this for everything just insane i hope you keep up the good content wish you all the best
Thank you so much! When I started my internship as a React developer, I was later transferred to the React Native team. Although React is similar to React Native, there were many patterns I wasn't familiar with. Your tutorials really helped me, especially on the mobile team where I was working on a chat system using Stream. Your Stream tutorial helped me get started, and after my internship, I was able to secure a full-time position. I would love to see content that no one else cover here on RUclips Such in app update, more animation and performance optimisation
Wow, I feel like a proud parent reading your comment haha! It's amazing to see how our tutorials helped you navigate the React Native world and land a full-time gig. Also, thank you for your suggestions, I'll take them on board. Keep up the great work! 🚀
2:26:44 - if you have typescript issues, with dynamic routing: //* This is a hook that returns the current route segments as an array of strings. const segments = useSegments() //* Strange behavior, but it works const productRoute = `/${segments[0]}/menu/${p.product.id}` as `${string}:${string}` return (
I used this tutorial as a basis for my own app and it is genuinely the first tutorial that had everything I needed explained from the ground up. Thank you for the excellent video.
This was definitely the best course I've watched on react native so far. Thanks for all the efforts! There were small issues I encountered some errors that didn't happen in the video but it was also a good for education to teach people to google the error! It wasn't a bug, it was a feature!
@@notjustdev I have a question. While we are using react query we used query names to cache the results so we don't need to call again but take from cache. But while we are downloading the pictures of pizzas we don't have any caching mechanism and it redownloads everytime we change screen. How to make those pictures cached? Do we call downloading function inside react query system or is there another way to manage caches? Again thanks for your help!
Thank you so much for this in-depth tutorial man. You are giving tons of value to the community. My appreciation is huge for you! Keep up the hard work man.
Best course for react native, everything from scratch. Good explanation. I just started React native. Your course is very helpful. Thank you ❤❤. And again thanks for providing study material also which is very helpful for starting.
Hi bro ,I have one error coming at 1:01:17 in this line -> href={`/${product.id}` . I am getting href error saying "Type '`/${number}`' is not assignable to type 'StaticRoutes | RelativePathString | `${string}:${string}`" . please help me with this
I've been working on this tutorial for a few days, it's so so good. I've seen your sub count increase slowly but surely... congrats on 100k and thanks for the awesome videos !
if i am not wrong git stash is for saving the changes temporarily, git restore is the command that should be used to get rid of changes that is not commited. thanks for the video btw
Honestly, you are the best. I love the way you explain concepts.I will dedicate hours once more to learn about mobile development at granular level by watching this masterclass. Thank you NotJustDev :)
Fantastic video, love it ! Now, how do I change the elements you've put in orders and products ? cause I do want to create an app but not a food ordering one
Big fan of your tutorials! Could you please consider making a tutorial on building an attendance application with React Native Expo? Your teaching style is fantastic, and it would be incredibly helpful for the community. Thanks a lot!
Thanks for this tutorial with Supabase. You deserve putting a "Buy Me a Coffee" in the description. If you came to Madeira Island I would pay you a poncha! ;)
2:26:01: I had a problem with the href property of the Link after changing it to work with segments. It worked fine, but it gave me a Typescript error. it took me some time, but I finally resolved it by adding "as Href" like that: "href={`/${segments[0]}/menu/${product.id}` as Href}". The "Href" is imported from "expo-router".
@selaben154 I used a condition to check whether the returned segment value is valid. const segments = useSegments(); const currentSegment = segments[0] === 'admin' || segments[0] === 'user' ? segments[0] : 'user'; return( {/*the rest of your code here*/} );
Thank you Vadim for these gems of tutorials i am silent student of your channel watched and learned alot from your videos Thank you and keep up the good work
Man , thank you for your excelence hey . damn this is pro level, detailed and intentional . I APPRECIATE YOU and your efforts sir . im self teaching and its a journey hey. last year i had an opportunity to join a learnership to learn react and react native . it was war but i came out better and ABLE to learn and understand how to navigate challenges learning code. im constantly on youtube ect and practicing . currently my laptop is old and slow and im tired but i must tell you ,your videos inspire me to quickly sort out my laptop and wifi drama and just CODE . thank you SIR
Thank you for your kind words and support! Keep up the great work on your coding journey, and best of luck with getting your laptop sorted out. Keep coding!🚀
Excellent tutorial, loving it! A bit stuck at 6:36:00 when testing for the local supabase setup. When I try to login (using Expo Go app) I get the error Network request failed. Anyone else getting the same? I have cleared the Expo Go app cache and data, but when running npm start -c to start testing again I am presented with the same URL of where metro is waiting e.g. exp://[some ip]:8081. This will probably stay the same as the .env is the only thing that changed to point supabase to my local version instead of the remote one. Any ideas to resolve this?
Thanks alot for this project i'm new in the react native this project teach me alot it took me 7 days to fully complete the project thanks a lot for this amazing content
Thank you so much for the great content, Vadim! Could you consider making these in the future: - A complete, full-featured quiz app - A Duolingo clone that's more advanced/complete (I know you did that clone in a course in the past, but it's a simple one for beginner only) And it'd be more preferrable if the backend is not AWS :)
Vadim hermano, mi ingles no es el mejor pero me enganchó el tutorial y los disfruto y voy entendiendo... de verdad que la forma com expresas los conceptos y presentas la documentación, muestra un respeto hacia tus aprendices que habla muy bien de ti... créeme, estás cambiando vidas, incluso a un Ingeniero de 52 años como yo!!... gracias mosntruo!!
Hello! I love this tutorial. I'm learning so much!!!!! I have a small issue though. After implementing the products table on supabase, my app doesn't want to return to the index page. I'm stuck on the menu user side... Does someone have an idea why or experienced that?
The content is absolute best but the problem is i dont like to use expo for building projects and i am having trouble understanding the navigation part. I am using stack navigator and bottom tab navigator to navigate. Can you make a short video explaning the best way of using stack and bottom tab navigation?
A Very Big fan of your Videos! Could you please consider making a tutorial on building a Zoom Clone app with React Native CLI? Your teaching style is very good, and it would be incredibly helpful for the community. No one has build zoom clone Perfectly on RUclips so far Thanks a lot!
1:39:16 I am having issues displaying the cart screen as a modal. I rolled back the video and rewatched this section of the video multiple times to make sure I am not doing anything wrong but everything looks identical to the video. I also tried changing the presentation value to different values but none of them have any effect. I am not getting any errors, it's just inexplicably not doing anything.
Question: 02:20:14 Admin Side Screens Structure - this does not seem to be an issue any more. I dont need to use segments to identify which folder we need to access the product list. I.e (admin) or (user) Is that correct? Are other people experiencing? I just want to make sure.
Absolutely thrilled to have completed the entire video and developed my very first full-stack React Native app! 🚀 Huge thanks for the phenomenal content! ❤ It's been an incredible learning journey! 👏
Hey Vadim! Loving this video! I followed your video to 6.33.20 mark and my app is now connected to Supbase local, .env file connected to supabase local API and ANON key, and reset my db like you showed. Docker Desktop is running the container without issues. Now when I try to create a new user in the app and click SIGN UP button, I get this error in Terminal: [TypeError: Network request failed]. I searched all over the internet for this fix but unable to fix it. Would you have an idea what the issue is and the fix?
Hi, im following the tutorial but i got that error when im setting isAdmin at 4:00:00 video: ERROR: Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doenst jave a dependecy array or one of the dependecies changes on every render. My code is the same as AuthProvider, idk how to solve it, tks.
Hello and thank you as always for this video. I’m wondering what are you using for auto completion and for auto formatting your text? I can’t seem to get that to work for me.
Hey when I transfer my app,components and constant folders to src the import in layout.txt and other files stops working specifially in line "import {useColorScheme} from '@/components/useColorScheme''"...What is the solution??
Heyy the notion link for the project seems to be down it doesnt load the page for me so i cant install the supabase dependencies and follow along the tutorial
NVM. I just realize that the purpose is be able to flexibly add additional properties in the the ProductListItem component needs more than just what's declared in the Product type
I was hard stuck on getting local supabase to run, there is a problem with this supabase_vector something from working but I ran the command npx supabase start --ignore-health-check and it finally started. No idea if this will pose an issue down the road but we will see
Thank you so much for this video! For the first Modal lessons, I am having issues with showing the modal on Android devices. Apparantly this is an Expo issue and modals mainly work on IOS devices. Is anyone else experiencing the same?
Hello, I am having issues. I followed the video and install everything as shown, Apparently it is around watchman, Could I ask you a question about it ?
This is interesting, thanks Vadim. Do you mind making a comparison between AWS Amplify and Superbase in a short video or on notJust newsletter? I see some of your projects shifted away from Amplify lately
Hi Vadim, I'm almost finished with your wonderfull project, thanks. But around 6:25:00 you seem to have a container created on docker, but i don't know how to set it up. Can you help?
@@notjustdev Hello Vadim, thanks for your response! Im getting a 'network request failed' when i'm creating a new profile in the local database. docker is running and the login is done
Thank you for this content I have a question can I create (tabs) So that it is displayed within the mobile app But within laptops, for example, tabs disappear ؟ I searched for it but found no results
Hey devs! Can someone help me with the Docker setup? I'm not sure if Vadim created the container before running the Supabase commands or if Docker needs to be running for the container to be created automatically.
![😰Мы купили РЕДЧАЙШИХ Аниме Персонажей в Роблокс! [Anime Adventures] + Кабан](http://i.ytimg.com/vi/JkkFZBmxYJ8/mqdefault.jpg)
This is hands down the best introduction to a framework, I have ever seen. You cover everything that people are wondering about and keep it concise nevertheless. And due to the pacing that is on point, I can keep watching without getting bored, which is a huge issue for me with most other tutorials.
The moment i noticed you were implementing auth -signup and signin i subscribed, liked and kept the notification bell ON, you are a good teacher buddy. nice job.
i can't say anything, just thank you vadim for all effort what you give to us
thanks a lot
My pleasure!
00:02 Learn to build full-stack food ordering app using React Native and Supabase.
02:14 Focus on backend development with Supabase for easy implementation of features like authentication, database design, query, mutation, image uploading, and real-time updates.
06:42 Expo allows building projects without setting up Android Studio or Xcode
09:00 Running the development server and testing the application on physical and emulator devices
13:52 Using Git to manage project changes
16:13 Understanding the app directory and its relationship to screens.
20:36 Using reusable colors and importing constants for consistent design
22:49 Accessing JavaScript variables inside GSX syntax.
27:16 Creating custom components in React Native
29:28 Creating and using custom components in React Native.
33:39 Moving components to separate files for best practice
35:56 Creating type-safe components with TypeScript
40:37 Using default or fallback image for missing product image
42:49 Enabling TypeScript path AL support in app.json and creating aliases in TS config for mapping
47:15 Easy to render a scrollable list of items using FlatList
49:30 Fixing layout issues and introducing grid layout
53:56 Creating separate screen for product details
56:14 Creating deep links for mobile navigation
1:00:38 Creating dynamic routes with React Native and Expo Router
1:02:51 Creating a nested Navigator for grouping screens within the tabs Navigator.
1:07:35 Adding an index screen inside the folder is essential for navigation.
1:09:50 Configuring navigation and hiding header
1:14:19 Working with Expo router and rendering product details
1:16:31 Handling undefined products and image rendering in React Native
1:21:05 Rendering a list of items using map operator
1:23:22 Styling and layout adjustments for views in React Native
1:28:01 Using conditional styles and state in React Native component rendering
1:30:18 How to update selected item and use state variables
1:34:56 Implementing the shopping cart feature with React context for data sharing
1:37:03 Configuring header and navigation in React Native
1:41:32 Creating a context provider and consumer in React Native
1:44:02 Using card provider component to wrap screens in the application.
1:48:54 Creating and using context in React Native
1:51:16 Implementing items and add item inside our card provider
1:55:49 Creating and adding new items to the cart
1:58:03 Adding functionality to the card list item.
2:02:40 Implement logic to merge and increment quantity of card items.
2:04:57 Adding update quantity function to card context for quantity management
2:09:39 Updating and filtering items in the array.
2:12:01 Checking and updating cart items based on product and size
2:16:41 Implementing order creation and management
2:18:50 Admin side features include product creation, updates, and filtering between active and archived items
2:23:31 Understanding navigation in React Native
2:25:48 Using segments to redirect to different screens based on user actions.
2:30:27 Creating a new screen for product creation
2:32:37 Styling input and label elements
2:37:10 Adding custom input validation for forms
2:39:32 Basic input validation and rendering an image
2:44:05 Implementing image selection, editing, form validation, and setting state in a React Native app.
2:46:34 Creating and updating item screens navigation and dynamic parameters
2:51:12 Updating form validation and prefilling input forms
2:53:21 Using React Native's alert component for confirmation dialogues
2:57:42 Creating custom components and navigation structure in React Native.
2:59:50 Implementing backend and authentication with Supabase
3:03:57 Implementing screen navigation and authentication logic.
3:06:03 Creating folder structure for wers and updating layout
3:10:27 Using day.js library to parse and display dates
3:12:42 Creating the order details page and obtaining the ID from search parameters.
3:17:15 Rendering order items in a list
3:19:30 Managing scrolling with flatlist and list header component
3:23:42 Creating a selector for order status
3:25:48 Implementing nested Navigator for managing list of orders
3:30:23 Using SafeAreaView from React Native Safe Area Context
3:32:34 Implementation of backend with Supabase for mobile app
3:36:50 Setting up Superbase and configuration
3:39:04 Creating an account using the sign up flow
3:43:28 Implementing sign in functionality with Supabase
3:45:41 Creating an authentication provider for managing user sessions
3:50:17 Using session imported from Supabase Library for user authentication.
3:52:23 Implement loading state for session fetch
3:56:56 Protecting authentication screens and implementing basic authentication flows.
3:59:12 Setting additional parameters for user profiles and group-based authentication
4:03:31 Fetching profile information from Superbase and redirecting based on user group
4:05:43 Setting up admin and user profiles
4:10:25 Creating and designing the product table for CRUD operations
4:12:36 Setting up and querying a new table in Superbase
4:16:56 Protect routes for authenticated users
4:19:08 Leveraging caching mechanism with react query and query provider
4:23:34 React Query manages loading, data, error states, and optimizes queries automatically.
4:25:44 Using the custom hook 'useProductList' for querying and rendering data, making components lean.
4:30:20 Parsing and processing ID for product retrieval.
4:32:26 Implementing CRUD operations for products and admin functionality.
4:37:14 Using the insert product function to save data in the database
4:39:30 Using on success function to update the UI after creating a new product.
4:44:17 Using the update product function and passing the ID parameter.
4:46:46 Updating product details and handling related errors
4:51:37 Handling routing and error management in Superbase
4:53:58 Configuring TypeScript integration with Supabase
4:58:38 Using helper functions and types to integrate with Superbase in TypeScript.
5:01:02 Implementing CRUD operations for orders in the application.
5:05:23 Creating table for order items and defining relationships.
5:07:36 Setting up table relationships and policies for authentication.
5:11:54 Updating query and regenerating types for superbase integration
5:14:00 Implementing error handling and data filtering in React Native
5:18:30 Filtering orders based on archive status and order status
5:20:40 Using dynamic query keys based on conditions for filtering data
5:24:47 Creating orders using mutations and typing
5:27:01 Using session to automatically handle user ID in data mutations
5:31:20 Creating and linking order items to the order for relationship
5:33:41 Creating and calling a function to save order items
5:38:04 Creating and linking cart items with word items and sizes in React Native using TypeScript
5:40:06 Sorting orders chronologically based on the most recent created date.
5:44:28 Updating order items and implementing related data queries.
5:46:43 Adding required ID for table update
5:51:07 Enable real-time updates for specific tables
5:53:14 Handling new data insertion and updating state
5:57:59 Subscribing to order updates using a specific ID
6:00:08 Real-time functionality for order updates
6:04:37 Uploading and linking files using Superbase storage
6:06:51 Troubleshooting issue with image upload and display
6:11:14 Storing and displaying images using remote image on React Native with Supabase
6:13:28 Adding payment processing and advanced features
6:17:37 Updating a product image and implementing logout functionality.
6:19:38 Creating a profile screen and implementing sign out functionality
6:24:00 Install and configure Docker desktop for local Superbase setup
6:26:07 Resetting database password in Supabase
6:30:33 Setting default values for environment variables and server restart in React Native application development.
6:32:42 Database synchronization issues between local and remote environments.
6:37:10 Creating and managing admin accounts and permissions
6:39:22 Integrating stripe as a payment processor
6:43:41 Server-side processing for secure payment handling.
6:45:45 Setting up test mode and Stripe integration for development
6:50:12 Function is watching files and auto-refreshing code
6:52:29 Using server-side Stripe integration for secure transactions
6:56:55 Troubleshooting and testing payment intent creation with dynamic amounts
6:59:19 Deploy function on remote Superbase instance
7:04:03 Initialize payment sheet on checkout
7:06:14 Creating and fetching payment sheet parameters using Edge function and Supabase client
7:10:46 Implementing payment processing and error handling in the app.
7:12:57 Payments are integrated in the application with dynamic prices and test mode usage
7:17:20 Creating and applying database migrations
7:19:32 Interacting with Supabase database from Edge function
7:24:05 Fetching and handling profile data with error checks
7:26:36 Saving customer ID from stripe to database
7:31:18 Understanding the process of initializing and handling payment sheets in React Native.
7:33:24 Stripe handling payments and card reuse
7:37:49 Configuring push notifications for iOS and Android
7:40:19 Expo push notification service simplifies remote notification management for Android and iOS apps
7:44:49 Setting up configuration for Expo notifications
7:47:14 Creating a notification provider for Expo push notifications.
7:51:59 Setting up push notifications in Expo go
7:54:00 Handling push notifications and notification listeners in React Native
7:58:32 Using migrations to track changes and apply them to remote database
8:01:07 The process of storing push notification tokens and sending notifications to users' devices using Expo.
8:05:57 Updating status and notifying user
8:08:23 Sending push notifications using Expo push token
8:13:14 Sending remote push notifications using Expo push API
8:15:28 Setting up Firebase Cloud messaging for Android notifications
Thank you man for your efforts
you are a legend. i ve been following hundreds of tutorials and imo you are among the best out there. So much material. So many explanations and the website to follow step by step a f legend.
Congrats Vadim!!! this tutorial is amazing! I am finally understanding how expo router works. Thanks for sharing such valuable resources!
Thanks Daniel
I was following another RN tutor for a while, I have completed his 3 videos, totally like 15-20 hours. But your approach is just awesome Vadim. It's clear that you have spent so much time for this tutorial plus Notion part. This video alone, with Supabase part, TanStackQuery part, production part... I have joined your channel Vadim, thank you for your efforts. I'll suggest this channel of yours to every RN enthusiasts.
Cheers man!🌻
Thank you so much for your appreciation! I'm glad you are finding our content valuable! 🙌
Just finished the course, and wow! It was a lot but I wouldn't have had anyone else teach it. You made this so much fun and understandable for someone who just learned TS and React a day before. The Notion database was a huge help and you made sure to never leave us behind or in the dust by showing us your debugging process. Thank you!
No one on youtube makes better RN content than Vadim NotJustDev. The videos and material are comprehensive and show just how much work Vadim has put into making this possible. Aside from that, its very clear that Vadim is an expert and knows the ins and outs. I've watched so many RUclips videos on react native and most of them are inexperienced amateurs looking to suck your money for code and assets before even starting the project. Thanks Vadim.
I can not believe how much value he provides to all of us through amazing videos and courses like this for free here on youtube!! keep it up man!
My pleasure! Will do 🚀
This is the best RN tutorial video, even the best tutorial video among all fields I've ever seen. It is very accurate and consistent, and it meets the practical scenario in real industry.
I'm a newbie in React Native, and you made it easy for me to understand how to use it. I was struggling understanding the docs from Expo. Thankfully you have a video that explains it in much simpler way. 🙏 Also, I like how detailed you are through your video having prepared of list of steps laid out is very nice, it's easier for me to follow and not get lost throughout the video! Keep it up!
I'm so glad you found it helpful! Thanks for your support 🙌
Wow, What a video, i am coming from the web and i wanted to learn React Native, and holy did i learn it
_so much knowledge
_great pace
_great resources
i wish we had a video like this for everything
just insane i hope you keep up the good content wish you all the best
Glad it was helpful!
I'm like 10 minutes in and can't believe how good this is. Thank you very much :)
My pleasure! Glad you like it🙌
I reached the middle today. This tutorial is awesome! I'm Learning a lot.
Hey Sir Thanks , This is the best react native course ever on RUclips
You are most welcome!
Thank you so much! When I started my internship as a React developer, I was later transferred to the React Native team. Although React is similar to React Native, there were many patterns I wasn't familiar with. Your tutorials really helped me, especially on the mobile team where I was working on a chat system using Stream. Your Stream tutorial helped me get started, and after my internship, I was able to secure a full-time position. I would love to see content that no one else cover here on RUclips Such in app update, more animation and performance optimisation
Wow, I feel like a proud parent reading your comment haha! It's amazing to see how our tutorials helped you navigate the React Native world and land a full-time gig. Also, thank you for your suggestions, I'll take them on board. Keep up the great work! 🚀
@@notjustdev love you Bro from China
2:26:44 - if you have typescript issues, with dynamic routing:
//* This is a hook that returns the current route segments as an array of strings.
const segments = useSegments()
//* Strange behavior, but it works
const productRoute = `/${segments[0]}/menu/${p.product.id}` as `${string}:${string}`
return (
The goat, I was just typing "as any" but was wondering why he didn't get this error.
As someone trying to learn a new language I hope this is not THE solution. This is super ugly. I hope there is a better fix.
This the best tutorial i have seen so far... Its sure a Masterclass... Thanks much Vadim.
You're welcome! 🙌
A tutorial on notion will be good too 😁😁@@notjustdev
I used this tutorial as a basis for my own app and it is genuinely the first tutorial that had everything I needed explained from the ground up. Thank you for the excellent video.
Brilliantly done!
Thank you 🙌
This was definitely the best course I've watched on react native so far. Thanks for all the efforts! There were small issues I encountered some errors that didn't happen in the video but it was also a good for education to teach people to google the error! It wasn't a bug, it was a feature!
That's great to hear! Yup, that's what makes a developer an amazing developer, ability to find and solve bugs 😁
@@notjustdev I have a question. While we are using react query we used query names to cache the results so we don't need to call again but take from cache. But while we are downloading the pictures of pizzas we don't have any caching mechanism and it redownloads everytime we change screen. How to make those pictures cached? Do we call downloading function inside react query system or is there another way to manage caches?
Again thanks for your help!
Thank you so much for this in-depth tutorial man. You are giving tons of value to the community. My appreciation is huge for you! Keep up the hard work man.
I appreciate that! Will do 🙌🙌
Best course for react native, everything from scratch. Good explanation. I just started React native. Your course is very helpful. Thank you ❤❤. And again thanks for providing study material also which is very helpful for starting.
Great Job on this course. I am 1 hr 29 min and I am able to handle it. Thanks a lot!.
I'm glad to hear that, great job!
Hi bro ,I have one error coming at 1:01:17 in this line -> href={`/${product.id}` .
I am getting href error saying "Type '`/${number}`' is not assignable to type 'StaticRoutes | RelativePathString | `${string}:${string}`" .
please help me with this
I've been working on this tutorial for a few days, it's so so good. I've seen your sub count increase slowly but surely... congrats on 100k and thanks for the awesome videos !
Thank you so much!!🚀
if i am not wrong git stash is for saving the changes temporarily, git restore is the command that should be used to get rid of changes that is not commited.
thanks for the video btw
I'm about 30mins in and I just had to stop to write this comment. Thanks so much Vadim! This is great stuff!!!
You're very welcome!🙌
Honestly, you are the best. I love the way you explain concepts.I will dedicate hours once more to learn about mobile development at granular level by watching this masterclass. Thank you NotJustDev :)
Thank you! I'm thrilled to hear you found my explanations helpful 🙌
I'm about an hour into this course and this is great stuff dude! Thank you so much.
My pleasure! I'm glad you are finding it helpful 🙌
Thanks!
Thank you so much for your generosity
Fantastic video, love it ! Now, how do I change the elements you've put in orders and products ?
cause I do want to create an app but not a food ordering one
Man, congrats! This is the best introduction react native i've ever seen!
Appreciate that man 🫶🏻🙌
You are the best. God sent. I pray for you to be successful in all of your endeavors. All I can say is a biig thank you.
Thank you too!🙌
Big fan of your tutorials! Could you please consider making a tutorial on building an attendance application with React Native Expo? Your teaching style is fantastic, and it would be incredibly helpful for the community. Thanks a lot!
My pleasure! Thanks for the suggestion, noted 🙌
This is some very high quality material! Thank you for the work you put in, it's a pleasure to follow your live and tutorials. Keep it up!!
Much appreciated! I'm glad you found it helpful 🙌
谢谢！
Thanks for this tutorial with Supabase. You deserve putting a "Buy Me a Coffee" in the description. If you came to Madeira Island I would pay you a poncha! ;)
Thanks a lot! Not planning yet to visit Madeira but would love that 😁
2:26:01: I had a problem with the href property of the Link after changing it to work with segments. It worked fine, but it gave me a Typescript error. it took me some time, but I finally resolved it by adding "as Href" like that: "href={`/${segments[0]}/menu/${product.id}` as Href}". The "Href" is imported from "expo-router".
Try this:
const [first] = useSegments();
const url = first === '(admin)' ? `/(admin)/orders/[id]` : `/(user)/orders/[id]`;
return (
@selaben154
I used a condition to check whether the returned segment value is valid.
const segments = useSegments();
const currentSegment = segments[0] === 'admin' || segments[0] === 'user' ? segments[0] : 'user';
return(
{/*the rest of your code here*/}
);
Thank you Vadim for these gems of tutorials i am silent student of your channel watched and learned alot from your videos Thank you and keep up the good work
You're very welcome! ☺️
Excited to begin the journey of 8 hours of intense learning
That's great! Happy to be part of your learning journey!
Man , thank you for your excelence hey . damn this is pro level, detailed and intentional . I APPRECIATE YOU and your efforts sir . im self teaching and its a journey hey. last year i had an opportunity to join a learnership to learn react and react native . it was war but i came out better and ABLE to learn and understand how to navigate challenges learning code. im constantly on youtube ect and practicing . currently my laptop is old and slow and im tired but i must tell you ,your videos inspire me to quickly sort out my laptop and wifi drama and just CODE . thank you SIR
Thank you for your kind words and support! Keep up the great work on your coding journey, and best of luck with getting your laptop sorted out. Keep coding!🚀
Excellent tutorial, loving it! A bit stuck at 6:36:00 when testing for the local supabase setup. When I try to login (using Expo Go app) I get the error Network request failed. Anyone else getting the same? I have cleared the Expo Go app cache and data, but when running npm start -c to start testing again I am presented with the same URL of where metro is waiting e.g. exp://[some ip]:8081. This will probably stay the same as the .env is the only thing that changed to point supabase to my local version instead of the remote one. Any ideas to resolve this?
Thanks alot for this project i'm new in the react native this project teach me alot it took me 7 days to fully complete the project thanks a lot for this amazing content
That's great to hear! Amazing job! 🚀🙌
Thank you so much for the great content, Vadim!
Could you consider making these in the future:
- A complete, full-featured quiz app
- A Duolingo clone that's more advanced/complete (I know you did that clone in a course in the past, but it's a simple one for beginner only)
And it'd be more preferrable if the backend is not AWS :)
My pleasure! And thanks for the ideas, we will take them into consideration 🙌
I honestly learned so much from this course. Thank you for putting this together!
Glad it was helpful!
国内网站没有找到相关的教程，您的教程真的太棒了！
Thank you so much for this course. I'm using it to build a workout tracker to help people lose weight. Great course so far !!
You're welcome! Good luck with your project 🙌
Vadim hermano, mi ingles no es el mejor pero me enganchó el tutorial y los disfruto y voy entendiendo... de verdad que la forma com expresas los conceptos y presentas la documentación, muestra un respeto hacia tus aprendices que habla muy bien de ti... créeme, estás cambiando vidas, incluso a un Ingeniero de 52 años como yo!!... gracias mosntruo!!
¡Gracias por tus palabras! Me alegra mucho saber que encuentras útil el contenido. ¡Sigue adelante y nunca es tarde para seguir aprendiendo!
Great job with the taskboard! This really helps me follow your video and organize the steps in a structured manner!
Thank you. Glad it was helpful! 🙌
Hello! I love this tutorial. I'm learning so much!!!!! I have a small issue though. After implementing the products table on supabase, my app doesn't want to return to the index page. I'm stuck on the menu user side... Does someone have an idea why or experienced that?
Thank you Vadim, I know standing there for 8 hours is not easy. I learned so dang much bro!
Thank you. Glad it was helpful! 🙌
The content is absolute best but the problem is i dont like to use expo for building projects and i am having trouble understanding the navigation part. I am using stack navigator and bottom tab navigator to navigate. Can you make a short video explaning the best way of using stack and bottom tab navigation?
You teach so so good! Plase more project:)
Long time student, just checking in! Thanks Vadim! Hope you are doing well
Thank you for your support! Glad to have you onboard🚀
Currently following this so far good and learned many things. Thanks
You're welcome! I'm glad you're finding this helpful🙌
A Very Big fan of your Videos! Could you please consider making a tutorial on building a Zoom Clone app with React Native CLI? Your teaching style is very good, and it would be incredibly helpful for the community. No one has build zoom clone Perfectly on RUclips so far Thanks a lot!
Great suggestion! 💡 Share it on our Idea Board: github.com/orgs/notJust-dev/discussions
1:39:16 I am having issues displaying the cart screen as a modal. I rolled back the video and rewatched this section of the video multiple times to make sure I am not doing anything wrong but everything looks identical to the video. I also tried changing the presentation value to different values but none of them have any effect. I am not getting any errors, it's just inexplicably not doing anything.
it doesnt work for android.
@@breno6829 So what is the workaround for Android?
Thanks
My pleasure! 🙌
Question:
02:20:14 Admin Side Screens Structure - this does not seem to be an issue any more. I dont need to use segments to identify which folder we need to access the product list. I.e (admin) or (user)
Is that correct? Are other people experiencing? I just want to make sure.
wow the best tutorial i found on youtube, your work is totally awesome !
Thank you! I'm glad you found it helpful
7:37:46 For some reason, your live notion document says eas build:config instead of eas build:configure
Thanks for pointing that out, updated it!
Well structured tutorial and clean explained 👏 thanks for your time and efforts
Glad it was helpful!🙌
Absolutely thrilled to have completed the entire video and developed my very first full-stack React Native app! 🚀
Huge thanks for the phenomenal content! ❤
It's been an incredible learning journey! 👏
Wow, that's great to hear! Thank you for your appreciation. Huge props to you for finishing it 🚀
I hit HARD the suscribe button, this is quality content man 💎🙌
Appreciate it, thank you 🙌
really loved the way you have made this content, top quality content, Thanks a million.
I appreciate that! 🙌
Hi ,
This is amazing video and loved the way you explained things bit by bit.
Glad you liked it 🙌
This is my learning progression comment. I'll updated with my timestamps. Hope I can reach the final!
Waiting n waiting.........
if in your tab layout you put the
Thank you Vadim for all the shared experience and this great content, Can you please make also the delivery app 🙏
Hey Vadim! Loving this video! I followed your video to 6.33.20 mark and my app is now connected to Supbase local, .env file connected to supabase local API and ANON key, and reset my db like you showed. Docker Desktop is running the container without issues. Now when I try to create a new user in the app and click SIGN UP button, I get this error in Terminal: [TypeError: Network request failed]. I searched all over the internet for this fix but unable to fix it. Would you have an idea what the issue is and the fix?
About to start this video, excited already
Good luck 🚀
Iam starting this course 25-10-2024 ❤
I am just into the video sir. It's just mind blowing.. simple understanding video sir
Thank you so much 🙌
Hats off , your tuition inspires a lot . Grand master
Thank you 🙌🙌
Wow, this course was amazing, it was very well explained, thank your very much to share.
Glad it was helpful! 🙌
This is awesome!!
The course has lot to teach.
But I love your English even more 😊😊😊, its beautiful
Aww, thanks 🙏
Hi, im following the tutorial but i got that error when im setting isAdmin at 4:00:00 video:
ERROR: Warning: Maximum update depth exceeded. This can happen when a component calls setState inside useEffect, but useEffect either doenst jave a dependecy array or one of the dependecies changes on every render.
My code is the same as AuthProvider, idk how to solve it, tks.
Hey Joao did you resolve the problem? i have the same problem
@@diogomiguelwbdv Yes, i made a mistake ..
missing one (!) in one if, here:
if (session) {
if (!session) {
return ;
on src/app/(user)/_layout.tsx
Hello and thank you as always for this video. I’m wondering what are you using for auto completion and for auto formatting your text? I can’t seem to get that to work for me.
Haven't watched the course but people use GitHub copilot for auto complete. It's an extension.
And prettier for formatting
Hey when I transfer my app,components and constant folders to src the import in layout.txt and other files stops working specifially in line "import {useColorScheme} from '@/components/useColorScheme''"...What is the solution??
In tsconfig.json on line 7, change "./*" to "./src/*". I hope this help :D
Heyy the notion link for the project seems to be down it doesnt load the page for me so i cant install the supabase dependencies and follow along the tutorial
This is a very well done tutorial. Thank You.
Glad it was helpful!
supabase , syntax for fetching data from multiply related tables is absolutely awesome
Yes, you are right🚀
at 1:03:47 time i can't change my tab bar names. im trying but its not changing what should i do
Literally saved my life, thanks so much!
At 41:14, why we do we export the default pizza image? What is the purpose of exporting?
so that we can use it as a fallback image for any of those products, happy coding :)
I think you can register menu index as the root entry point instead of creating an index page at the app level just to redirect?
Keep up the good work. Ive learnt a lot from your tutorials.Thank you
Thank you for your support 🙌
You're awesome dude. Keep up the good work.
Thanks! Will do!
vadim, the main guy👍. Always eager to give out freely!
Thank you, my pleasure!
An excellent tutorial. Very well done!
Glad it was helpful!
At 40:40, why do you do this intermediary step of creating a second type? Why not just use the imported Product type?
NVM. I just realize that the purpose is be able to flexibly add additional properties in the the ProductListItem component needs more than just what's declared in the Product type
I was hard stuck on getting local supabase to run, there is a problem with this supabase_vector something from working but I ran the command npx supabase start --ignore-health-check and it finally started. No idea if this will pose an issue down the road but we will see
What an amazing tutorial!
Thank you so much for this video!
For the first Modal lessons, I am having issues with showing the modal on Android devices. Apparantly this is an Expo issue and modals mainly work on IOS devices.
Is anyone else experiencing the same?
You're welcome!
I have posted the fix.
@@zuhairrehman2526 Where?
Hello, I am having issues. I followed the video and install everything as shown, Apparently it is around watchman, Could I ask you a question about it ?
This is interesting, thanks Vadim. Do you mind making a comparison between AWS Amplify and Superbase in a short video or on notJust newsletter? I see some of your projects shifted away from Amplify lately
Great suggestion!
Hi Vadim, I'm almost finished with your wonderfull project, thanks. But around 6:25:00 you seem to have a container created on docker, but i don't know how to set it up. Can you help?
Got it. If someone needs help just tell me.
Read more here: supabase.com/docs/guides/cli/local-development
@@notjustdev Hello Vadim, thanks for your response! Im getting a 'network request failed' when i'm creating a new profile in the local database. docker is running and the login is done
It migth have to do with the fact that my API url it's: 127.0.0.1:54321 and yours is localhost..... idk
heyy did you got any solution for netwrk request failed issue? ik getting this while uploading images to supabase storage
Thank you for this content
I have a question can I create (tabs)
So that it is displayed within the mobile app
But within laptops, for example, tabs disappear
؟ I searched for it but found no results
Hey devs! Can someone help me with the Docker setup? I'm not sure if Vadim created the container before running the Supabase commands or if Docker needs to be running for the container to be created automatically.