🔴 NEW SwiftUI Airbnb Clone | iOS 17 | Xcode 15

แชร์
ฝัง
  • เผยแพร่เมื่อ 5 ส.ค. 2024
  • Let's build Airbnb with SwiftUI!
    🔴 SwiftUI Airbnb Pro Course:
    appstuff.teachable.com/p/swiftui-airbnb-pro
    🔴 Become a member to access Exclusive Content & Source Code :
    www.stephancodes.com/plans-pr...
    🔴 Source Code:
    www.stephancodes.com/product-...
    🔴 Swift Fundamentals Bootcamp
    • 🔴 Coding Bootcamp For ...
    🔴 SwiftUI Networking Masterclass
    • Swift Networking Maste...
    🔴Navigation Stacks:
    • This NEW SwiftUI Featu...
    🔴@State vs @Binding video:
    • NEVER Confuse @State v...
    🖥️ ONLINE COURSES & APPS
    👉 Pro Courses:
    www.stephancodes.com/videos
    👉 iOS App Templates:
    www.stephancodes.com/shop
    👉 FREE Twitter SwiftUI Course
    • 🔴 Let's Build Twitter ...
    Chapters
    0:00 - Intro
    1:32 - Project Setup
    04:35 - Explore View UI
    19:42 - Custom Search Bar
    26:34 - Listing Detail View
    49:09 - Listing Detail View Pt. 2
    1:08:40 - Destination Search View
    1:35:54 - Destination Search View Pt. 2
    1:52:05 - Finish UI
    2:08:09 - Listing Data Model
    2:21:00 - Data Model Injection
    2:38:47 - Listing Map View
    2:46:02 - Listing Search By Region
    3:07:08 - Course Wrap Up & Source Code
    Social Media:
    Instagram - @stephan.dowless
    Instagram - @appstuffllc
  • วิทยาศาสตร์และเทคโนโลยี

