🔴 Build the Uber clone in React Native (Tutorial for Beginners)
HTML-код
- Опубликовано: 9 май 2024
- Let's learn React Native by building the Uber clone from scratch even if you are a beginner.
🔴 Build the Uber clone in React Native (Tutorial for Beginners) [2] • 🔴 Build the Uber clon...
❗Try our FREE 4-day Masterclass on notJust.Academy:
assets.notjust.dev/masterclass
✨ Asset Bundle: assets.notjust.dev/uber
⌨️ Source code: github.com/Savinvadim1312/Ube...
📚 Enroll NOW in The Full-Stack Mobile Developer course and don’t miss out on your chance to become a 6-figure dev! Check out what our successful students are saying about their experience:
academy.notjust.dev
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.
💬 Join the notJust Development gang and let's build together:
Twitter: / vadimnotjustdev
Instagram: / vadimnotjustdev
Facebook: / notjustdev
LinkedIn: / vadimsavin
Discord: / discord
Timecodes:
00:00 Intro
01:32 What will we build?
04:17 What will you learn?
06:24 Prerequisites
09:45 Initialize a new React Native Project
12:09 Install Vector Icons
25:40 Home Screen
1:15:57 Search page (Google Places Autocomplete)
1:57:47 Search Results Page
2:00:00 List with Uber Options
2:37:00 React Native Maps
3:00:20 Render Cars on the Map
3:16:07 Maps Direction (Route)
3:27:00 Q&A
#uberclone #notjustdev #reactnative 
Наука
![🔴 Build the Uber Driver App in React Native & AWS Amplify (Tutorial for Beginners) Part [5]](http://i.ytimg.com/vi/E95VMb6nzKc/mqdefault.jpg)
![🔴 Build the Uber Driver App in React Native & AWS Amplify (Tutorial for Beginners) Part [5]](/img/tr.png)
![Kehlani - After Hours [Official Music Video]](http://i.ytimg.com/vi/6qatTTscK4c/mqdefault.jpg)
Hi I am from India and started my career in react native by learning from your videos. It helped me landing to my first job and i cant explain my happiness. Thankyou very much for such great efforts and teachings.
Hey, that's really awesome, congratulations. Can you share a bit more details about the process, so that new developers can learn from it. How specifically did my videos help you?
what process/flow would you follow from start to end.. kindly share it please
Hi Ayush i'm new to react native can you please let me know what to learn first step by step ?
we can make app for you check our Readymade carpooling App ruclips.net/video/yl8SY3IK6dA/видео.html and connect with us by details in description
Share more details please. I want to be a freelancer like you.
You are an incredible person and believe me I didn't know anything about React Native but with this tutorial I learned much more than I expected and now I feel very comfortable and I acquired a lot of knowledge that is completing my career.
I'm on the waiting list to start one of your courses. thank you very much Vadim.
Wow, thank you!
This is such a cool tutorial! :) Keep it going! Cheers mate!
I can't believe its working! keep it up! Shared everywhere! You deserve it!
have you tried the tutorial lately? and please are the codes and everything working
i just wanna know because i want to start this as my final year project🤔🤔
Man!! You r awesome bro!! I am using your uber clone and messenger clone as a reference and combine them to build a new project for my startup business!!
That's the best thing about livestream , the code solves the problem live and that helps the viewer to grasp the content . A tailored tutorial that has skipped the mistakes and debugging stuff makes the learner believe that he/she is not good enough and also some teeny tiny bits are skipped and has to rewatch everything .
I've got an internship man and I'll pay whatever I can after receiving my first salary .
I appreciate that. Nobody is perfect and nobody can code without stackoverflow. Good luck with the internship
This channel is on fire 🔥 🚀 🚀
You are best ...you deserve more subs..i will share it to my colleagues
It's great! Vadim you are amazing!! thank you for taking the time to impart your knowledge 👏👏
Glad you liked it!
can u get me a virtual credit card with $1 please? so i can use it for AWS verification, and Google Developer to turn Billing on. please .
Thanks bro i was waiting for this... you are superb
You are doing amazing job man. Hats off to you. Keep up this great work. i hope u reach a million subs.
thank you Vadim Savin, more power to you!
Thank you too!
thanks for this tutorial, happy new year bro
Thanks, happy new year to you too
awesome video Vadim! thanks for this tutorial! God bless you and Rusia!
Hi Vadim,
Thank you so much for the great series, and I just have a question,
Regarding the codes (are these full codes for the full series which is I can upload them and the project after that gonna works probably or do I need to add other things).
Thank you again and I'll be waiting for your response
great job, guy!!!!!! I'm from Brazil and I'm learning a lot. Thanks!!!
Thank for your work!
I have no doubt that you are the best!
Well, the only one!
for the last 2 hours couldn't get the autocomplete to work looked all over the internet, by the way the best tutorial ever keep up the good work
were you able to solve it?
Hi Vadim. Nice video. Just a question. Do the cars update their position real-time on the map? Or is it static?
You are the best..can you consider doing the Admin Section of the app. Thanks
Always great 👍
Hello, good content! Thank you. Question for you, why did you decide not to use Expo?
Wow, great content Vadim. Wish you a good luck ;)
I hear the notes of Russian accent which is also cool, hehe
Thanks Dima :). Yeah, I am coming from a post-soviet country, so I know a bit of russian
@@notjustdev Kruto! :)
we can make app for you check our Readymade carpooling App ruclips.net/video/yl8SY3IK6dA/видео.html and connect with us by details in description
Hats off. very useful help
Wow...so so amazing. And you're a good teacher. Will this app run on both Android and iOS?
Please clone the passenger app as well.
Yeah, yep..so yeah. great!
Здорово) ответил на многие вопросы, thx!
Hello sir we can make app for you check our Readymade taxi booking app
ruclips.net/video/UuP4uck7VNI/видео.html and connect with us by details in description
Awesome concept.
Amazing video!!.. Hello, is it possible to use a web UI instead of mobile UI when using React? Thank you
Hello dear sir, can't wait for this channel to blow up and reach million subs, your content is amazing, can you please consider add making a tinder clone with your experience will be a huge hit 🙏
Thanks for the support
u definitely deserves more subs than this
Step by step :D
This channel is very informative..keep up your god work for humanity..that plugpoint on the wall 0:05 is interesting too.
Thank you so much 😀
Thank you very very much sir😍
we can make app for you check our Readymade carpooling App ruclips.net/video/yl8SY3IK6dA/видео.html and connect with us by details in description
This is amazing and very informative video . Excellent explanation and tutorial. Thanks for sharing.
can you complete this project
Nice video shot, thanks for sharing, like it :)
Nice seeing this tutorial though have not yet building it but I want to ask what I am really looking for is Logistic App that is parcel tracking app, way bill management app. Have you done something similar in React-Native?
U are so underrated man ❤🙏
Patience! Thanks
I am a regular view and subscriber of your channel.Your course contents are excellent.I have a request,can you please make some project in Reach Js?
Noted
Hi Vadim, firstly I just want to say awesome work, you clones are great. Secondly, I would like to ask if you can make a tutorial or share some documentation around installing react-native cli? I'm finding it extremely difficult to get it to work. Expo is great, its works perfect but I see a lot of your builds use react native cli.
Thanks buddy
@@notjustdev thank you for your response. I have strictly followed the official documentation but I seem to get a flipper and flipper r socket error.
@@notjustdev ok I just got it to work 😃 it was the flipper folly pod file that needed to be downgraded to version 2.3.0
Y’a pas
Hello friend, your tutorials are very good, I am learning React a lot ... a question that you use to autocomplete the code, I use visual code, if you can help me, please
3:08:00 Instead of hardcoding the marker size values, I recommend using the device pixel rate.
I was on this stream 2 years ago and it's still fun to watch.
Hi, I'll be starting Native React would you still recommend this course since it was recorded 2yrs ago?
@@sphalamula6129 Yeah, I'll recommend this video and suggest you look up the documentation in case of changes to how things are implemented.
hey sir, i am making a clone of this app for a client . will i able to build the complete app from this playlist or do i have to add other things for it to work in real time?
I love you man, You the best
no you
Não consigo parar de assistir seus vídeos
Awesome!
It's great!
Muito bom!😃
Nice work
hi , thanks for this tutorial , can u make a clone of uber eats for restaurant (for tablets) ? another question please what's software do u use for capture the video
its fun watching your video can you guide a bit more about google location api as i have to restirect it for specific platform right but it is not showing autocomplete. I have given 100% height and bgColor as well.
I have always want to go into mobile app development Thank you Vadim for this great content. My Mobile App is of on a good start thanks so much bro.
Best of luck!
Awesome
FYI, in this course you will need a visa/master card/... to get the places API to continue.
Awesome project
Awesome project sir
Just a quick question, the backend you will be using is Nodejs/Graphql?
I will be using AWS Amplify for the backend and we will create a graphql API with it
Hi, I am a hit man by trade. I was wondering why no one has made a hit man version of uber where we can accept contracts for wetwork based on location and availability. I am getting too old to fly around the world for a job. Any chance someone here could write something like that and set it live?
can i follow along using expo instead of react-native-cli?
Cool man!
Hi Vadim, nice content are we still getting the second part this week
Unfortunately, there will be no Livestream this week. We will get back to it following weeks after my relocation. Meanwhile, checkout other builds on the channel: IG, Twitter, AIrbnb, Spotify, Tiktok
Congrats Vadim. Thanks for the good work. I will wait. So excited. This is my favourite build
Hi, Can you do an LMS (Learning Management System) with firebase. role based auth with 3 roles, Admin, moderator and student. Thanks
Thank you
Hi vadim, Can you upload a video where you run User and Driver Apps at a time...it would help me a lot..thanks in advance
We are very welcome
dude needs to know slideshow and animations! great tutorial!
Thank you very mach
Where and how can I install the boilerplates used in the video? Your help would be greatly appreciated
Hi.. I really loved the video. It's very informative. I have one question where is the best place to store the api keys when releasing the app to App store or Google Play?
For production you will need to put all your apikeys in the env file.
Wow good!
THANKS
nice tutorial
Hi Vadim, thanks for your time and sharing your knowledge. I’ve been building a Uber clone similar to yours. I’m just wondering for the user location on map does Uber use accelerometer? When you rotate phone on Uber app it rotates the user marker. Thanks again, I have a lot of questions haha
Thanks for your help
You can use the bearing prop
@@larrynxumalo4012 we can make app for you check our Readymade carpooling App ruclips.net/video/yl8SY3IK6dA/видео.html and connect with us by details in description
Hey man, I am confused as a little bit of code pre-exists on your system, which looks like some template also the phone screen mockup on the right side .....or I am guessing that it is the react native environment you were talking about initially in the video.
Hi, what extension do you use when you type "fc" to get the functional component template?
I know it is few month later, I do believe it is a user snippet you can create them within VScode or whatever IDE you using
Great sharing🎉❤
Thank you! Cheers!
First time I see that use case (array in line 34, minute: 1:11:16). Cool.
That's how you can send multiple style objects to a component
Hi, thank you for your great tutorials, have you ever tried to show traffic on the suggested route in React Native ? I'll appreciate if you help me with that ? a hint maybe ... thanks in advance
Hello sir we can make app for you check our Readymade taxi booking app
ruclips.net/video/UuP4uck7VNI/видео.html and connect with us by details in description
Love to learn 📕 ❤️
Always learning 📚
Вы самый комфортный стример! плюс английский можно прокачать. Молодец!!
Is this a perfectly native, full-stack app that we can publish on the play store? And run
Can you please do backend of the uber application
Wow, subscribed... I din't get a chance to look at whoel video but did someone actually follow and prepare the whole app?
Thanks. Yes, you can follow this tutorial as a beginner
Hi is there a way to customise how the MapView looks? E.g how Uber changed the way it's mapview looks.
Can I use expo for this project?
hi Sir , please make video on fleet management app where features like replay , tracking exist . as there is not any video on fleet in youtube
Great content Vadim! Keep it up
Thanks
@@notjustdev sK
@@notjustdev q
Eric’sii
@@notjustdev love
The issue with your jsx file was you cant write tags directly without putting {} these brackets.
Vadim thanks for the turoail!
Can you please tell me what kind of extension are you using for your editor? You type in some variable follow by : but that's not JS code. That's an extension right?
@notJust.dev please answer me if you can, it's almost impossible for me to follow your tutorial (I am just starting with JS and RN) when i am not able to type the same code as yours. this is some type hinting right? How can i do that in VS Code so i can follow along?
Thanks!
That is just some hints from Webstorm. I don't know if there is an extension for that in VScode. Just ignore that part
@@entropyet783 we can make app for you check our Readymade carpooling App ruclips.net/video/yl8SY3IK6dA/видео.html and connect with us by details in description
How can we contact you in regards of a project that I have
Great vids.. It will be perfect app if it has drivers app as well
Yes it will
@@notjustdev 111q22
@@notjustdev 212
Hi Vadim , great content but one question, after the build I want to add into my portfolio. I have developed many react application and hosted on firebase which is easy for me as I get firebase url. what can we do about react native...?
thanks. you can build it and add it to play market and apple store
Thanks vadim can you show us in next live stream..
Hi what's the database you're using for this app?
can we get any project backend in nodejs/express or firebase?
Hello sir just wondering how to start navigation? I mean how to center and rotate map along the rotating the heading marker while vehicle position is moving?
Great video!!😃. $ How much would something like this cost to build something like this for my company?
Hey Vadim, I’m watching your video now. In the both google autocomplete fields it’s possible to get same as Uber. I’ll update you the code. Or do you have github repo? So i can create a pull request to it.
Hey there, The link of the repo is in the description. Thanks
@@notjustdev thanks Vadim. I’ll update. Also in same time I just subscribed you. Great content and keep it up ❤️
can u please tell us the name of the extension you use for auto import
Can i use spring boot and hibernate for backend of this app ?
Is the asset bundle only for OS ? or i can use it with windows ?
what technology did are used used for making Fitenium app ? reactnative or flutter or anything else
React Native for mobile, React JS for dashboards, NodeJS, Graphql backend, hosted on AWS. Also sprinkled a bit with some AWS serverless
can use expo for this kind of project?