In this free course, we will learn how to build a live mobile app using React Native Expo, Tailwindcss as well as live API integrations with Google Places API and Rapid API.

References used in the project
React Native Docs: https://reactnative.dev/docs
Expo documents: https://docs.expo.dev/archived/expo-cli/
TailwindCSS with React Native: https://www.npmjs.com/package/tailwindcss-react-native
React Navigation: https://reactnavigation.org/docs/hello-react-navigation
React Native Animation: https://www.npmjs.com/package/react-native-animatable
Google Place Autocomplete: https://www.npmjs.com/package/react-native-google-places-autocomplete
Google Project Cloud Console: https://console.cloud.google.com/
Stackoverflow error handling: https://stackoverflow.com/questions/55802209/get-latitude-and-longitude-from-google-places-autocomplete-in-react-native
Rapid API: https://rapidapi.com/apidojo/api/travel-advisor
Expo project dashboard: https://expo.dev/
Project icon: https://www.flaticon.com/free-icon/online-order_1532688?termrestaurant%20app&page1&position2&page1&position2&rated_id1532688&origintag#
Assets: https://drive.google.com/file/d/1BUGvEZrHcUL8Sl4E_jAcNLcf1CjbJ0r0/view?uspshare_link

Source: https://codewithvetri.web.app/videoDetail/1667880608272

Design credits: https://dribbble.com/shots/15172316-Travel-App-Concept
CodeWithVetri: https://codewithvetri.web.app/
Firebase: https://firebase.google.com/
Tailwind CSS: https://tailwindcss.com/

GitHub code (give it one star): https://github.com/Vetrivel-VP

In this video you will learn:
– Advanced React Native best practices, such as folder and file structure, hooks and references
– Creating a user interface using Tailwindcss
– Work with API endpoints

Find me here:
https://codewithvetri.web.app/
Facebook: https://www.facebook.com/velvetri452
Instagram: @vetrivel_ravi
Linkedin: https://www.linkedin.com/in/velvetri/

Chapters
00:00 – Presentation
03:40 – Project setup
09:09 – How to run the project
3:22 p.m. – Tailwindcss configuration
11:07 p.m.: React to navigation
30:40 – Home screen header section
36:39 – Hero text on home screen
44:34 – Home screen subtext
49:19 – Home screen circle layer
51:46 – Image container on home screen
58:07 – Go button on home screen
01:05:17 – Added animation
01:09:42 – How to navigate to another screen
01:14:37 – Check out the header section of the screen
01:23:09 – Google Place API integration
01:40:47 – Quick integration of the Travel Advisor API
01:45:57 – Menu container
01:53:20 – Menu card
02:02:55 – Top section of main container
02:12:07 – Item Card Container
02:23:13 – Loading the spinner
02:27:08 – No data found screen
02:31:42 – API data integration
02:45:08 – Transmitting data to another screen via setting
02:51:20 – Main element screen image container
02:59:09 – Customizing the main item screen
03:11:35 – Dynamic API request modification
03:24:04 – Publication of the application on Expo Go

#reactnative #api #vetrivelravi

Please take the opportunity to connect and share this video with your friends and family if you find it useful.