Summary
Keywords
Full Transcript
In this free course, we are going to learn how to create a realtime mobile application using react native expo, tailwindcss along with live api integrations with Google Places API and Rapid API References Used In the Project ⭐ React Native Docs : https://reactnative.dev/docs ⭐ Expo Docs : 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?term=restaurant%20app&page=1&position=2&page=1&position=2&related_id=1532688&origin=tag# ⭐ Assets : https://drive.google.com/file/d/1BUGvEZrHcUL8Sl4E_jAcNLcf1CjbJ0r0/view?usp=share_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 a star ⭐): https://github.com/Vetrivel-VP In this video, you'll learn: - Advanced React Native Best Practices, such as folder & file structure, hooks, and refs - Creating a User Interface using Tailwindcss - Working 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 - Introduction 03:40 - Project Setup 09:09 - How to Run the Project 15:22 - Tailwindcss Configuration 23:07 : React Navigation 30:40 - Home Screen header Section 36:39 - Home Screen Hero Text 44:34 - Home Screen Subtext 49:19 - Home Screen Circle Layer 51:46 - Home Screen Image Container 58:07 - Home Screen Go Button 01:05:17 - Adding Animation 01:09:42 - How to navigate to another screen 01:14:37 - Discover Screen Header Section 01:23:09 - Google Place API integration 01:40:47 - Travel Advisor Rapid API integration 01:45:57 - Menu Container 01:53:20 - Menu Card 02:02:55 - Main Container Top Section 02:12:07 - Item Card Container 02:23:13 - Loading Spinner 02:27:08 - No Data Found Screen 02:31:42 - API Data Integration 02:45:08 - Passing data to another screen through param 02:51:20 - Main Item Screen Image Container 02:59:09 - Main Item Screen Customisation 03:11:35 - Changing the API request Dynamically 03:24:04 - Publishing the APP to Expo Go #reactnative #api #vetrivelravi
Continue this lesson in the app
Install CourseHive on Android or iOS to keep learning while you move.
