🔴 Build the Uber clone in React Native (Tutorial for Beginners) [Part 3]

Рет қаралды 36,572

Күн бұрын

Let's learn React Native by building the Uber clone from scratch even if you are a beginner.
📚 Enroll NOW for "The Full-stack Mobile Developer" and save 30%
academy.notjust.dev/
🚀 Download the Asset Bundle (Images, Dummy data, PDF presentation):
assets.notjust.dev/uber
🐱‍💻 Source code:
github.com/Savinvadim1312/Ube...
💬 Join the notJust Development gang and let's build together:
/ discord
If you are a beginner that wants to learn javascript and react-native or an advanced javascript developer that wants to get into mobile development using react native then this Livestream is for you. This is a perfect opportunity to follow along and build this application together with us, and add it to your portfolio as it will help you land your next job. If you finish the app, tag me on social media and I will give you feedback.
We will start building the Uber clone from scratch, starting from setting up a React Native project and finishing with connecting the application with a GraphQL backend using AWS Amplify. We will walk through designing the UI layout of the app, structuring everything in components, and putting everything together. We will also implement navigation between screens, header bars, and tab bars for the Uber app menu using React Navigation.
Learn how to work with Google maps in react native, to draw routes on the maps, and to implement an autocomplete feature for the location input.
For the backend, we will be using AWS Amplify, which is an amazing combination of tools and services from AWS, that helps us build mobile and web applications faster. It offers pre-made authentication components and flows, database, API (REST and GraphQL), storage, and much more.
Doing the react-native Uber clone yourself is a great opportunity to practice React Native, modern Javascript, Typescript, AWS Amplify. We are always trying to use the latest technologies and best practices, so that's another opportunity to learn something new, being it functional components, hooks, state, navigations, or AWS and Amplify.
Tag me on social media when you finish this build, and I will give you feedback on your code.
LinkedIn: / vadimsavin
IG: / vadimsavin0
Twitter: / savinvadim_
Timecodes:
00:00 Intro
04:40 Prerequisites
05:36 Starting point
11:03 Setup AWS Amplify Project
23:49 Authentication
1:31:36 Graphql API
#VadimSavin #notjust.dev #notJustDevelopment

Пікірлер: 95

@juanfernandoechavarria2457 Жыл бұрын

Im so excited because im begin with AWS in all my life, i hope this are a big step on my new life like mobile developer THANKS !!! greetings from Colombia, y like to stay at the complete youtube live and your feedback is so chill :D

@ahsanaliahsan Жыл бұрын

First of all, 'not just' is a perfect name as you are not just a mere programmer but a great tutor and a superb mentor. If anyone stick to your videos for sometime and leave all others (distractions) he/she will learn a lot more. I am your appreciator from Pakistan. Keep it up. 👍👍👍. One question I will ask, if you allow ? 🙂 What if I use Django REST framework as a backend and host it on AWS server and not use AWS Amplify. Will these two approaches serve the same purpose ?

@jonathanalexander2797 3 жыл бұрын

Thanks you Vadim, you're awesome 👏👏

@notjustdev 3 жыл бұрын

Thank you too!

@okeyshourovroy2769 3 жыл бұрын

Make some clone projects with nodejs mongodb and react native . Also please cover Webrtc, the way you explain is really awesome

@ardagunoglu3054 2 жыл бұрын

Hey Vadim! First of all, I love to see your content and I apreaciate that showing your skills in this community. I have a problem with not receiving email. Whenever I register through the application, I do not receive an email confirmation code. Even though I changed the verification option from 'email' to 'No verification' from MFA and verification section via cognito console, I saw that the application still asked for a verification code. I wonder if the data does not match? And then I opened and registered a user through the cognito console. But when I log in on my application with the user I registered, I get the error 'User is not confirmed'. However, the user I set up in the Cognito console is registered as 'Email verified'. I really don't know what to do. I have no solution left to try. can you help?

@karoche-tv Жыл бұрын

