Building a Deliveroo Food Ordering UI with Ionic

Поделиться
HTML-код
  • Опубликовано: 12 янв 2025

Комментарии • 84

  • @braveitor
    @braveitor 3 года назад +2

    Nice, Simon! You're proving that almost anything can be made in Ionic. And it's also quite fun to watch, as you act very natural, as always. Great job!

    • @galaxies_dev
      @galaxies_dev  3 года назад +1

      Thanks a lot David, yes I try to show what's possible :)

  • @kiranbaradur
    @kiranbaradur 3 года назад +1

    Superb . . UI is great..
    Can you please make a video on vertical swipe videos like in Insta, TikTok..

  • @binodraajdhami
    @binodraajdhami 3 года назад +1

    Love this awesome video, thanks a lot. Please make full functional BackEnd & FrontEnd IONIC Ecommerce App.

  • @mdriyazuddin8126
    @mdriyazuddin8126 3 года назад +3

    Can you make a video about increase app performance?

  • @kd7944
    @kd7944 3 года назад +2

    Awesome content. I followed to the end and this was really helpful.

  • @AndreRds
    @AndreRds 3 года назад +1

    Hey, Master Simon, very good, congratulations, success man...

  • @haniqudsi
    @haniqudsi 3 года назад

    Thank you so much simon,,, I watched alot of your videos, and this one is one of the best I seen before.

  • @duanehodges3146
    @duanehodges3146 3 года назад +1

    The UI Looks great!

  • @FlashTRD
    @FlashTRD 3 года назад +1

    Ionic just too beautiful, thanks for showing us that, p.d: that console log snippet looks very helpful!

  • @vinayprabhakar674
    @vinayprabhakar674 3 года назад +1

    Awesome tutorial brother..More power to you for coming up with such tutorial

  • @ankitguptaa628
    @ankitguptaa628 3 года назад +1

    really enjoying your content buddy!!

  • @edgareldy
    @edgareldy 6 месяцев назад +1

    Great job Simon. I really appreciate that. Anyway, how can i get the foodui api for free. Thanks.

  • @TamFbs
    @TamFbs Год назад +1

    VERY GOOOD!!

  • @hankicarl
    @hankicarl 3 года назад +5

    would love to see a "Build a Apple wallet" tutorial. with the slide up cards from the bottom :)

  • @anthonycifuentesdev
    @anthonycifuentesdev 3 года назад +2

    For category slide I recommend to use 'intersection observer'

  • @abbahanoh4809
    @abbahanoh4809 3 года назад +1

    Thank you Simon. I learned a lot from this video 🙏🏽

  • @TheSssid
    @TheSssid 3 года назад

    hello simon,
    it was superb explained tutorial and first of all thanks for making this tutorial i could this from so long but, i got an error in isPlatform called no exporter when i resolve this i got other error - Value of type 'typeof Platform' is not callable. Did you mean to include 'new'? then after to avoid typescript compilation errors i 'll use the new keyword then i got this- An argument for 'zone' was not provided.How can I solve it? thanks in advance!

  • @robertadjei-laryea63
    @robertadjei-laryea63 3 года назад +13

    Who else liked this before watching?❤️

  • @ousmanefofana4495
    @ousmanefofana4495 2 года назад +1

    Great job

  • @ahmedutuber
    @ahmedutuber 3 года назад

    Hey you! I did what you doing but when click on img meal won't open details page , very confused a course. sorry !!!!!!!!🙄

    • @galaxies_dev
      @galaxies_dev  3 года назад +1

      Check your routing and console, most likely you just the path wrong :)

  • @thafsilrahman9285
    @thafsilrahman9285 3 года назад

    Learned some good stuff from this video Thanks!...😊
    Is there any way to drag an element from a page, And drop it to another page ? 🙄

    • @galaxies_dev
      @galaxies_dev  3 года назад

      How would you drag between pages? Drag & drop on one page definitely works, but how would you build this between different pages?

  • @marvin801
    @marvin801 2 года назад

    thanks for the lecture, anywhere we can get the source code?

    • @galaxies_dev
      @galaxies_dev  2 года назад

      Link to the tutorial is below the video :)

  • @vampirejs758
    @vampirejs758 3 года назад +1

    Can you help me using Native APIs in Capacitor 3 as when I tried it I found the implementation kinda strange as we have to install them separately ... is this the correct implementation? Btw loved your video

    • @galaxies_dev
      @galaxies_dev  3 года назад

      Haven't used v3 a lot yet but yes, that's the new design: The plugins are in their own packages so you don't import everything that you might not need but only install the packages your app really needs!

  • @DidierHernandez
    @DidierHernandez 3 года назад

    Great Videos!
    About the basic infrastructure for this kind of App, how long time its can takes loading the data from DB and whats kinda of DB in the back office do you recommend?

    • @galaxies_dev
      @galaxies_dev  3 года назад

      You could use basically anything, your own API, Firebase, Supabase.. all would work great!

    • @DidierHernandez
      @DidierHernandez 3 года назад

      @@galaxies_dev Great Simon! Thanks for the tutorial!

  • @Vinodkumar-ym3kz
    @Vinodkumar-ym3kz 3 года назад +1

    Awesome...learnt a lot

  • @abdullahrehan8632
    @abdullahrehan8632 3 года назад

    Hye simon can you make tutorial on how to export teachable machine sound model in to our ionic app

    • @abdullahrehan8632
      @abdullahrehan8632 3 года назад

      i am working on the app in which user claps and the flashlight of the mobile turns on and claps again to turn off

  • @MonsterSpock
    @MonsterSpock Год назад

    Ion-slider is no longer supported is it possible that you update this video with that change?

    • @galaxies_dev
      @galaxies_dev  Год назад +1

      Working on a video to cover the Swiper changes!

    • @MonsterSpock
      @MonsterSpock Год назад

      @@galaxies_dev nice thank you

  • @lab9366
    @lab9366 3 года назад

    what is the syntax if my json is a local file and not a url? Thank you

    • @galaxies_dev
      @galaxies_dev  3 года назад

      You could still use it the http.get() or directly import it at the top of your file like modules!

  • @tidabharadwaj
    @tidabharadwaj 3 года назад

    hi Simon awesome vid, and ty for the content, can you please as well post the github code? if possible

    • @galaxies_dev
      @galaxies_dev  3 года назад

      It's not yet on Github but all code is inside the linked blog post below the video!

  • @asmaarashad324
    @asmaarashad324 2 года назад

    Why --padding-top works but -padding-top(With only one dash) does not work , could you tell me the difference between them please!

    • @galaxies_dev
      @galaxies_dev  2 года назад

      --padding-top is a CSS variable defined by Ionic, and when you overwrite it the new value is used!

  • @MarcoSync
    @MarcoSync 3 года назад +1

    Awesome! ✨

  • @emreaka3965
    @emreaka3965 2 года назад +1

    Awesome!

  • @magnusbrzenk447
    @magnusbrzenk447 3 года назад

    Can u do a video please on how to get ionic to hide the url bar on scroll in browsers on mobile?

    • @galaxies_dev
      @galaxies_dev  3 года назад

      I think that's an open issue on Github so I can't easily create a tutorial around it as it's not fixed :/

    • @magnusbrzenk447
      @magnusbrzenk447 3 года назад

      @@galaxies_dev and is there no workaround in the meantime?

  • @Trbz1000
    @Trbz1000 Год назад

    Sick!!

  • @Yaiko
    @Yaiko 3 года назад

    how do you test the app in your iphone in realtime?

    • @galaxies_dev
      @galaxies_dev  3 года назад

      The command I usually run is: "ionic cap run ios --livereload --external --source-map=false" and then deploy it once through Xcode to the device!

  • @bouraouinizar8880
    @bouraouinizar8880 3 года назад

    hello how can i change SlidesPerview on screen rotation

    • @galaxies_dev
      @galaxies_dev  3 года назад

      You can subscribe to changes of the ScreenOrientation (using a plugin) and then update the Swiper config and call the update() function for it to reload the data!

  • @LimitlessMinds
    @LimitlessMinds 3 года назад +1

    You rock!

  • @vampirejs758
    @vampirejs758 3 года назад +2

    Why dont you deploy all these apps made in built with ionic to netlify so that we can preview it live

    • @galaxies_dev
      @galaxies_dev  3 года назад +1

      Yeah might do this in the future when I got time for it, already had the idea in the past as well!

  • @rajeshsivaji5146
    @rajeshsivaji5146 3 года назад +1

    Do more videos

  • @msnp1
    @msnp1 3 года назад

    how we can get that emulator?

    • @galaxies_dev
      @galaxies_dev  3 года назад

      The one was inside Chrome, the other was my real iPhone mirrored to my screen!

  • @aleksbond
    @aleksbond 3 года назад

    Why uses --pading-top in scss not padding-top

    • @galaxies_dev
      @galaxies_dev  3 года назад +1

      Can't exactly remember the location but usually that means we need to overwrite an Ionic CSS variable for a component!

  • @childtalentvlogs
    @childtalentvlogs Год назад

    share the code please

  • @jefrysanchez3219
    @jefrysanchez3219 3 года назад

    'sticky-row' it doesn't work on android

  • @fitrifx
    @fitrifx 3 года назад +2

    "Ah, lets not talk about it today XD"

  • @jorgeribeiro6307
    @jorgeribeiro6307 3 года назад

    23:25 thats what she said

  • @luismeza6015
    @luismeza6015 2 года назад

    Bro my scrollTop doesn't work!

  • @kingmega8730
    @kingmega8730 3 года назад

    Ionic connection with mysql explain

  • @hovanmay740
    @hovanmay740 2 года назад

    give me src please!

  • @luanantunes2388
    @luanantunes2388 3 года назад

    Helo! I am new to this area and I am doing a job in which it uses ionic + angular with firestore but in my case my problem is in question that I am creating an (IF) in which it checks which page when the user is logging in with it it should be directed to user page or administrator but it is not working, I wanted to know what is wrong! thanks!
    await this.afAuth.signInWithEmailAndPassword(user.email, user.password)
    .then(data => {
    console.log(data);
    const tp = this.firestore
    .collection(`users/tipo`).doc(data.user.uid)
    .get()
    .subscribe(data => {
    this.users = [data]});
    if(tp == "usuario"){
    this.navCtrl.navigateRoot("home");
    }else{
    this.navCtrl.navigateRoot("admin");
    }