Go Travel - Mobile App Dev | React Native Expo | TailwindCSS| Google Places & Rapid API's

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 : reactnative.dev/docs
⭐ Expo Docs : docs.expo.dev/archived/expo-cli/
⭐ TailwindCSS with React Native : www.npmjs.com/package/tailwin...
⭐ React Navigation : reactnavigation.org/docs/hell...
⭐ React Native Animation: www.npmjs.com/package/react-n...
⭐ Google Place Autocomplete : www.npmjs.com/package/react-n...
⭐ Google Project Cloud Console: console.cloud.google.com/
⭐ Stackoverflow Error Handling : stackoverflow.com/questions/5...
⭐ Rapid Api : rapidapi.com/apidojo/api/trav...
⭐ Expo Project Dashboard : expo.dev/
⭐ Project Icon : www.flaticon.com/free-icon/on...
⭐ Assets : drive.google.com/file/d/1BUGv...
⭐ Source : codewithvetri.web.app/videoDe...
⭐ Design Credits : dribbble.com/shots/15172316-T...
⭐ CodeWithVetri : codewithvetri.web.app/
⭐ Firebase : firebase.google.com/
⭐ Tailwind Css: tailwindcss.com/
GitHub Code (give it a star ⭐): 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:
codewithvetri.web.app/
Facebook: / velvetri452
Instagram: @vetrivel_ravi
Linkedin: / 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

[@VetrivelRavi]

Assets : drive.google.com/file/d/1BUGvEZrHcUL8Sl4E_jAcNLcf1CjbJ0r0/view

[@juniorMr]

Thanks

[@kbh2968]

every change in className isnt working what might be the problem?

[@darklord9500]

is this responsive for tab and smartphone or we need to use breakpoints in nativewind?

[@isadoraazevedo5020]

this link is not working 😭

[@adityamondal9052]

Your Assets link doesn't work, please fix it quickly, its very argent....

[@romiean7527]

Great tutorial video, Awaited for more React Native tutorial videos from you 👍

[@MrArod1207]

Great video, thank you for the very detailed description on everything.

[@VetrivelRavi]

Glad it was helpful!

[@bavakesavan4266]

If you don't see some changes when you add a new screen or change the config, run expo start -c. This will clear your cache which may prevent changes from appearing on your expo go app.

[@vincent3542]

sir i really like the way you teaching, im prefer your video as a my firstime react native course in youtube over popular youtuber such as JSM and song sangha sir ❤❤

[@madanmalhotra]

Thanks Ravi, Learn something new. Keep up with good work

[@mehmettahacolak5483]

Thank too much , i watched it , like a cinema . I am waiting to watch another projects .

[@VetrivelRavi]

Working on it

[@chongjenkoay4991]

Thanks ! Great tutorial video.

[@phuct2550]

thank you, the video very detailed description on everything

[@riahiyassine7703]

This is awesome..and hard work thank you very much

[@sunnysingha1154]

Wnt more content like this❤.. waiting for more projects bro

[@PrashantSingh-wx9dm]

Thank you brother, it was really helpful

[@kennedyfreitas7548]

amzing project, going to watch the whole video and code along

[@VetrivelRavi]

Awesome

[@pegahpasha1959]

Many thanks, It was great. I am a beginner in React Native and it helped a lot.

[@VetrivelRavi]

Glad it was helpful!

[@okiroroobrutheanagho8779]

This is great content here. Pls can you do more? Food delivery app with onboarding screen user flow.

[@okonkwo.ify18]

Thanks I learnt a lot.

[@JoseFernandez-gl6gh]

Excellent video, bro!!

[@Anonymous-om7sq]

cool design mate.

[@danishosahan6991]

Great Work Bro

[@sachinthadilshan302]

Great Video 😍

[@nathanburugu433]

I love you man great content much love from Kenya

[@VetrivelRavi]

Thanks man...Love u too

[@txmw4464]

Excellent video found this tutorial really useful for my first project with react native and api's. However, I am noticing that sometimes there are places that get affected by the 'null' property error. Is there any way of fixing this, and sometimes the list would return that it couldn't find any data while switching between hotels, attractions and restaurants. Is there any way of addressing these issues?

[@Mrcalton24]

great work🔥

[@FarazAhmed-rd3if]

Please make more videos like this on React native. 👍

[@VetrivelRavi]

Sure I will

[@duyhung1726]

thank you for video 💕

[@nileshnilu7902]

Amazing👍👍😍😍

[@Saurabhkumar-ps5zp]

Sir 👏 👏 Please make video on code push for react native and deployment of react native

[@bahtitashpaev7285]

thank you very much!!!

[@mandrade]

Excellent :)

[@piyushyadav7764]

This channel is so underrated..i have suggested my friends your very good content...I love your vs code theme!! What it is called?

[@VetrivelRavi]

Ayu Mirage Bro....Thanks for your support

[@developedbypy]

Please make more react native projects

[@ramdevbaba3615]

