Transforming a Design into a Fully Responsive App in an Hour
HTML-код
- Опубликовано: 31 май 2024
- In this video, you’ll learn how to transform a stunning design into a fully functional application using AI in just minutes. We'll do that with the help of Locofy - an AI tool that turns designs into production-ready code.
⭐ Get started with Locofy.ai (in Free Beta): www.locofy.ai/?...
📚 Materials/References:
Figma Design: www.figma.com/file/T8oCzhs58e...
GitHub Gist: gist.github.com/adrianhajdin/...
Alongside building this application, you'll also learn how to leverage AI to ship websites faster and:
- Seamlessly convert your design into production-ready code
- Effortlessly switch between JavaScript and TypeScript
- Adapt to your preferred styling framework, such as Tailwind, CSS modules, Material UI, or Ant Design
- Switch libraries, you can transition between React, Next.js, Vue, or even React Native in a single click
Time Stamps 👇
00:00:00 - Intro
00:03:22 - Locofy Plugin
00:25:36 - Locofy Builder
00:32:09 - Export - Sync to GitHub
00:37:27 - Fixing the code a bit
00:53:00 - Implementing Logic & Functionality
01:14:28 - Design & code in sync
01:20:16 - Deployment
💼 Land your dream job with expert mentor guidance or get your money back. To find out more, apply here: jsmastery.pro/masterclass
💻 Join JSM on Discord - / discord
🐦 Follow JSM on Twitter - / jsmasterypro
🖼️ Follow JSM on Instagram - / javascriptmastery
💼 Business Inquiries: contact@jsmastery.pro
A perfect channel to learn with clean editing, perfect teaching and versatility.
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.
Your intros are the best on RUclips. Thanks for them!
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!
Great idea!
that would be amazing!
Another Masterpiece by the Master, thank you for your dedication and consistency. You are changing peoples lives all over the world!
Thank you!
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 🙏🏽
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!
Finnally a new video...
Your work is just amazing brother
And you are extemely talented
Love from India ❤
Love to India!
Bro you are amazing
fortnightly content, enough to practice and remember 😎
Amazing videos... Thank you for always being so up to date...
thanks for the content sir ❤ from india please keep uploading this type of content regularly
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.
Very welcome!
mind blowing lessons, i can't wait to try all the apps from your channel after this one🤯🤯🤯
you bro are amazing! every project is just out of this world! keep going!
That's the plan!
Thank you for your work, Sir. I loved it!
13 days have gone by, and I was wondering why you haven't uploaded the video yet. But it's finally here!
Every two weeks, like clockwork! :D
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.
Thanks, will do!
man you are a legend on youtube keep the good work
I was also nominated for next ebook. Thanks for that sir. I love your community.😗😗
Awesome! Thank you!
The best in the World. 😍
Thank you JSM 😍🥰🥰
Many people don't appreciate how this can boost web development process by alot, thanks for this awesome tutorial
It seems much slower, more cumbersome and inefficient than writing the code in the editor.
My godnes,was actually thinking of this,just few minutes ago.Thank you so much man
Thank you!
Love from India , your content is Amazing 😊
Thank you so much 😀
Back again with awesome tutorial. Thanks!
Is the MERN stack course coming?
Next.js 13 full stack course coming before :)
Thanks for these Amazing courses Andrian...
Thanks!
Sir I waiting for your channel video project impatiencly. 💜💜 great job
Thank you so much 😀
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 😕
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...
Thank you so much!
That's freaking AMAZING!
Thank you!
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.
Three people I like in Croatia they are Mirko Cro Cop (MMA fighter) , Antonio and Adrian. Nice vid as always
Haha, nice!
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?
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
You are most welcome
did you know why at 55:00 const result = await client.from("properties").select("*") return me an empty array?
You are legend sir , thank you 😘💛
You're welcome!
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
Great video like always!! keep it up. I would love to see some more vue videos in the future
More to come!
My mentor and teacher has dropped another video , gosh how can I ever repay you ☺️
You're doing a lot just by watching and commenting 😄
Awsome video very helpful
Good job ❤ another one
Thank you! Cheers!
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.
I cannot thank you enough in words
Thank you!
Hi there could me tell me which version of vscode is used in this project
I need your Job Search Live session video!
Thank you sir you are great
can you pls tell me which file icon theme you are using in vs code
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?
be my mentor wish i really had money to be on your online classes, love you so much🥰 from nigeria
Thanks! 😊
Thanks for all Adrian , For ur next course please can you make Ai based human image to animation changer ..Please ...❤
Thanks for the idea!
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...
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.
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
what to add as company url when signing up for locofy. I'm not on a job or have any portfolio website
🎉 ADRIAN, A SAVIOR
Thank you!
This is Lovely 🎉
Thank you!
Another project and some new strategy!
Thanks Adrian! Would you mind sharing the repo for this, please?
Hey, thanks for the video!
Just wondering, can you get different API KEY for CarHUb? The current one does not work.
You can get a new one by following the link in the description :)
possible to let locofy to generate Appdir way instead of pages way?
Return of the King
Thank you! 👑
Will it can be integrated with Visual Studio 2022 ?
Love from India❤
Love to India ❤️
Do you use this tool for rest of videos in channel?
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
Which vscode theme do u use?
Amazing revolution. AI never replace developer, it supports developer!
Am I right?
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.
Next.js + TypeScript is coming :)
Maybe when Vercel buys Express and MongoDB
@@javascriptmasteryMake E-commerce project please 🙏
Amazing
Thank you!
josss sir
Niiiice! I didn’t know about these Ai tools until recently. Have you tried Bifrost before?
Nice where's is the art in programming thank you for destroying my future ai
AI will only make developers more efficient! :)
Very true! It only helps get more work done in less time
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.
It's a chrome extension :)
What are the tools you use to make such beautiful pdf
Hi, great video! Is it possible to use this tool to build a commercial application - will you own all rights to the content created?
Yes, absolutely
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
Thanks for sharing that!
This is great
Thanks!
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
you are perfect
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.??
What?! This is the future!
Definitely! 😊
Please make a short video about, why we need to use Typescript 😅
Great idea!
Why it's not working with typescrpit?
@Adrian waiting for a Memories like project with more advanced features with frontend and backend in typescript with Next.
Coming soon!
Thats something i was looking for
Amazing!
Finally ❤
Yess! 🔥
I bet that the part at 2:25 is stolen from Fireship 🤣
Great video anyways👍
Request:This time we want a project on combination of blockchain and AI
Cool idea!
Where can I find figma design of différents website ?
Différents design library
Search the Web
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
Please answer
In my VScode GIT is not present and some other features that are present in your vscode as shown in this project
37:22 here you can see at left corner .git is present but it is not visible in my VScode
Are you using VScode in mac
Please answer
Please make a video for theme settings of mui in react js. With dark and light mode.
Great idea.
What website was that used to see all mobile responsive modes?
Responsive viewer chrome extension
thanks a lot for sharing.
Hope it remains free, maybe with some limitations
I hope so too
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...
Hey JSM, can you make a video on Discord Bot List ily you're video tho
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.
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...
You're the best!
thanks babe..
Not following any other tutorials of next js from weeks here we go thanks Adrian brother
Enjoy!
Is this inclue backend technology like mongodb or php ??
Supabase
@@javascriptmasterythank you
can you please add more videos using locofy?
I clicked the video 10x faster
Awesome! 😊
this is the best AI tool so sar made by pakistanis ❤
Bro you best programmer 🤩🤩🤩🤩
Please 🥺🥺🥺🥺🥺🥺
Thank you! 😊
Best
Who actually taking the world Mr Adrian or JavaScript 🤔🤔
❤️🎉