hello Vadim, I did everything like you did, but I don’t have a table in the database, I found it all, maybe it doesn’t create the aws.DinamoDB() method? At me aws.DinamoDB was not defined writes. What to do ? I reinstalled aws-sdk version 2.1. And I made npm i aws sdk and webstorm asked me where to install? To the backend/nodemodules or Driver/nodemodules folder. Where do you need to install? And in my C: / Users / folder there is also a nodemodules folder and there is also an aws-sdk folder there. When I launched the application when I registered, I got an error: PostConfirmation failed with error aws. DinamoDB is not constructor. But when I enter the secret code from the mail and enter the login and password, everything works. But I can't find the table in amplify.console.

@damini2003 2 жыл бұрын

A wonderful Tutorial. Can we have the driver side app?

@paulmccafferty40 Жыл бұрын

@key has been deprecated, @primaryKey and @index have replaced it. I can't imagine when referencing the userId & carId would be primaryKey on table Order. Should we use @index? What would the syntax for that look like, does anyone know?

@muhammadumer-pc9fv 3 жыл бұрын

? Please choose the profile you want to use statigy Adding backend environment dev to AWS Amplify Console app: d3a5ngezixg5qd / Initializing project in the cloud...An error occurred when creating the CloudFormation stack × Root stack creation failed init failed

@mredmister3014 3 жыл бұрын

Do you have a beginner video on development environment setup end to end for hardware and software for this full stack development on iOS? I’m a database programmer mostly in Windows and would benefit from an overview of what is needed to get started, hardware and software libraries, on your tutorial from iOS perspective. So truly feel like a beginner here.

@notjustdev 3 жыл бұрын

I don't have yet such a video. Check the react native website for their requirements

@SharCram10 Жыл бұрын

Not Authorized to access listUsers on type Query this is the problem i encountered when running a query in appsync, does anyone else also have the same problem? Also, how could I resolve this? Thanks for all the response

@chrisamuzie401 2 жыл бұрын

Am having a serious issue in this build bro, when i click on the current location button, i will get a long list of available places and some will go off the screen and can not be scrolled..... what will i do please?

@middlewareforyou 2 жыл бұрын

Hey how can we clone and use your project? In mine amplify init won't work

@miqi449 3 жыл бұрын

Can you add an airport virtual queue feature in the driver's app?

@webnet9285 Жыл бұрын

If anyone trying it out in 2022, few things have changed for ex: you will have to add Auth.configure(awsconfig); in addition to Amplify.configure(awsconfig); . When it comes to schema , @key and @connections have to replaced , refer aws docs.

@muzammilkhan517 Жыл бұрын

hey bro can you please give me file or github link so that i refer this cz i have facing a lot of issue in V2

@daverd6434 2 жыл бұрын

Hello Vadim, please if you could help me (or anybody had the same problem). I managed to log up and log in perfectly. 1.- in: -> Authentication -> view in Cognito -> users and groups -Users are displayed correctly BUT 2.- in: -> Api -> userTable -> View-> tables->items -No items are displayed in 'items created' Nor in the queries it returns an empty array, although it logs in correctly. -> Api -> View in appsync -> Queries query listUsers { listUsers { items { id name email } } } PLEASE IF ANYBODY COULD HELP

@chaimaeaboulkaram5246 2 жыл бұрын

i have the same problem, did u find any solution.

@daverd6434 2 жыл бұрын

@@chaimaeaboulkaram5246 unfortunately i didn t find a solution BUT you can continue .... the rest is working perfectly, and this part is not a need ... eventually we ll find a solution, dont waste your time like i did, cheers

@chaimaeaboulkaram5246 2 жыл бұрын

@@daverd6434 okay thanks

@Capybaraking76 2 жыл бұрын

May I use this template as a starting point for my own app and potentially make profit from it? I just want to ask so that I am transparent with you.

@Khahory Жыл бұрын

Sin querer use amplify init y parece que me desconfiguro el proyecto, ahora tendre que ver el video en cuando se inica la confi f XD

@amanguptadev 3 жыл бұрын

react-native run-android gives me error after install package amazon-cognito-identity-js please help to resolve this issue

@pogios 3 жыл бұрын

Hello everybody. I am currently making an uber-clone project, installed aws, but when a new user is registered, a message with a verification code does not come to the specified mail. The message "auto verification not turned on" appears. Someone faced such a problem?

@webgooniedotcom 2 жыл бұрын

