Companies Home Search Profile

React Native Tutorial | Travel App

Focused View

Dastagir Ahmed

8:01:33

35 View
  • 1. Introduction.mp4
    04:36
  • 1. Running the app for the first time.mp4
    03:12
  • 2. Importing fonts.mp4
    03:03
  • 3.1 0001 - 0004 Importing and testing custom fonts.zip
  • 3. Importin and testing imported fonts.mp4
    03:54
  • 1. Setting up navigation.mp4
    08:12
  • 2. Slides List.mp4
    04:50
  • 3. Onboarding FlatList.mp4
    05:26
  • 4. Creating onboarding Slides Component.mp4
    04:09
  • 5. Creating Image style Object.mp4
    03:52
  • 6. Image styling.mp4
    02:38
  • 7. Stack (putting components on top of ech other).mp4
    05:15
  • 8. Reusable Text Component.mp4
    05:32
  • 9. Hooking Reusable Text Componet to a parent component.mp4
    03:19
  • 10. Using Reusable text and Creating Reusable Button.mp4
    10:28
  • 11. Hooking reusable button to the parent component.mp4
    05:06
  • 12.1 0005 - 0016 Onboarding Screen.zip
  • 12. Creating HeightSpaceer and WidthSpacer Components.mp4
    03:55
  • 1. How to manipulate reusable button properties.mp4
    02:04
  • 2. Setting up navigation for a child component.mp4
    04:34
  • 3. Tab Navigation and Screens.mp4
    04:56
  • 4. Tab Screen Option and Components.mp4
    07:26
  • 5.1 0017- 0021 Bottom Tab Navigation.zip
  • 5. Attaching Bottom Tab to Stack Container and Testing.mp4
    07:18
  • 1. Rows and Columns.mp4
    07:21
  • 2. Row style as a function.mp4
    01:28
  • 3. Search IconButton.mp4
    03:38
  • 4. Adding style to the IconButton.mp4
    03:25
  • 5. Creating the Search Page and hooking it up to navigation stack.mp4
    02:43
  • 6.1 0022 - 0027 Home Page.zip
  • 6. Running the app and coorecting the errrors.mp4
    01:25
  • 1. Places Heading.mp4
    03:24
  • 2. Virtualized List.mp4
    08:00
  • 3. Creating a Country Tile.mp4
    04:13
  • 4. Country tile text and passing data from tre virtualized List.mp4
    04:44
  • 5. Creating NetworkImage Component.mp4
    06:45
  • 6. Hooking Country Tile to the virtualized List.mp4
    05:22
  • 7.1 0022- 0034. Places Complete UI.zip
  • 7. Passing data to the next page using params and retrieving the data-.mp4
    06:59
  • 1. Recommendations Heading.mp4
    12:28
  • 2. Recommendation FlatList.mp4
    06:07
  • 3. ReusableTile Part 1.mp4
    14:12
  • 4.1 0035 - 0038 BestHotels Heading.zip
  • 4. ReusableTile Part 2.mp4.mp4
    07:51
  • 1. Hooking Recommendations to Home Screen.mp4
    04:01
  • 2. Place Detailes navigation and passing data to anothere page usig use Route.mp4
    04:50
  • 3. Nearby Hotels Heading.mp4
    03:48
  • 4. Nearby Hotels Flatlist Part 1.mp4
    03:26
  • 5. Nearby Hotels Part 2.mp4
    07:51
  • 6. Hotel Card.mp4
    13:14
  • 7. Setting Navigation to Hotel Details Screen.mp4
    02:27
  • 8. 0046. Warning Rectification-.mp4
    06:40
  • 9. Reusable AppBar.mp4
    13:35
  • 10. Recommendation List.mp4
    09:55
  • 11. Hotel List.mp4
    06:53
  • 12. County Details Page Setup.mp4
    04:03
  • 13. Hooking up the AppBar.mp4.mp4
    02:57
  • 14. Description Text Component.mp4
    07:11
  • 15. Popular Destinations Heading.mp4
    05:23
  • 16. Find Hotels Button-.mp4
    03:12
  • 17. Popular List.mp4
    09:33
  • 18. Running the app and rectifying the errors.mp4
    08:12
  • 19.1 0050 - 0057ountry Details and Places Details Screen.zip
  • 19. Places Details Page.mp4
    07:29
  • 1. HotelDetails AppBar and styles.mp4
    03:56
  • 2. Hooking an overlay component to the image.mp4
    05:32
  • 3. Title Column.mp4
    07:06
  • 4. Rating and Review row.mp4
    04:01
  • 5. Description Text.mp4
    06:39
  • 6.1 0058 - 0063.zip
  • 6. Hotel Map.mp4
    07:55
  • 7. Data changes.mp4
    04:53
  • 8. Review FlaList.mp4
    09:11
  • 9.1 0058 - 0066.zip
  • 9. Reveiw Tile.mp4
    15:55
  • 10. Hotel Details Bottom Bar.mp4
    10:40
  • 1. Search Page.mp4
    03:32
  • 2. SearchContainer style and search Text Input.mp4
    06:15
  • 3. Search Button.mp4
    05:04
  • 4. Empty Search Component.mp4
    07:53
  • 5.1 0068 - 0072 search full ui.zip
  • 5. Search Flatlist and Search Tile.mp4
    06:52
  • 6. Hotel Search Part 1.mp4
    05:58
  • 7. Hotel Search Part 2.mp4
    04:51
  • 8.1 0073 - 0075 Hotel Search and Location Page.zip
  • 8. Locations Screen.mp4
    04:59
  • 1. Profile TopTab.mp4
    06:44
  • 2. TopBar App Bar and Image.mp4
    06:05
  • 3. Profile Image.mp4
    04:21
  • 4. Profile info.mp4
    06:23
  • 5. TopBookings.mp4
    08:18
  • 1. Here you will complete code.html
  • Description


    From Beginners to Advanced

    What You'll Learn?


    • React Native tutorial for beginners
    • From beginners to advanced
    • This is a complete app with backend api which covers a travel app
    • If you want to improve your restful api building skill with Nodejs

    Who is this for?


  • For beginners to advanced
  • What You Need to Know?


  • A bit of react native knowledge would help a lot
  • More details


    Description

    Welcome to our cutting-edge travel app, a comprehensive solution that seamlessly blends React Native with the latest Expo version (49.0.6) and a robust NodeJS Express REST API. Our app delivers an unparalleled user experience by harnessing the power of native design on both Android and iOS platforms.


    Crafted with meticulous attention to detail, our app's design philosophy revolves around achieving the highest degree of component re-usability. This not only ensures consistent performance but also grants the flexibility to adapt components to varying page layouts and designs. To provide a glimpse into our progress, we're excited to offer an app file for users to explore the current feature set.


    Technical Features:

    1. Importing Custom Fonts:

    Effortlessly enhance the visual appeal of your app by importing and utilizing custom fonts to achieve a unique and engaging design.


    2. Navigation with React Navigation:

    Leverage the power of React Navigation to implement smooth and intuitive app navigation, ensuring seamless transitions between screens.


    3. BottomTabNavigation and Related Navigation:

    Utilize BottomTabNavigation to create a user-friendly bottom navigation bar, making core features easily accessible and enhancing user experience.


    4. TopTabNavigation and Related Navigation:

    Implement TopTabNavigation to organize content efficiently, allowing users to swipe between sections and access related information seamlessly.


    5. Utilizing Axios for API Calls with Headers:

    Efficiently interact with APIs using Axios, employing headers for secure communication, and performing non-header calls for versatile data retrieval.


    6. Creating Styles as Functions:

    Enhance code maintainability and reusability by creating styles as functions, making it easier to manage and apply consistent styling across components.


    7. Combining Styles from Different Files:

    Achieve a modular approach to styling by combining styles from various files within the same component, ensuring flexibility and cohesion.


    8. Form Validation with Yup and Formik:

    Implement robust form validation using Yup and Formik libraries, providing users with a smooth input experience and reducing errors.


    9. Utilizing Expo Location for User's Current Location:

    Tap into Expo Location to effortlessly access a user's current location, enabling location-based features and personalized content.


    10. Reactive Rating with Stock Star Rating:

    Engage users with interactive rating systems using libraries like Stock Star Rating, providing a dynamic way for them to share their opinions.


    11. Splash Screen using a FlatList:

    Create an engaging splash screen using a FlatList, offering an innovative and visually appealing way to introduce users to your app's content.


    12. Local Data Storage with Async Storage:

    Enhance user experience by locally storing data with Async Storage, ensuring smooth app performance and reducing reliance on network requests.


    Backend:


    13. Secure Password Handling with Bcrypt:

    Implement Bcrypt to encrypt and decrypt passwords, ensuring the highest level of security for user information.


    14. User Data Protection with Jsonwebtoken:

    Utilize Jsonwebtoken to safeguard user information during authentication and authorization processes, enhancing data security.


    15. Designing Mongo Schemas:

    Craft well-structured Mongo Schemas to efficiently model your data, ensuring optimal database performance and organized data storage.


    16. Creating Routes and Middleware:

    Organize your backend by creating routes and middleware, enhancing code maintainability and implementing essential functionality.


    17. Protecting Routes with Middleware:

    Enforce security by protecting routes using middleware, ensuring that only authorized users can access sensitive sections of your app.


    18. Efficient Mongo Queries:

    Explore various techniques to create efficient MongoDB queries, optimizing data retrieval and enhancing app responsiveness.


    19. Data Population for Complex Schemas:

    Effortlessly populate first-level and second-level fields in your database schema, streamlining data access for complex relationships.


    20. Data Inclusion and Exclusion with Database Queries:

    Craft precise database queries to include or exclude specific data fields, tailoring the information retrieved to match your app's requirements.


    21. Optimizing Search with Mongo Indices:

    Enhance search performance by utilizing Mongo indices, enabling quick data retrieval and improved user experience.


    These technical features collectively contribute to the robustness, functionality, and security of our app, ensuring a smooth and delightful experience for users.


    App Current Features:

    1. Time-Adaptive Greetings: Experience a warm welcome that changes based on the time of day.

    2. Top Navigation Bar: Seamlessly navigate and access key features through an intuitive top navigation bar.

    3. Floating Bottom Tab Navigation: Enjoy dual navigation systems for enhanced usability.

    4. Secure Authentication: Access the app securely with JSON Web Tokens, ensuring trustworthiness.

    5. Custom Loaders: Delight in smooth transitions with custom loaders during loading periods.

    6. Interactive Maps: Discover places with the integrated Google Maps feature.

    7. Location Services: Effortlessly retrieve user locations to enhance the app's functionality.

    8. Dynamic Data Rendering: Access backend data and elegantly render it within the app.

    9. Dual Search Functionality: Conveniently search for both places and hotels with two distinct options.

    10. Tailored Recommendations: Receive personalized suggestions on the home screen and a comprehensive list.

    11. Proximity-Based Suggestions: Find nearby hotels based on user location and preferences.

    12. Loading Shimmer: Enhance user experience with loading shimmers, particularly on the home page.

    13. Effortless Logout: Seamlessly log out when needed.

    14. Flexible Payment Options: Choose from a variety of payment methods that suit your preferences.

    15. User Reviews: Share your experiences by adding reviews.

    Who this course is for:

    • For beginners to advanced

    User Reviews
    Rating
    0
    0
    0
    0
    0
    average 0
    Total votes0
    Focused display
    Dastagir Ahmed
    Dastagir Ahmed
    Instructor's Courses
    I am Flutter and React Native course creator. I have over 90k followers on Youtube.As you follow me, you will be learning new Framework like Flutter and React Native and sharpen your programming skills.I started my programming journey in the university and then went to Intel corporation working with graphics card programmer.I am very good explaining stuffs and been programming for the last 12 years.
    Students take courses primarily to improve job-related skills.Some courses generate credit toward technical certification. Udemy has made a special effort to attract corporate trainers seeking to create coursework for employees of their company.
    • language english
    • Training sessions 80
    • duration 8:01:33
    • Release Date 2023/10/28