ความคิดเห็น • 67

  • @bordernflgurus4414
    @bordernflgurus4414 9 หลายเดือนก่อน +9

    Stephan is simply the best. He explains things in a way that makes it understandable even for a noob like me. Thanks Stephan

  • @dxulet
    @dxulet 9 หลายเดือนก่อน +2

    I watched your video in one go. I was in the flow, man, thanks for your video!

  • @user-ic8rm2zf7v
    @user-ic8rm2zf7v 9 หลายเดือนก่อน +1

    Awesome Stephan as always

  • @mEtAlMaNiAc787
    @mEtAlMaNiAc787 9 หลายเดือนก่อน +1

    the goat is back!

  • @chovuse
    @chovuse 6 หลายเดือนก่อน

    Great tutorial ! Got me inspired to try it out. Thank a lot ! 👍

  • @chrisifwax101
    @chrisifwax101 9 หลายเดือนก่อน +1

    Amazing stuff, i love your videos

  • @abdouett3676
    @abdouett3676 9 หลายเดือนก่อน

    Thanks for sharing! The accent color allows to change the navigation link components color without do it manually one by one!! Also, the .contentMargins is the new modifier that allows to add margins to a scrollview.

  • @KivaDang
    @KivaDang 9 หลายเดือนก่อน +1

    Thanks Stephan!

  • @imam_robani
    @imam_robani 8 หลายเดือนก่อน +1

    Simple and easy to understand.
    Thanks, keep going with another video with swiftui.
    next maybe integrate with some api?

  • @sassesidimohamed7444
    @sassesidimohamed7444 4 หลายเดือนก่อน +5

    I spent like an hour trying to get the stepper to work and nothing seemed to fix it until I realized that I paused the video just before you mentioned this issue lol, this video was of great help.THANK YOU

    • @ADITYARAJ-yv2tr
      @ADITYARAJ-yv2tr หลายเดือนก่อน

      same thing happening for me for both datepicker and stepper, i've to long press.
      have you found any solution?

    • @user-nk5mr6ww8s
      @user-nk5mr6ww8s หลายเดือนก่อน

      @@ADITYARAJ-yv2tr VStack(alignment: .leading) {
      if selectedOption == .dates {
      Text("When's your trip?")
      .font(.title2)
      .fontWeight(.semibold)
      VStack {
      DatePicker("From", selection: $startDate, displayedComponents: .date)
      Divider()
      DatePicker("To", selection: $endDate, displayedComponents: .date)
      }
      .foregroundStyle(.gray)
      .font(.subheadline)
      .fontWeight(.semibold)
      } else {
      CollapsedPickerView(title: "When", description: "Add dates")
      .contentShape(Rectangle())
      .onTapGesture {
      withAnimation(.snappy) { selectedOption = .dates }
      }
      }
      }
      .modifier(CollapsibleDestinationViewModifier())
      .frame(height: selectedOption == .dates ? 180 : 64)

      VStack(alignment: .leading) {
      if selectedOption == .guests {
      Text("Who's coming")
      .font(.title2)
      .fontWeight(.semibold)
      Stepper {
      Text("\(numGuests) Adults")
      } onIncrement: {
      numGuests += 1
      } onDecrement: {
      guard numGuests > 0 else {return}
      numGuests -= 1
      }
      } else {
      CollapsedPickerView(title: "Who", description: "Add guests")
      .contentShape(Rectangle())
      .onTapGesture {
      withAnimation(.snappy) { selectedOption = .guests }
      }
      }
      }
      .modifier(CollapsibleDestinationViewModifier())
      .frame(height: selectedOption == .guests ? 120 : 64)

  • @ReddyMediaMarketing
    @ReddyMediaMarketing 2 หลายเดือนก่อน

    Stephan just is a G I bet he’s super chill to hang out with

  • @YoSoyRaulTV
    @YoSoyRaulTV 8 หลายเดือนก่อน

    Really useful

  • @jerip.m9545
    @jerip.m9545 5 หลายเดือนก่อน

    good and clear

  • @imalisonnguyenangel3938
    @imalisonnguyenangel3938 2 หลายเดือนก่อน

    Greetings from Vietnam, Nice to meet you here. You are so excellent.

  • @linglinglin6717
    @linglinglin6717 9 หลายเดือนก่อน

    Great video!
    Question, Does the pro version include how to calculate the total price and fetch data to the cloud database? Thank you!

  • @hugopeyron5949
    @hugopeyron5949 9 หลายเดือนก่อน +1

    Big fan of your work! Would be awesome if you could do Duolingo next time.

  • @nikuzair3178
    @nikuzair3178 28 วันที่ผ่านมา +2

    coming from flutter background, this tutorial helps me alot

    • @wizzyiuu
      @wizzyiuu วันที่ผ่านมา

      I am a flutter dev, trying out SwiftUI. hope this helps🙌🏽🙌🏽

  • @paulo.mendes
    @paulo.mendes 9 หลายเดือนก่อน +1

    nice

  • @ugayashan8659
    @ugayashan8659 9 หลายเดือนก่อน

    Hi Stephan, can you please let me know, if this app is fully responsive on different devices? if not what what measurements should take into consideration.

  • @gizaLook
    @gizaLook 9 หลายเดือนก่อน

    Wooooww Cool

  • @dotnetdevni
    @dotnetdevni 9 หลายเดือนก่อน +12

    Its all well and good people doing good ui but for love of god hook it up to a dummy api shows us all

  • @LDLefebvre
    @LDLefebvre 9 หลายเดือนก่อน

    It would be great to have a video to see how to implement payment method for such a marketplace, there is no video online explaining how to do it

  • @nordicest
    @nordicest 7 หลายเดือนก่อน

    I understand this Pro course does not include creating a listing and no booking process. Just 2 different user types right? And does any of the Pro courses includes Passkeys or Apple authentication?

  • @shuchiabhiruta2703
    @shuchiabhiruta2703 2 หลายเดือนก่อน +1

    Problem : Everything is so sorted with your videos like content and all, but I face one problem text is so small, if I am watching your videos in my tv or iMac text are quite small, need to focus so much. Can we do something for this?? cause zooming in zooming out TH-cam video all time it makes bit time taken each time I need to do back or forward video. :)

  • @parkerrex
    @parkerrex 9 หลายเดือนก่อน +1

    Hell ya

  • @munavarpm5342
    @munavarpm5342 9 หลายเดือนก่อน +2

    Bruhhh what an class bruhhh when we say's thanks it get lighter for this no words bruhhh.✨
    What is the motivation to you share thus course to us free? I'm very glad want to know that✨.

    • @appstuff5778
      @appstuff5778  9 หลายเดือนก่อน +4

      Just trying to give back to community man! iOS development has given me a life I used to dream about. I’m trying to help others accomplish their goals and do the same :)

  • @aleks_lip
    @aleks_lip 9 หลายเดือนก่อน

    Great video! Quick question, at 59:47 you create an overlay. Why not go with toolbar + ToolBarItem instead?

    • @ervin9805
      @ervin9805 6 หลายเดือนก่อน

      crappy that he doesn't respond

  • @Glymaxus
    @Glymaxus 9 หลายเดือนก่อน +1

    Hello and thank you for this sharing !
    In your course do you implement the search with dates ?
    You are not explaining what is new on your website si I can't know and I want to be sure before buying

    • @miguel7986
      @miguel7986 6 หลายเดือนก่อน

      Hello, in case you bought it, could you tell me if the pro version includes api integration? Thanks!

    • @iLoveAppl3947
      @iLoveAppl3947 4 หลายเดือนก่อน

      @@miguel7986 No it doesn't. But he has another tutorial app called Threads. The full version on his website has api integration

  • @JeanBaptisteChabi
    @JeanBaptisteChabi 3 หลายเดือนก่อน

    I've never used swift ui, but it seems too easy 😂

  • @Bandhunt
    @Bandhunt หลายเดือนก่อน

    did you already know that Datepicker inside of a Vstack is bugged ?

  • @pickeld5616
    @pickeld5616 6 หลายเดือนก่อน

    Are you Stephan Dowless in Udemy?

  • @saim4556
    @saim4556 หลายเดือนก่อน

    how can we make call recorder in ios for free there are many call recorder on appstore but they are premium how can i create one for me for free...?

  • @DailysWithOmer
    @DailysWithOmer 9 หลายเดือนก่อน +1

    hi guys did anyone found the issue of the stepper why we have to hard click to inc or dec ? its so annoying to keep hard click to inc it
    btw
    thx a lot Steve for the massive tutorial

    • @appstuff5778
      @appstuff5778  9 หลายเดือนก่อน +1

      Yeah it’s strange that you have to long press. I will look into a solution!

    • @samuelray5425
      @samuelray5425 7 หลายเดือนก่อน +1

      I think that the onTapGesture of the section is interfering with the buttons. I went and moved the on tap gesture to CollapsedPickerView itself instead of the VStack. That way when you're in the expanded state, the onTapGesture for that section is no longer in effect.
      I also was having the same issue with the date picker and this solved that too.

    • @xVinoz
      @xVinoz 7 หลายเดือนก่อน

      @@samuelray5425 That doesnt work cause instead of being able to click in any part of the UI component instead you'll have to click on any of the text's to trigger the tapGesture which is a bad UX.

    • @xVinoz
      @xVinoz 7 หลายเดือนก่อน

      This is an iOS 17.1 bug that needs to be fixed by Apple. A more or less acceptable approach is to use an ‘if’ statement to create any of the components inside a VStack with all the modifiers. However, you will see the transition a little rough when the date component gets deselected. The same goes for the Stepper. Our TapGesture's and the Gesture's of the datepicker and Stepper get overlapped
      if selectedOption == .dates {
      VStack(alignment: .leading){
      Text("When's your trip?")
      VStack {
      DatePicker("From", selection: $startDate, displayedComponents: .date)
      .foregroundStyle(.white)
      Divider()
      DatePicker("To", selection: $endDate, displayedComponents: .date)
      .foregroundStyle(.white)
      }
      }
      .padding()
      .frame(height: selectedOption == .dates ? 180 : 64)
      .foregroundStyle(.white)
      .background(.pink)
      .clipShape(RoundedRectangle(cornerRadius: 12))
      .padding()
      .shadow(radius: 6)
      } else {
      VStack(alignment: .leading){
      CollapsedPickerView(title: "When", description: "Add dates")
      }
      .padding()
      .frame(height: selectedOption == .dates ? 180 : 64)
      .foregroundStyle(.white)
      .background(.pink)
      .clipShape(RoundedRectangle(cornerRadius: 12))
      .padding()
      .shadow(radius: 6)
      .onTapGesture { selectedOption = .dates }
      }

  • @user-tk8gv3om5t
    @user-tk8gv3om5t 9 หลายเดือนก่อน +1

    Can you create a TH-cam Using SwiftUI

  • @techwithchavan4986
    @techwithchavan4986 3 หลายเดือนก่อน

    Could you please do it in UIKit as well

    • @appstuff5778
      @appstuff5778  3 หลายเดือนก่อน

      I am launching a UIKit course this month :)
      It will be covering the basics of UIKit and building a crypto app as the final project

  • @surajsharma3218
    @surajsharma3218 6 หลายเดือนก่อน +1

    What's the architecture we've used in this app ?

  • @sunr8152
    @sunr8152 8 หลายเดือนก่อน

    This is what a newbie would do: *proceed to describe what I would do*
    Thanks for that advice though! :D

  • @magicsaviola
    @magicsaviola 9 หลายเดือนก่อน +1

    Please an Amazon clone 😂 or mercado libre, saludos desde México

  • @90KidMemory
    @90KidMemory 4 หลายเดือนก่อน +1

    date picker not opening on single click because parent stack has tap gesture. Anyone facing this issue. Kindly help me

    • @kostaskoliolios9648
      @kostaskoliolios9648 3 หลายเดือนก่อน

      same here

    • @masterbruculous
      @masterbruculous หลายเดือนก่อน

      I was facing this issue, add this will help:
      DatePicker("From", selection: $startDate, displayedComponents: .date)
      .onTapGesture(count: 99) {}

  • @usmanmarkaz
    @usmanmarkaz 9 หลายเดือนก่อน +1

    Please also make this with React native

  • @lynxcat4life
    @lynxcat4life 18 วันที่ผ่านมา

    you gotta stop breathing into your mic it's driving me CRAZY

    • @appstuff5778
      @appstuff5778  17 วันที่ผ่านมา

      Once I heard myself do it, it drove me crazy too 🤣

  • @yagelProject
    @yagelProject 4 หลายเดือนก่อน

    Hello. Can you please tell me how to make an array? I have a hotel in different cities. I added [String] but now this line is complaining.
    `$0.state.lowercased() == searchLocation.lowercased()`.
    Value of type '[String]' has no member 'lowercased'
    What should I add there ? To make it an array?

  • @yagelProject
    @yagelProject 4 หลายเดือนก่อน

    There are two cities. How do you make a different one for each hotel ?
    let region = MKCoordinateRegion(
    center: listing.city == "Miami" ? .miami : .losAngeles,
    span: MKCoordinateSpan(
    latitudeDelta: 0.1,
    longitudeDelta: 0.1
    )
    )