Personal Travel Advisor - Fullstack Hybrid App Dev Course

Learn tailwind css setup for react native with expo, install and initialize tailwind, update babel, and wrap the app in a tailwind provider for streamlined styling.

Learn to install and configure React Native navigation with React Navigation, wrap the app in a navigation container, and create a native stack navigator with home screen setup.

Customize a React Native home screen by managing splash and icon assets, updating app.json, and hiding the header with useNavigation and useLayoutEffect, using a safe area view.

Design a responsive text container by building nested views, aligning elements in a row, and applying padding, margins, and color styles for a centered go travel label with a circle.

load the hero image from the assets folder into a centered view using React Native's image component and its source prop, exporting via assets/index.js for use on the home screen.

Explore animations in React Native with react-native-animatable. Import, wrap components, and apply pulse or fade in/out with configurable duration, easing, and infinite iteration, plus navigation to the next screen.

Craft the discover screen header in a React Native app with a safe area view, a two-text row for discover and beauty today, an avatar, and Google Places search box.

Bind a Google Places API autocomplete to a React Native search box, enable web services, set up billing and API keys, and fetch location data from place details.

activate the travel advisor rapid api to access hotels, restaurants, and attractions, and use latitude and longitude to retrieve nearby restaurants in doha for portfolio use.

Develop a scrollable main menu container for the personal travel advisor app, with hotel, attractions, and restaurant options using a reusable menu container component, images, and state-driven active highlighting.

Customize the main menu item cards by using touchable images and text, updating a lowercase type state on press, and highlighting the active card with a background color.

Build the discover screen main section by creating views, a top tips row with an explore action, and a responsive card grid of location cards with images, names, and locations.

Create a reusable React Native item card container with image source, title, and location, loading data via axios from RapidAPI and implementing loading and no-data states.

Implement an animated loading spinner using React Native's activity indicator on the discover page, conditionally rendering a centered loader during loading and restoring the main content afterward.

Implement a data not found UI component by initializing an empty main data array and conditionally rendering a not-found image and message when no data exists, with API loading planned.

Integrate live travel data with axios, fetch places by type and location, and render results with images and names using useEffect and conditional rendering.

Learn to pass a complete data object from an item card to a new screen using navigation, and retrieve it in the item screen via route params for custom rendering.

Create a responsive image container in React Native using safe area and a scroll view, load an image via Uri, and overlay two navigation icons to the discover screen.

Master the main item image container customization by styling price level and open now indicators. Create a complete item view with title, location, ratings, and a book now button.

Drive live data in a travel app by sending API queries with viewport coordinates (southwest and northeast) from geographic location to fetch restaurants, hotels, and attractions by boundaries.