Build a React Native Full Stack App : Expo, Google Map, Firebase | Full Tutorial
33.4 هزار بار بازدید -
7 ماه پیش
-
Build a React Native Full
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.
Source Code : https://shorturl.at/acGS1
Demo Url : https://shorturl.at/tLMX1
All Course : https://tubeguruji-courses.vercel.app/
Other Popular React Native Courses: React Native Tutorial
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:
React Native: https://reactnative.dev/docs/getting-...
Expo: https://expo.dev/
Google Maps API: https://developers.google.com/maps/do...
Google Places API: https://developers.google.com/maps/do...
Firebase: https://firebase.google.com/
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:
@tubeguruji
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.
Source Code : https://shorturl.at/acGS1
Demo Url : https://shorturl.at/tLMX1
All Course : https://tubeguruji-courses.vercel.app/
Other Popular React Native Courses: React Native Tutorial
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:
React Native: https://reactnative.dev/docs/getting-...
Expo: https://expo.dev/
Google Maps API: https://developers.google.com/maps/do...
Google Places API: https://developers.google.com/maps/do...
Firebase: https://firebase.google.com/
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:
@tubeguruji
7 ماه پیش
در تاریخ 1402/09/17 منتشر شده
است.
33,499
بـار بازدید شده