I have the same exact problem done started this part over 5 times. I had it working in Expo then I redid project in react-cli and no luck what so ever. No item to database and no email verifcation code sent.

@pogios 2 жыл бұрын

@@webgooniedotcom try to manually confirm the registration of the user, there is such a function. In my opinion, this problem arises from the regional settings, try to change the server region, dig into the settings, demolish the old server completely, and create a new one with a different region

@pogios 2 жыл бұрын

@@webgooniedotcom I lost 2 days on this

@webgooniedotcom 2 жыл бұрын

@@pogios Thank you for such a fast response. I did run amplify delete and deleted it rebuild project up to 1:20:00 minutes switched to us-east-2 and now I'm switched to us-east-1 this is the one I was using when I was on expo. I'm totally stomped on why it won't work at all. I have followed everything to the T exactly.

@webgooniedotcom 2 жыл бұрын

@@pogios I've lost 2 months on this so far.

@csspmspanacea 3 жыл бұрын

i followed all of your steps but no item is added in my dynamoDB table what to do.

@syedufaqhaider2796 2 жыл бұрын

Yes i also faced same problem

@daverd6434 2 жыл бұрын

did you manage to solve the problem? please

@syedufaqhaider2796 2 жыл бұрын

@@daverd6434 no man

@Mark-lv7ty 2 жыл бұрын

Good tutorial Vandim but the schema graphql is outdated. It will be much appreciated if you can help us upgrade v1(legacy) to v2(latest update). Ive learned a lot from these but my database is not working well. ty for these amazing tuorials

@danielkwameamissah 2 жыл бұрын

Yes, me too please. I'm facing some issues with the latest update

@diaromar2856 Жыл бұрын

have you found the issue how we should make it in v2?

@notjustdev 3 жыл бұрын

🚀 Download the Asset Bundle (Images, Dummy data, PDF presentation): assets.notjust.dev/uber 📚 Enroll in "The Full-stack Mobile Developer" and become a 6-figure dev in 2021: academy.notjust.dev/

@rashmisharma5656 3 жыл бұрын

