🔴 Build the Uber clone in React Native (Tutorial for Beginners)
ฝัง
- เผยแพร่เมื่อ 1 พ.ค. 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 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 th-cam.com/video/yl8SY3IK6dA/w-d-xo.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!
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🤔🤔
This channel is on fire 🔥 🚀 🚀
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!!
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 .
thank you Vadim Savin, more power to you!
Thank you too!
You are best ...you deserve more subs..i will share it to my colleagues
Thanks bro i was waiting for this... you are superb
awesome video Vadim! thanks for this tutorial! God bless you and Rusia!
Hi Vadim. Nice video. Just a question. Do the cars update their position real-time on the map? Or is it static?
You are doing amazing job man. Hats off to you. Keep up this great work. i hope u reach a million subs.
thanks for this tutorial, happy new year bro
Thanks, happy new year to you too
Thank for your work!
great job, guy!!!!!! I'm from Brazil and I'm learning a lot. Thanks!!!
You are the best..can you consider doing the Admin Section of the app. Thanks
Amazing video!!.. Hello, is it possible to use a web UI instead of mobile UI when using React? Thank you
Hello, good content! Thank you. Question for you, why did you decide not to use Expo?
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?
Yeah, yep..so yeah. great!
Always great 👍
u definitely deserves more subs than this
Step by step :D
Where and how can I install the boilerplates used in the video? Your help would be greatly appreciated
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.
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?
Hats off. very useful help
Здорово) ответил на многие вопросы, thx!
Hello sir we can make app for you check our Readymade taxi booking app
th-cam.com/video/UuP4uck7VNI/w-d-xo.html and connect with us by details in description
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
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
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
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?
FYI, in this course you will need a visa/master card/... to get the places API to continue.
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
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 th-cam.com/video/yl8SY3IK6dA/w-d-xo.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 th-cam.com/video/yl8SY3IK6dA/w-d-xo.html and connect with us by details in description
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 😀
Hi, Can you do an LMS (Learning Management System) with firebase. role based auth with 3 roles, Admin, moderator and student. Thanks
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
Is this a perfectly native, full-stack app that we can publish on the play store? And run
Hi is there a way to customise how the MapView looks? E.g how Uber changed the way it's mapview looks.
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.
can i follow along using expo instead of react-native-cli?
We are very welcome
Awesome concept.
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?
Can I use expo for this project?
Muito bom!😃
It's great!
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 th-cam.com/video/yl8SY3IK6dA/w-d-xo.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?
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.
Awesome!
can we get any project backend in nodejs/express or firebase?
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
Can i use spring boot and hibernate for backend of this app ?
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.
can u please tell us the name of the extension you use for auto import
The issue with your jsx file was you cant write tags directly without putting {} these brackets.
Hi what's the database you're using for this app?
Hello Vadim, hello guys, we are trying to show our position on the map in realtime while driving around. That works fine so far but our position is always near the street never "on" the street. Is there a good tutorial or can someone help us fixing this problem? I know there must be something like "snap on road". We are building our app in react native on a mac. Thanks in advance Vadim. PS: of course I would like to pay for the help.
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
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
This is amazing and very informative video . Excellent explanation and tutorial. Thanks for sharing.
can you complete this project
Awesome
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
U are so underrated man ❤🙏
Patience! Thanks
Can you please do backend of the uber application
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
th-cam.com/video/UuP4uck7VNI/w-d-xo.html and connect with us by details in description
dude needs to know slideshow and animations! great tutorial!
can use expo for this kind of project?
Nice work
Não consigo parar de assistir seus vídeos
THANKS
Awesome project
Thank you
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
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 ❤️
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 th-cam.com/video/yl8SY3IK6dA/w-d-xo.html and connect with us by details in description
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
please drop the name of extension to generate boiler plate
in vs_code
📚Enroll in "The Full-stack Mobile Developer" and become a 6-figure dev in 2021: academy.notjust.dev/
🚀 Download the Asset Bundle (Images, Dummy data, PDF presentation): assets.notjust.dev/uber
404
@@bijeesraj007 is the only way we live on undying the francxshdi of universe of power of power the francxshdi to learn the moon 🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝🌝 f
Can you please share me this PDF presentation in Powerpoint
Can I get access to this cause it's showing error 404
404!! :/
Thank you very mach
Nice video shot, thanks for sharing, like it :)
where to save the icons? in same directory as the project directory. that part is a bit fuzzy for me
Hi dear,
I have done user, drive app and dashboard. So what now I need? Should I buy a server? And can u plz send me recommendations
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..
Is the asset bundle only for OS ? or i can use it with windows ?
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 Sir , please make video on fleet management app where features like replay , tracking exist . as there is not any video on fleet in youtube
Cool man!
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
Love to learn 📕 ❤️
Always learning 📚
do i need to buy servers to built and get to taxi hailing business?
How can we contact you in regards of a project that I have
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
14k subs? My man is pumping out golden content and we only got 14k subs? We gotta do better than that boys
haha :D thanks for the support
@@notjustdev that sub count will be 6 figures soon my friend 👌 good luck!
@@notjustdev also, snapchat clone anytime soon? 🤔 would love to see it
Subscribed👍