Hi you are just awesome man make more videos like this and can you make a real time payment website like a gym or food ordering website please 🙏

[@VetrivelRavi]

Sure, Will Do

[@kaushikravikumar7472]

This is a very informative tutorial! I just wanted to point out an issue with your last part where you are dynamically querying the data based on location. It’s actually not working for you correctly because you have used four different use state for each of the coordinates and then you supply them to the useeffect dependency so it’s basically running four times. Instead I would suggest you create one use state object and change it.

[@VetrivelRavi]

Thanks for the info!....Clearly noted

[@JEsterCW]

Or just use reducer xd

[@sdsim1]

thanks! 👍👍👍👍👍

[@fayaadbsa]

Thankkk youuu sirrrrrr

[@sarkaran]

1:37:41 my question is finally this app will be installed in client device, anyway it seems user of this app can somehow find out API key? it's not like nextjs which i can save all sensetive informaiton on the server, can you please explain me about it I really wonder to know more about it

[@arjunarjun27]

Awesome by tamil dude

[@VetrivelRavi]

Nandri nanba

[@iamakashkumarram]

We want more React Native+Tailwind CSS project

[@abdullahzia9779]

at the third last portion, when we have created the item screen a.k.a landing page Im still getting the null is not an object error

[@syed9965]

inside images category , it dont shows like small ,medium while console log the data.It shows only this "images": [Object] so i am not able to render image .but it is available in rapid api result output.kindly give some suggestions

[@codewithroman8180]

Thank soooo much bro

[@VetrivelRavi]

Always welcome

[@cwcfunclock2709]

If you want to prevent loading, you should cache the pictures.

[@sachinpandey7751]

thankyou thankyou so much

[@VetrivelRavi]

You're most welcome

[@melakuzeleke1985]

Is having credit card is mandatory for getting the api

[@realtorBG]

nice

[@kbh2968]

hello in 29:07 when i change the font color it isnt changing any idea wht the problem may be?

[@lamibutel1897]

great tutorial video, I've just got 2 question though. Are any of the tools you use in this require paying. I found some react native expo tutorial but they required firebase to reduce the work because that firebase already provides some premium function and their code seems pretty bare bone cuz they use those functions a lots but I'm just a student trying to create a project and don't have money to pay for those and I don't really need to deploy my project. And secondly, if I want to make log in/ register function should I use firebase for those? Thank u.

[@VetrivelRavi]

Firebase is one of the cloud service provider with storage, cloud functions & cloud database and so on. Firebase is free for certain limit and after that you need to pay as you go. For real time projects I personally prefer to use Firebase its user friendly and having lots of functionalities in it.

[@okonkwo.ify18]

Pls do tab navigation and best it in stack

[@vinu214]

tailwindcss-react-native seems to be deprecated. what can be done in such scenarios?

[@rodrigomollocondomendoza7796]

Awwesome tutorial, I'm so grateful for this, I'm making a project with this template do you know how we can add an authentication and maps directions. Please I could pay you for guide 🥺

[@VetrivelRavi]

I creating videos for those concepts on upcoming videos

[@Nataliarianoo]

Hello friend, thanks for the tutorial, I tell you that in the tailwind configuration I have this error that I always get even if I do it with npm or yarn... Use process(css).then(cb) to work with async plugins... thank you

[@tundeakinola8122]

I get this same issue too but i just decided to use plain old inline styling with CSS... Tho its more frustrating but it gets the job done.. Tell me if u have solved the issue.

[@badoum739]

Super Tuto.... GG from France ! One question 😉 : how add custom font in nativewind ?! Thanks

[@VetrivelRavi]

Check this out : www.nativewind.dev/tailwind/typography/font-family

[@VladmirPutinOrg]

the development server returned response error comes , please help me

[@rachnasoni4913]

Hello when I click this link Sorry, the file you have requested does not exist its show me this message please provide me all images you are using in this project.

[@frostyfreezemovies]

Sir please more projects on RN ❤️

[@VetrivelRavi]

working on it

[@qaisersells]

Hi there, I am following the tutorial, I don't have a macbook I'm using kali linux and I have an android pixel 3 emulator, my question is the circles are not exactly where they are the right green one covers the text above, how can I make it responsive so it looks like yours?.

[@VetrivelRavi]

Well its not aligning properly because of the fixed positions, the best approach is to find the screen dimensions and to use them in the css to align it properly for all the screens

[@SalmanKhan-kd7bj]

Sir please , is ap ko Mern stack ya Next js mai bhi banao

[@oyeSAURABH]

bro I am having difficulty to setup google billing account. Can you please make a complete video about this.

[@AM-nm6ts]

Hi RAvi! hope you are doing well :) what is better react native or fluter?

[@VetrivelRavi]

Thats depends on your area of interest, I personally believe react native is comparatively easy

[@AM-nm6ts]

@@VetrivelRavi thank you :)

[@bernout4341]

flutter

[@footballYO]