This link is not working :(

@qriousb6623 2 жыл бұрын

Sir, verification code does not to my mail for use sign up. Can help on this sir? Tried different region. Does not help.

@nikhil7053 3 жыл бұрын

Thanks

@notjustdev 3 жыл бұрын

Welcome

@nathuterimkc 2 жыл бұрын

HI Vadim bro, i am facing a issue regarding amplify init. i have followed all your steps but there is no custom.js or functions folder is created automatically like yours. Please help me out. I love your videos. i hope you will reply

@rjjain9325 2 жыл бұрын

Did you find a solution for this? I am running into same problem

@ericuche755 8 ай бұрын

What can aws do that firebase can’t

@daverd6434 2 жыл бұрын

Thank you very much Vadim for sharing your knowledge. Please if you or anybody could help me. Does anybody encounter the problem not being able to see the item created in the users table DynamoDb but it apparently signed up and in sucessfully? please.

@naciribraimo7967 2 жыл бұрын

Me too getting the same issue....

@daverd6434 2 жыл бұрын

@@naciribraimo7967 unfortunately i couldnt find a solution

@rjjain9325 2 жыл бұрын

@@daverd6434 Did you find a solution?

@daverd6434 2 жыл бұрын

@@rjjain9325 no i couldnt, but i will try again, i am working on it next week from scratch ... it must be something related on how we are creating users. we will find a solution, in the mean time continue as much as you can , and please let me know if you have any hints on what could be the problem

@rjjain9325 2 жыл бұрын

@@daverd6434 hey I actually figured it out. For me it had to do with authentication. With the new graphql schema it auto generates a global auth comment that out. Then for user you have to do an auth directive that is allow public, for cars/orders it is allow private.

@csspmspanacea 3 жыл бұрын

Can we use AWS services in Pakistan as well? because it does not show region for Pakistan and I am stuck there

@notjustdev 3 жыл бұрын

You don't need a region in Pakistan to work with AWS. You can pick the closest to you, or better, the closest to your end-users.

@csspmspanacea 3 жыл бұрын

hey vadim , after authentication and all the stuff. i restarted my emulator and it gave an error> I'm stuck here for last 24 hours Error: Duplicated files or mocks. Please check the console for more info at setModule (D:\GasUp\GasUp ode_modules\jest-haste-map\build\index.js:543:17) at workerReply (D:\GasUp\GasUp ode_modules\jest-haste-map\build\index.js:614:9) at processTicksAndRejections (node:internal/process/task_queues:94:5) at async Promise.all (index 46) at async D:\GasUp\GasUp ode_modules\jest-haste-map\build\index.js:426:22 What am I supposed to do now.

@JFRandomKhan 3 жыл бұрын

In metro.config.js edit with the following: const blacklist = require('metro-config/src/defaults/exclusionList'); module.exports = { transformer: { getTransformOptions: async () => ({ transform: { experimentalImportSupport: false, inlineRequires: true, }, }), }, resolver: { blacklistRE: blacklist([/#current-cloud-backend\/.*/]) } }; With that you solve the problem :)

@csspmspanacea 3 жыл бұрын

@@JFRandomKhan I hope this works

@daverd6434 2 жыл бұрын

@@JFRandomKhan thank you very much 👊🐼

@JFRandomKhan 2 жыл бұрын

@@daverd6434 no worries :)

@hassaneldika6645 2 жыл бұрын

aws how much it charging for this part????

@travelwithcode 3 жыл бұрын

Places API and Route API not showing in Android

@jonahg6564 3 жыл бұрын

Could you do a clubhouse clone maybe? 👀

@notjustdev 3 жыл бұрын

Heeey, I have that in my list. I will try to do it sometime in future

@esotomay21 3 жыл бұрын

did anyone else get an error when running amplify init? I get "could not initialize 'dev': Access Denied" despite configuring amplify.

@notjustdev 3 жыл бұрын

try 'sudo amplify init`

@esotomay21 3 жыл бұрын

Yeah It turns out I had a different aws account associated with my cli

@ricksonic 3 жыл бұрын

Can you make a video step by step tutorial on how to download and run the emulator? I'm running visual studio on window and its not working. Thanks!

@cubedev4838 3 жыл бұрын

Can u make payment integration in react-native?

@notjustdev 3 жыл бұрын

Working on it

@cubedev4838 3 жыл бұрын

@@notjustdev thanks a lot....i just found your channel yesterday night. Seriously amazing channel :)

@notjustdev 3 жыл бұрын

@@cubedev4838 thanks

@entrepreneurfashionweek97 2 жыл бұрын

price calculations please

@muhammadumer-pc9fv 3 жыл бұрын

sir please hepl me i am faceing this issue plz solve it

@hassaneldika6645 2 жыл бұрын

please, can you provide us with firebase phone number authentication for this clone?

@hassaneldika6645 2 жыл бұрын

instead of AWS

@prakashj9210 2 жыл бұрын

Hi can anyone helpme with this error: React Native DuplicateError: Duplicated files or mocks

@notjustdev 2 жыл бұрын

github.com/aws-amplify/amplify-cli/issues/3295

@prakashj9210 2 жыл бұрын

@@notjustdev,Thanks that error resolved but now I am facing "Amplify" is depricated and Error: Amplify has not been configured correctly.

@michael-shakaikhanoba9810 3 жыл бұрын

please Vadim let next video be done using expo

@michael-shakaikhanoba9810 3 жыл бұрын

and please ,i beg you let it be netflix please im a beginner and i need more videos from you you are like the best teacher for me

@deepshah6790 3 жыл бұрын

Can you make Reddit app??

@danishishtiaq1107 3 жыл бұрын

Is this for beginner?

@muhammadumer-pc9fv 3 жыл бұрын

please

@dj9479 3 жыл бұрын

The goofy porch alternately continue because wasp spectacularly undress into a yummy frown. husky, thinkable paperback

@daverd6434 9 ай бұрын

Thank you very much for the video, unfortunately following the documentation: configure amplify --------------------------- >npm install -g @aws-amplify/cli >amplify configure . . . set up backend ------------------------ >amplify init (after choosing AWS Profile) ( choose the profile) * instead of installing I got this error: 🛑 We are unable to process your request. Please reach out to your support representative. I dont seem to find the error. May you help me please. I would be very grateful.

@daverd6434 7 ай бұрын

It is a problema related to the account.