Transforming a Design into a Fully Responsive App in an Hour

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

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

  • @konidoniravirr6580
    @konidoniravirr6580 Год назад +16

    A perfect channel to learn with clean editing, perfect teaching and versatility.

  • @chrismarks7495
    @chrismarks7495 Год назад +33

    Efficiency now just went through the roof, great tech for a scratch project. It would be greatly appreciated if you could create a video showcasing the development process of the React Native app. Your dedication and hard work are truly commendable. Keep up the amazing job!

  • @iamtrueprins
    @iamtrueprins Год назад +2

    Your intros are the best on RUclips. Thanks for them!

  • @KhalidKhan-wo7xg
    @KhalidKhan-wo7xg Год назад +10

    I was also nominated for next ebook. Thanks for that sir. I love your community.😗😗

  • @richardmasters2045
    @richardmasters2045 Год назад +8

    Another Masterpiece by the Master, thank you for your dedication and consistency. You are changing peoples lives all over the world!

  • @ANSHU61936
    @ANSHU61936 Год назад +2

    Many people don't appreciate how this can boost web development process by alot, thanks for this awesome tutorial

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

      It seems much slower, more cumbersome and inefficient than writing the code in the editor.

  • @lokeshart3340
    @lokeshart3340 Год назад +14

    Finnally a new video...
    Your work is just amazing brother
    And you are extemely talented
    Love from India ❤

  • @saqibkhanz8417
    @saqibkhanz8417 Год назад +2

    13 days have gone by, and I was wondering why you haven't uploaded the video yet. But it's finally here!

  • @billysomers-pg
    @billysomers-pg Год назад +2

    Thanks Adrian. Just finished my design in Figma and was looking for an AI tool. Skipped past Locofy a few times but thanks to you, I came back. Right in the nick of time.

  • @aloksrivastva4142
    @aloksrivastva4142 Год назад +8

    Can you make a video on " AI powered full stack development "
    It will be really beneficial to everyone and make us more efficient.
    Please do consider my suggestion

  • @guhaprasaanthnandagopal8486
    @guhaprasaanthnandagopal8486 Год назад +3

    Great Video Adrian, loved it. I really love your coursework, and really to say the truth, your video on creating a Covid Chart using ReactJS, back in 2020, was what that kick-started my life into the world of React -> NextJS and GatsbyJS.
    I am so eagerly waiting for your uploads on Remix, Astro or even possibly converting a React Monolith to MFEs using frameworks like Lerna, or TurboRepo or Single SPA.
    I know this is too much, and as I could not find any concrete videos on MFE(with React 18), I anticipate your videos.

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

    My mentor and teacher has dropped another video , gosh how can I ever repay you ☺️

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

    man you are a legend on youtube keep the good work

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

    mind blowing lessons, i can't wait to try all the apps from your channel after this one🤯🤯🤯

  • @a-factoracademy
    @a-factoracademy Год назад +1

    Adrian, I must confess you blew up my mind with your efficiency. Please I don't mean to insult you? But, are you human or a robot? Mehnnn, I'm dazzled! Perfect content back to back and here I am with absolutely no direction since...

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

    The best in the World. 😍
    Thank you JSM 😍🥰🥰

  • @DhaneshProgrammer
    @DhaneshProgrammer Год назад +2

    Thanks for considering my request. I'm excited for your tutorial on creating a clothing website with user functionality, Next.js, MongoDB, and Razorpay testing mode. Your expertise will greatly contribute to the growth of others. Thank you!

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

    Three people I like in Croatia they are Mirko Cro Cop (MMA fighter) , Antonio and Adrian. Nice vid as always

  • @mohdarish4195
    @mohdarish4195 Год назад +2

    Love from India , your content is Amazing 😊

  • @shreejairaj
    @shreejairaj 7 месяцев назад +1

    Hi, the figma file you shared doesn't have the second page in it as shown in the video, could you please update this. Love your work! Thanks

  • @yugal8627
    @yugal8627 Год назад +5

    Great video, it looks so easy to do development after watching all your videos. Please also consider making a Figma design tutorial..🙏🏻🙏🏻🙏🏻 and keep it up sir.

  • @ilnon1
    @ilnon1 Год назад +4

    Thanks for yet another amazing video man. I honestly don’t know how you can come up and create such videos. You seem so limitless. Nevertheless, I give you my many thanks 🙏🏽

  • @poloff9120
    @poloff9120 Год назад +3

    I am waiting for this course to build new nextjs 13....i found may things in nextjs ebook...thank you.... recently i tagged in linkedin that i have build my blog application in React native by seen your React native job finder... thank you

  • @passionforlife27
    @passionforlife27 Год назад +2

    Love from India❤

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

    thanks for the content sir ❤ from india please keep uploading this type of content regularly

  • @KhalidKhan-wo7xg
    @KhalidKhan-wo7xg Год назад +1

    Sir I waiting for your channel video project impatiencly. 💜💜 great job

  • @loginet1
    @loginet1 Год назад +2

    That's freaking AMAZING!

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

    Not following any other tutorials of next js from weeks here we go thanks Adrian brother

  • @6.squash.936
    @6.squash.936 Год назад +1

    Return of the King

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

    🎉 ADRIAN, A SAVIOR

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

    on figma everthing is normal but when i click preview in this screen button size changes and incompatible with each other why is this happening?

  • @prosperdeogratius4888
    @prosperdeogratius4888 Год назад +2

    My godnes,was actually thinking of this,just few minutes ago.Thank you so much man

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

    you bro are amazing! every project is just out of this world! keep going!

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

    be my mentor wish i really had money to be on your online classes, love you so much🥰 from nigeria

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

    Woow...Another amazing course tutorial from this Channel..i jus love this guy......Everyone commenting hope y'all subscribed to this amazing content....and recommend others to do so not to miss out on this...

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

    Thanks for these Amazing courses Andrian...

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

    Up until now I really didn't think that AI is going to replace humans anytime soon but this just changed my perception. There are just a few thing remaining that needs a fronend developer's supervision otherwise...

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

      This is used only as a basic template, the functionality is completely different, and as a modern frontend developer you need to do efficient code, dynamic components and applying clean code, this kind of tool are very useful, but you need to know what you're doing, I think is a useful tool, just as a bought template, but the business logic and client requirements are always the hard part to implement and make it tangible, this kind of tool doesn't cover that.

  • @harsh-alashi
    @harsh-alashi Год назад +1

    Back again with awesome tutorial. Thanks!
    Is the MERN stack course coming?

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

    Okay this is really awesome but I wanna know what kind of figma design it works with. Like is it necessary to create a totally professional figma design?

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

    Amazing videos... Thank you for always being so up to date...

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

    i remember you did a poll asking us what kinda videos we wanted and the majority vote was typescript + mern stack. please tell me they are coming?🥺 ive been waiting in anticipation ever since.

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

    Another project and some new strategy!

  • @Pablo_JRE
    @Pablo_JRE Год назад +4

    Great video like always!! keep it up. I would love to see some more vue videos in the future

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

    I really don't understand why all the low code tools come to propose the same thing as wordpress. And that is to design in the most cumbersome way possible by clicking 50 options for something that you can do in a few lines of code. If this video started with a blank canvas it would last 5 hours.

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

    I cannot thank you enough in words

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

    Did anyone find that when they went to export and sync to Github that it missed the landing-page.js? I only have the _app.js page 😕

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

    Amazing revolution. AI never replace developer, it supports developer!
    Am I right?

  • @imraj9018
    @imraj9018 Год назад +2

    Hi, great video! Is it possible to use this tool to build a commercial application - will you own all rights to the content created?

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

    Great Video, please make a video Airbnb clone with nextjs and typescript if you can, it would be great.❤ Thank you for your dedication and consistency.

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

    What?! This is the future!

  • @realkidding1213
    @realkidding1213 Год назад +2

    Please make a short video about, why we need to use Typescript 😅

  • @koen.mortier_fitchen
    @koen.mortier_fitchen Год назад

    Thank you for your work, Sir. I loved it!

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

    Request:This time we want a project on combination of blockchain and AI

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

    Do you use this tool for rest of videos in channel?

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

    You are legend sir , thank you 😘💛

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

    Thanks Adrian! Would you mind sharing the repo for this, please?

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

    what to add as company url when signing up for locofy. I'm not on a job or have any portfolio website

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

    plz post a video about any educational react app using locofy using sanity (like online course learning , college ) .. or design any mern or mean stack realtime applications using locofy . ( responsive ). is it possible design an app using locofy plugin in figma and design them in andriod studio.??

  • @johnsondsouza4722
    @johnsondsouza4722 Год назад +2

    its not the latest version of nextjs and i think this would be more helpfull in making some complex ui components faster rather than a whole web app great tool

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

    Will it can be integrated with Visual Studio 2022 ?

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

    Pls can u now do a figma web design tutorial? maybe using ai if it makes it faster/easier, so that it can be more complete

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

    I bet that the part at 2:25 is stolen from Fireship 🤣
    Great video anyways👍

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

    did you know why at 55:00 const result = await client.from("properties").select("*") return me an empty array?

  • @jawadkhan1907
    @jawadkhan1907 Год назад +3

    I clicked the video 10x faster

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

    Niiiice! I didn’t know about these Ai tools until recently. Have you tried Bifrost before?

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

      Nice where's is the art in programming thank you for destroying my future ai

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

      AI will only make developers more efficient! :)

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

      Very true! It only helps get more work done in less time

  • @muhammadatif-dk4tx
    @muhammadatif-dk4tx Год назад

    Awsome video very helpful

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

    josss sir

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

    Thanks for all Adrian , For ur next course please can you make Ai based human image to animation changer ..Please ...❤

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

    Hii i was creating a web 3.0 project watching your tutorial but I am not getting the exact output the same as yours. Can you please update the code

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

    possible to let locofy to generate Appdir way instead of pages way?

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

    Good job ❤ another one

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

      Thank you! Cheers!

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

      Build a React project for supervising student projects can be a beneficial and efficient way to manage and track the progress of students' work without the paper work.

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

    Hi there could me tell me which version of vscode is used in this project

  • @ugulfam4603
    @ugulfam4603 Год назад +90

    My Allah is with me always Allhamdullah 😊

    • @developer_hadi
      @developer_hadi Год назад +5

      Masha'allah allahuma barek

    • @developer_hadi
      @developer_hadi Год назад +2

      @@Rae_895 It's out of your business, say good or shut up

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

      @@developer_hadi thank u brother ❤

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

      ​@@developer_hadi😊

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

      ​@@developer_hadiwhile being aggressive why ask others to not be agressive

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

    What are the tools you use to make such beautiful pdf

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

    @Adrian waiting for a Memories like project with more advanced features with frontend and backend in typescript with Next.

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

    can you pls tell me which file icon theme you are using in vs code

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

    Hey, thanks for the video!
    Just wondering, can you get different API KEY for CarHUb? The current one does not work.

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

      You can get a new one by following the link in the description :)

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

    Please make a video for theme settings of mui in react js. With dark and light mode.

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

    Which vscode theme do u use?

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

    Who actually taking the world Mr Adrian or JavaScript 🤔🤔

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

    Thank you sir you are great

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

    This is Lovely 🎉

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

    You expected 1M subscribers at least.

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

    This AI extension is not working properly anymore. It will not recognize the 2nd page component for me no matter what I. Just an FYI. AI still has a ways to go, nice vid!

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

    Finally ❤

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

    broo i learned react js , react native and next js . but now after seeing this i got doubt will figma affect web developers ?? . because it is producing code from design . letss see it ....

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

    Thats something i was looking for

  • @itskrish0196
    @itskrish0196 Год назад +2

    Amazing

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

    I really wanna know what is that tool at 0:54 you are using for testing responsiveness. I tried finding, no success. Please let me know if anybody knows.

  • @Alpha-ou1ks
    @Alpha-ou1ks 6 месяцев назад

    can you please add more videos using locofy?

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

    Hey JSM, can you make a video on Discord Bot List ily you're video tho

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

    The only good use case that I see to apply this, is to design components (1 by 1), then extract the code and copy/paste each component into a created project made with React etc, like building legos, otherwise you will get tons of boilerplate code into your project. Doing a complete project from scratch with this technology is like a pain in the *ss if you ask me, I don't like it. Thanks for the video, this will be so helpful anyways!.

    • @javascriptmastery
      @javascriptmastery  Год назад +4

      Did you check it out? The generated code for the full app is actually pretty close to what a real developer would write.

    • @spaceshipdev
      @spaceshipdev 10 месяцев назад

      ​@@javascriptmasteryI agree, it does come close for sure, especially when using Tailwind, though I think what bernhardsilva is saying is; he prefers to use this for additions to a site, not build a site from scratch.
      I'm the same actually. I think this tool absolutely has a future, but learning Locofy on top of the already many awesome frameworks out there should not be the priority or mistaken for a tool to base a business off.
      I'd wait for it to leave beta and for them to reveal actual pricing before getting into this.
      I saw this video and watched it half way through before realizing, wait. This is not something I can rely on yet, invest time into it IF it gets released.
      That said though, I AM a fan of this channel and intend to proceed with you're other content!
      4 sites in 10 hours has my attention.

  • @igors.2943
    @igors.2943 Год назад

    Cool!!! Feeling excitement mixed with fear ... Looks like soon frontend developer role will be combined with web designer or maybe full stack..or even something like: fullstack product manager / designer / developer ))) ... So maybe we still have a little time, before AI fully replaces us... Keep in mind, it's GPT-4 powered plugin... What will happen when GPT-5 will be released?... GPT-6?...etc...

  • @christian-schubert
    @christian-schubert Год назад

    Telling AI to translate natural language or designs into framework code that is then turned into Javascript is a bit like booking a flight from London to Paris with a layover in Hawaii.
    A framework's foremost task is to facilitate writing code in the first place, an issue largely mitigated by AI. In many cases, this comes at the expense of speed and/or data/file size.
    Now, if you're working in a large team and have to use certain frameworks, this approach of course seems legit.
    However, when working on a smaller project (whatever that might be), relying on frameworks in conjunction with AI is becoming increasingly bizarre...

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

    Where can I find figma design of différents website ?
    Différents design library

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

    my vscode and your Vscode is different could you tell me which vscode you are using I am using Vscode 1.80 version in windows in hp laptop

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

      Please answer

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

      In my VScode GIT is not present and some other features that are present in your vscode as shown in this project

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

      37:22 here you can see at left corner .git is present but it is not visible in my VScode

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

      Are you using VScode in mac

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

      Please answer

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

    What website was that used to see all mobile responsive modes?

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

    Should this be scary, or I should just chill out and enjoy the ride?
    I think it's time to start considering a switch to CySec.

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

      Chill out and enjoy the ride! 😊

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

      what makes you think CySec is better lol

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

      @@IvanRandomDude web has been too perforated with these tools and we all know that networking and security, on the other hand, is a different kind of animal.

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

    can you make an ICO page?

  • @mohammadahmadian-f1m
    @mohammadahmadian-f1m Год назад

    you are perfect