🔴 Coffee App UI - React Native Tutorial

แชร์
ฝัง
  • เผยแพร่เมื่อ 1 ก.พ. 2025

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

  • @codewithnomi
    @codewithnomi  ปีที่แล้ว +4

    More cool react native projects: 👇
    🔴Food Recipe App with Reanimated : th-cam.com/video/cdnneQjsoT0/w-d-xo.html
    🔴AI Voice Assistant with ChatGPT & DALL-E : th-cam.com/video/nf3t5p2a5Dg/w-d-xo.html
    🔴Build Movie App : th-cam.com/video/Q1xQuCpYIFE/w-d-xo.html
    🔴Build Weather App : th-cam.com/video/953vyZMO4cM/w-d-xo.html
    🔴Build Food Delivery App : th-cam.com/video/v-zxqkz1T8E/w-d-xo.html
    🔴TH-cam Clone App: th-cam.com/video/AVovt3gFmsg/w-d-xo.html
    🔴Login | SignUp UI : th-cam.com/video/RhF4iUCiwSs/w-d-xo.html
    🔴Fast Food App : th-cam.com/video/x5hX06YdRvI/w-d-xo.html
    🔴App Store UI : th-cam.com/video/Wp6JtHj4lyM/w-d-xo.html
    🔴Fruit Shop UI : th-cam.com/video/UwW__s37agw/w-d-xo.html

    • @IsaacObeng-cv5by
      @IsaacObeng-cv5by ปีที่แล้ว

      Nice interface can you help me with the firebase version of this

  • @mateimarian2630
    @mateimarian2630 ปีที่แล้ว +1

    This channel is underrated. You have really cool projects

  • @mobinakhter7081
    @mobinakhter7081 ปีที่แล้ว +7

    This looks like an amazing build. Will follow along this video. 1 recommendation, pls start from the beginning, how you setup the project (what commands were used). You can fast forward to when all the node modules have been installed, but the initial command is important for us to follow along more easily.
    Thanks for the video!

    • @codewithnomi
      @codewithnomi  ปีที่แล้ว +3

      really appreciate the feedback, I will keep that in mind next time. By the way you can check the project source code on github repo.

    • @dan-carlton
      @dan-carlton ปีที่แล้ว

      @@codewithnomi I am having trouble beginning the project to follow along with the video. I checked the source code but it is still hard to find which packages were installed

    • @codewithnomi
      @codewithnomi  ปีที่แล้ว +1

      you can always find them in package.json

    • @aldairlgd
      @aldairlgd ปีที่แล้ว

      Hey, did you use a template? There’s already a folder structure, so I have this doubt.

    • @funnyvideos-mv5ec
      @funnyvideos-mv5ec 5 หลายเดือนก่อน

      @@codewithnomi i couldn't found it on github please can u send me link?

  • @annunziatakinya
    @annunziatakinya ปีที่แล้ว +1

    I love love the UI design!

  • @dan-carlton
    @dan-carlton ปีที่แล้ว +1

    this video has no reason to have music that bumps this hard but I am very glad it did lol also content was great thanks so much!

    • @codewithnomi
      @codewithnomi  ปีที่แล้ว

      I regret adding music to this video 🥲, should've added voice over.

  • @workspace2368
    @workspace2368 ปีที่แล้ว

    Beautiful build. Thank you Nomi

  • @bmhyakiri
    @bmhyakiri ปีที่แล้ว +3

    I really love SwiftUI but hate Xcode. I use React for work so I'm tempted to just make the switch purely because Xcode is so painful. This app looks great and might have convinced me to try it out.

  • @aneesijaz
    @aneesijaz ปีที่แล้ว

    Love it. keep it coming. 🔥🔥🔥🔥

  • @AbdulRehman-go4hp
    @AbdulRehman-go4hp ปีที่แล้ว +2

    Excellent Job

  • @Richard-mh4pr
    @Richard-mh4pr ปีที่แล้ว +1

    I encountered a problem when starting the project. How should I start your source code correctly? What package managers do I need to install?

    • @codewithnomi
      @codewithnomi  ปีที่แล้ว

      you can find the GitHub repo link for this project in the video description.
      check out the package.json file for all the libraries
      check out this video as well : th-cam.com/video/_Z33DTn0ZFo/w-d-xo.html

  • @ricichien
    @ricichien ปีที่แล้ว +2

    Is the carousel lib outdated? I have installed it and it shows a lot of "ViewPropTypes will be removed from React Native, along with all other PropTypes. We recommend that you migrate away from PropTypes and switch to a type system like TypeScript. If you need to continue using ViewPropTypes, migrate to the 'deprecated-react-native-prop-types' package." I have installed all the latest pack and still shows this, really annoying, please help me :(

    • @codewithnomi
      @codewithnomi  ปีที่แล้ว +5

      yes, the snap carousel has an issue but don't worry, install this version:
      npm i --save react-native-snap-carousel@4.0.0-beta.6
      this will hopefully fix the issue, let me know if it did ;)

    • @ricichien
      @ricichien ปีที่แล้ว +1

      @@codewithnomi It did! Thanks!!!

  • @FarazAhmed-rd3if
    @FarazAhmed-rd3if ปีที่แล้ว +1

    Good, but please add your Voice because it helps us understand better.

    • @codewithnomi
      @codewithnomi  ปีที่แล้ว

      yeah I'm going to add voice to next videos 😊

  • @hojatghasemi8628
    @hojatghasemi8628 ปีที่แล้ว

    Thanks a lot for your mazing content; you're the best ❤‍🔥
    If it's ok, can you please do a few React Native tutorials with TypeScript as well?
    Thanks man

  • @杨崲轸-s1f
    @杨崲轸-s1f ปีที่แล้ว +3

    I'm a developer, and I want to know how to learn to design beautiful ui without any prior design experience

    • @codewithnomi
      @codewithnomi  ปีที่แล้ว +1

      learn css, create any design you like, practice

  • @dan-carlton
    @dan-carlton ปีที่แล้ว +1

    could you tell us how you set up the environment. would love to follow along but not sure how

    • @codewithnomi
      @codewithnomi  ปีที่แล้ว +1

      sure, will do in the next video 😉

    • @codewithnomi
      @codewithnomi  ปีที่แล้ว +1

      th-cam.com/video/_Z33DTn0ZFo/w-d-xo.html

  • @mohamedwalied4068
    @mohamedwalied4068 ปีที่แล้ว

    I get some problems with the tailwind. Can you make a video on how to install the tailwind for react native app
    ?

    • @codewithnomi
      @codewithnomi  ปีที่แล้ว

      th-cam.com/video/YACtCjNy6Cg/w-d-xo.html

    • @mohamedwalied4068
      @mohamedwalied4068 ปีที่แล้ว

      @@codewithnomi when i run it in android device i get some problem can you help me ?

    • @codewithnomi
      @codewithnomi  ปีที่แล้ว

      I'll soon create another video on adding tailwind to react native app

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

    whenever I do things like minus icon plus icon shopping bag icon there is always this problem like RNSVG not found in the ui manager can you please help in this case?

  • @kimtoshi_444
    @kimtoshi_444 ปีที่แล้ว

    Better if you explain following code that what's going on rather annoying music.
    However great effort and beautiful ui❤️❤️

    • @codewithnomi
      @codewithnomi  ปีที่แล้ว +2

      Thanks for the feedback, I'll try explaining next time 😉

    • @geoffreybluejack3022
      @geoffreybluejack3022 ปีที่แล้ว

      ​@@codewithnomiThe music was great, lovely tutorial 👍

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

    Goat

  • @mohamedwalied4068
    @mohamedwalied4068 ปีที่แล้ว

    When I ran your project on an Android device, I found that the image of the coffee in the card on the home page does not appear completely. Can you help me?

    • @codewithnomi
      @codewithnomi  ปีที่แล้ว

      really sorry about that, this app is not responsive across all devices, I will make a video in future on how to make this responsive

  • @moonsujung2349
    @moonsujung2349 ปีที่แล้ว

    Is there a management screen for the ordering app?

    • @codewithnomi
      @codewithnomi  ปีที่แล้ว

      No, it's just the homepage and the coffee page UI

  • @mobinakhter7081
    @mobinakhter7081 ปีที่แล้ว

    Also, please have the simulator take a little bit less space on the screen, so that the code becomes more readable for us.

  • @HaseebMughal-t2h
    @HaseebMughal-t2h 3 หลายเดือนก่อน

    no specific link for this constants files that u have used in this project...

  • @minhphamuc7786
    @minhphamuc7786 ปีที่แล้ว

    i have a problem when i install taiwindcss. That is "Use process(css).then(cb) to work with async plugins". How to i fix it :((

    • @solomonchigozie3067
      @solomonchigozie3067 ปีที่แล้ว

      i fixed it by downgrading the tailwindcss using the command => npm i --dev tailwindcss@3.3.2

  • @johnmichaelcanero2210
    @johnmichaelcanero2210 ปีที่แล้ว

    How did you install Tailwind CSS in React Native and Expo?

    • @codewithnomi
      @codewithnomi  ปีที่แล้ว

      th-cam.com/video/TnwtcsPEjXM/w-d-xo.html

  • @FM-bv7bs
    @FM-bv7bs ปีที่แล้ว +1

    This project is not work on my windos i think becoss you,r using mac what i have to do to starting this project on windos

    • @codewithnomi
      @codewithnomi  ปีที่แล้ว

      it works fine on android.
      make sure you properly setup your environment.

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

      @@codewithnomi i have windows laptop, and just got the entire source code. But it says the files aren't supported. I've searched on internet about it, but there's no easy way to turn masOS code to Windows. Plus, I'm not familiar with MacOS coding anyways, have always used windows, so I'm not sure what dependencies or libraries to take care of. Is there a way out of this?

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

      @@sohaasif1385 its cross platform app, runs on both ios and android, follow the installation.txt instructions

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

      Made an other comment, guess it got deleted

  • @anakinsk1walker
    @anakinsk1walker ปีที่แล้ว

    When I try to integrate the carousel I have the error 'Cannot read property 'array' of undefined' does anyone have a solution ?

  • @danvilela
    @danvilela ปีที่แล้ว

    Wait. Is that tailwind??? I thought react native was only css in js

    • @codewithnomi
      @codewithnomi  ปีที่แล้ว

      yes it's tailwind css

    • @danvilela
      @danvilela ปีที่แล้ว

      @@codewithnomi well now i can use RN then. Is there some special config?

    • @codewithnomi
      @codewithnomi  ปีที่แล้ว

      @@danvilela th-cam.com/video/_Z33DTn0ZFo/w-d-xo.html

  • @bonjvv
    @bonjvv ปีที่แล้ว

    how to activate the search?

  • @usmanmarkaz
    @usmanmarkaz ปีที่แล้ว

  • @usmanmarkaz
    @usmanmarkaz ปีที่แล้ว

    i complete this UI now i have a request plz add redux toolkit for Cart system and add some more products plz. thanks

    • @codewithnomi
      @codewithnomi  ปีที่แล้ว

      learn redux toolkit 👇
      th-cam.com/video/W78Jl55Mkl0/w-d-xo.html

  • @romeorel1679
    @romeorel1679 ปีที่แล้ว

    Like the aesthetic of the app.
    Thanks for keeping it short. 30-45 min tutorial are the best to learn. It's unbearable to follow along with a video tutorial of 1h +

  • @diegosalas33
    @diegosalas33 ปีที่แล้ว

    Tutorial eccomecer

  • @ManpreetSingh-l9t1j
    @ManpreetSingh-l9t1j ปีที่แล้ว

    @Code With Nomi
    Much better if you speak. how to create app.

    • @codewithnomi
      @codewithnomi  ปีที่แล้ว

      I did in later videos 😉

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

    mds cara vc é inutil nem libera as imagens

  • @bengisuar4561
    @bengisuar4561 ปีที่แล้ว

    can I do this project on my android emulator, is there any difference that I should take into consideration? @codewithnaomi

    • @codewithnomi
      @codewithnomi  ปีที่แล้ว

      There may be some issues with the shadow property but overall I think it should run just fine.

    • @bengisuar4561
      @bengisuar4561 ปีที่แล้ว +1

      @@codewithnomi okey, I love your tutorials if there anything that cannot solve I'll write tysm

  • @sabirsayyad6459
    @sabirsayyad6459 ปีที่แล้ว

    Nice one
    May i have your email id to connect
    I need to built some app