Build a React Native Full Stack App : Expo, Google Map, Firebase | Full Tutorial

Build a React Native Full Stack App : Expo, Google Map, Firebase | Full Tutorial

Learn how to build a complete EV charging station finder app using React Native, Expo, Google Maps API, Places API, and Firebase! In this comprehensive tutorial, you'll go from zero to hero, building a powerful and user-friendly app that helps EV drivers locate charging stations near them.

No prior experience with React Native or Google APIs is necessary! Our step-by-step guide covers everything you need to know, including:

* Setting up your React Native environment with Expo.
* Integrating Google Maps API to display a map with charging stations.
* Utilizing Google Places API to retrieve detailed information about each station.
* Managing user location and providing directions to the nearest station.
* Adding a user interface with React Native components.
* Deploying your app to the App Store and Google Play Store.

This tutorial is perfect for:
React Native developers who want to build practical applications.
EV enthusiasts who want to contribute to the growing EV infrastructure.
Anyone interested in learning about Google Maps API and Places API.
By the end of this tutorial, you'll be able to:

* Setting Up the React Native Project with Expo
* Integrating Google Maps API and Configuring API Keys
* Implementing Geolocation in React Native
* Designing the User Interface for the EV Charging Station Finder
* Utilizing the Google Places API for Charging Station Data
* Connecting Firebase to Store User Preferences and Favorites
* Styling and Refining the App Interface

Here are some additional resources you might find helpful:

Let's get started!

00:00:00 Introduction
00:05:27 Create App & Run on Emulator
00:16:28 Custom App Font
00:22:20 Login Screen UI
00:39:07 Authentication
00:50:54 Tab Navigation
01:01:44 Google Map View + Style
01:08:41 Get User Location
01:17:28 User Location Marker
01:20:54 Header (Home Screen)
01:28:33 Google Place Autocomplete/Search Address
01:37:25 Google Place API (Fetch)
01:50:37 Display EV Station List
02:17:27 EV Station Markers on Map
02:34:35 Get EV Station Using Search Address
02:37:39 Add/Remove to Favorite
03:11:22 Fav Tab Screen

#reactnative #evchargingstation #googlemaps #placesapi #firebase #expo #tutorial
Join this channel to get access to perks:

[aminoussoul]

im honestly blown away by how you get your ideas for a project.can you make a video about how you make your ideas come a live
Keep up the good work my friend

[m__link]

Man thank you….I’m become addicted to your channel🎉.

[techlock]

Your explanation is very accurate and very easy to understand even for a newbie in this field. Wish you all the best. Keep making videos for us. We look forward to your continued support.

[grahamkatana]

The APIs are nice, just a heads up using placeId when writing the document, it gets overwritten if someone logs in and likes (add to favorites) same placeId, solution is to concatenate the userId + placeId 😊

[jamalmydeenms]

Thank you so much for your great work.keep going on.. please make a small project employee management with MySQL.

[Alex-wkmo]

Can you make a tutorial how to get the routing/directions to the place by clicking on the green arrow in the PlaceItem?

[scorpion]

I love this app man 👏. Giving me so many ideas

[javalok]

Thanks for your effort, can you please make news app with backend and admin complete in react native

[usmanmarkaz]

Great project please make also with Node Js and Redux Toolkit thanks

[TipyPeYoutube]

Can you make a tutorial on how to set up and build a preview or release apk? Currently my built app crashes when I open the page that uses google maps

[alwazfarooqui]

Hello,
While implementing markers for nearbyPlaces I am getting this error
"Error while updating property 'coordinate' of a view managed by: AIRMapMarker"
Step-by-Step I have followed from this video still stuck on this
Please help @tubeguruji

[Aesthetic]

Sir how much cost api takes after free trial ends? So that I will sign up when my project submission is near to avail free trial

[ameytari]

Sir can you explain how to build an apk file of the expo app which has firebase as a backend
Please sir humble request 🙏🏻🙏🏻

[Krrait]

Make a tutorial on how to integrate clerk and firebase so that every time manually we don't have to add data of user

[davidhamilton]

Does this include functionality for all three including web app?

[AIInsights]

❤great project but my question is do i need back end for this i want the people to register to the app and put there data and photo and booking information or forms so i need backend for that but how to put this can you show me how or just give me some idea where i can see this possibility or i need to ask AI chatgpt for this

[satyamsharma]

It is only frontend design or with backend

[akshmitsaxena]

nice tutorial.
just one doubt if i have multiple social sign in like google, facebook, apple, how can i use that in useOAuth() function which only takes one strategy? is there any way I can make it an array for example take oauth_google, oauth_facebook, oauth_apple

[mirochannel]

next app for react native can teach how to use tailwind for react native?

[Aesthetic]

And Only Place Api is needed means only 1 Api is needed for this project na?