did you do it in android studio or some other software?

[@VetrivelRavi]

XCode - For Mac

[@slimyoung3632]

Good job how can I reach you in person

[@abdulhaseebkhan2284]

sir can we write direct options={headerShown: false};

[@kbh2968]

every change in className isnt working what might be the problem?

[@nandani3058]

Sir how we make it responsive like it should look same in different screens

[@VetrivelRavi]

Its already responsive........

[@AnuragMishra-ws4zc]

Sir is this beginner friendly. I know react so I can start this as my first mobile app.

[@VetrivelRavi]

Yes, it is....

[@Game_Slayer_979]

Bruh can u explain how to run the code after installing the source code pla??

[@johnwesley2090]

hi. is it ok to use tailwindcss in react native apps. is it a standard . Could you please advice

[@VetrivelRavi]

Yes, absolutely

[@VetrivelRavi]

Its okey to use modern css framework to increase our build production.......

[@johnwesley2090]

@@VetrivelRavi thank you. can you please advice with a video on displaying images for different screens.

[@Unexality]

Is this possible to add posts by users intoto the app?

[@VetrivelRavi]

Yes it is

[@affanshah6168]

bro can you send me go travel project code , 2 days are left in semester end project plz

[@Aditya-lc5uk]

I tried scanning the qr...it is working but ui is a bit mess....maybe because screen size of my mobile is different :( So how do we deal with this ?

[@VetrivelRavi]

UI will be fine with the different screens, Hope the problem is with the ItemCard I think so, bcz thats the place I fixed the width manually. if we just adjust that according to screen dimensions it should work fine. In that project the place api will not work properly bcz I deleted that API key from my console.

[@Aditya-lc5uk]

@@VetrivelRavi thanks 👍🙏

[@abhaykevat3997]

I want to deve this code in flutter

[@prosungupta1521]

With same tutorial can i built these project on android?

[@VetrivelRavi]

It will work perfectly for both ios and android too

[@Skm-mq1sw]

Please make a online laundry service provider react native application

[@VetrivelRavi]

I will look into it

[@juankilian8531]

I have tried this all works nicely in expo As soon As I generate APK with eas and install it, the app force closes after 2 requests Tested on more than 1 device

[@VetrivelRavi]

Thanks for this update....And I'm sorry, I haven't checked it on any real devices...

[@ramdevbaba3615]

Brother there are too much problems in coming while doing this project first when you add Color red also I did this but its not changing the Color to red and I didn’t get the iOS simulator so what’s is the problem can you please help me out

[@VetrivelRavi]

Tailwindcss sometimes doest work properly so try restarting the server if still the problem persist then please make sure the configurations are correct. For ios simulator you need to install xcode tools in your macbook, for android you need to install android studio software and you need to create android simulator

[@ramdevbaba3615]

@@VetrivelRavi no man I’m using web and I’m restarting but the problem was same so there are any solution

[@bharathganni4745]

@@ramdevbaba3615 Even me getting same error It doent work properly the color red or flex and justifying also dont work Any solutions for this?

[@luxautostop612]

same issue. it doesnt work if i use className, unless i import tailwind AND use style ={} instead of className=""

[@darshmostafa6044]

Hi, In this project can I Book now or no ???

[@VetrivelRavi]

NO

[@usmanmarkaz]

bro plz make an other Ecommerce project in react js using redux toolkit and tailwind css only bro plz because the first one is complex for beginners because you using firebase and redux reducers so bro help us and make an other one plz

[@VetrivelRavi]

Sure I will look into it

[@TamilProgrammer-java]

Bro react eppadi learn pannuneenga . Pls sollunga anna

[@VetrivelRavi]

10 Months aachu bro, Per day 5 hrs, neraiya projects pannunga

[@ramdevbaba3615]

Bro how to use clickevent for clicking go to the next page I’m using on click but nothing happens help me please 🙏🙏🙏🙏😭😭😭😭

[@VetrivelRavi]

Wrap the view with TouchableOpacity and add onPress event

[@ramdevbaba3615]

Ok but is this working in web actually I’m using for web

[@2perspektiva]

Global Expo CLI is already outdated ...

[@noobbeater8421]

ItemCarDontainer 😂😂

[@abdullahzia9779]

I put in hours of work and the app is not responsive at all!!

[@akshasiddiki-zc4uq]

Aaaaa w@aa

[@denverlopes4454]

I'm a chef who's learning to code and @3:07 you attempted to pronounce Cuisine, haha being a chef that was really cute to hear, it's Q-zin. simple! FyI, your coding tutorials are amazing! thank you so much!

[@VetrivelRavi]

😆😆😆.....Still trying to pronounce it properly.....

[@sanskritivyas8226]

Does this Project Works properly ?? Or have some bugs

[@VetrivelRavi]

Work exactly as same as what I am showing in this video

[@arozendojr]

it doesn't run on the ios emulator, open and close the expo inside the emulator, do you know what could it be?