🔴 Build the Uber clone in React Native (Tutorial for Beginners)
Vložit
- čas přidán 3. 05. 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 - Věda a technologie
![🔴 Build the Uber clone in React Native (Tutorial for Beginners) [2]](http://i.ytimg.com/vi/_U4zgWcw2Ws/mqdefault.jpg)
![🔴 Build the Uber clone in React Native (Tutorial for Beginners) [2]](/img/tr.png)
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 czcams.com/video/yl8SY3IK6dA/video.html and connect with us by details in description
Share more details please. I want to be a freelancer like you.
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!!
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!
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
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🤔🤔
You are best ...you deserve more subs..i will share it to my colleagues
Thanks bro i was waiting for this... you are superb
thank you Vadim Savin, more power to you!
Thank you too!
You are doing amazing job man. Hats off to you. Keep up this great work. i hope u reach a million subs.
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
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 .
This channel is on fire 🔥 🚀 🚀
great job, guy!!!!!! I'm from Brazil and I'm learning a lot. Thanks!!!
Thank for your work!
thanks for this tutorial, happy new year bro
Thanks, happy new year to you too
Hi Vadim. Nice video. Just a question. Do the cars update their position real-time on the map? Or is it static?
Hello, good content! Thank you. Question for you, why did you decide not to use Expo?
Yeah, yep..so yeah. great!
You are the best..can you consider doing the Admin Section of the app. Thanks
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?
I have no doubt that you are the best!
Well, the only one!
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.
Здорово) ответил на многие вопросы, thx!
Hello sir we can make app for you check our Readymade taxi booking app
czcams.com/video/UuP4uck7VNI/video.html and connect with us by details in description
Amazing video!!.. Hello, is it possible to use a web UI instead of mobile UI when using React? Thank you
Hats off. very useful help
FYI, in this course you will need a visa/master card/... to get the places API to continue.
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?
Always great 👍
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?
Thank you very mach
Muito bom!😃
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
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 😀
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
We are very welcome
Thank you
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 czcams.com/video/yl8SY3IK6dA/video.html and connect with us by details in description
Thank you very very much sir😍
we can make app for you check our Readymade carpooling App czcams.com/video/yl8SY3IK6dA/video.html and connect with us by details in description
It's great!
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.
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
Nice work
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
Awesome concept.
Where and how can I install the boilerplates used in the video? Your help would be greatly appreciated
This is amazing and very informative video . Excellent explanation and tutorial. Thanks for sharing.
can you complete this project
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?
Awesome!
Awesome
Cool man!
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
Não consigo parar de assistir seus vídeos
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
Hi is there a way to customise how the MapView looks? E.g how Uber changed the way it's mapview looks.
u definitely deserves more subs than this
Step by step :D
Awesome project
Hi, Can you do an LMS (Learning Management System) with firebase. role based auth with 3 roles, Admin, moderator and student. Thanks
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
Nice video shot, thanks for sharing, like it :)
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.
dude needs to know slideshow and animations! great tutorial!
Can you please do backend of the uber application
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 czcams.com/video/yl8SY3IK6dA/video.html and connect with us by details in description
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?
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
czcams.com/video/UuP4uck7VNI/video.html and connect with us by details in description
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.
I love you man, You the best
no you
Love to learn 📕 ❤️
Always learning 📚
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
can i follow along using expo instead of react-native-cli?
Can i use spring boot and hibernate for backend of this app ?
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
Great sharing🎉❤
Thank you! Cheers!
can we get any project backend in nodejs/express or firebase?
Is this a perfectly native, full-stack app that we can publish on the play store? And run
Wow good!
nice tutorial
Can I use expo for this project?
can u please tell us the name of the extension you use for auto import
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
Hi what's the database you're using for this app?
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!
vector icons not working, I have done same like you but for you showing icons for me not showing when I import vector icons and add icon to show it is saying that build gradle failed I have tried so many times, please say how can I add vector icons is there any video
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
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 czcams.com/video/yl8SY3IK6dA/video.html and connect with us by details in description
The issue with your jsx file was you cant write tags directly without putting {} these brackets.
U are so underrated man ❤🙏
Patience! Thanks
How can we contact you in regards of a project that I have
i wish you could have used tailwind for styling
can use expo for this kind of project?
Great video!!😃. $ How much would something like this cost to build something like this for my company?
vadim you put api key in ios and android directory in some file how we use env in these file can you please tell me
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
can any one say how to import the project and edit this source code
and i am very glad and thank you to @Vadim Savin For wonderful tutorial
where to save the icons? in same directory as the project directory. that part is a bit fuzzy for me
Any turn by turn navigation tutorials?
What is the name of the color picker you are using?