Locofy.ai | Building a full stack travel app with Figma, Locofy and Hasura
Вставка
- Опубліковано 14 лип 2024
- Learn how to go from a Travel app ✈️ Figma design to a full stack app 📱🖥 by using Locofy.ai to generate frontend code, and Hasura to generate your backend.
Stack Details:
🎨 Design - www.figma.com/
🖥 Frontend - Locofy.ai generated React code: www.locofy.ai/ (FREE BETA)
⚙️ Backend - hasura.io/
🌐 Deployment - www.netlify.com/
Grab a copy of the FickleFlight Travel app sample project project:www.figma.com/community/file/...
00:00 Introduction
00:45 Opening the Locofy Plugin
01:36 Tagging your layers
06:40 Auto-tag with LocoAI
07:41 Responsiveness
09:07 Syncing your designs to Locofy Builder
09:40 Introduction to Locofy Builder
10:52 Creating components and adding props
14:13 View & share live responsive prototype
15:22 Deploy or Export your code
16:36 Extending your code with data and logic
18:28 Creating your backend with Hasura
19:40 Creating your database tables
23:58 Creating your API Queries and adding it to the generated code
33:32 Viewing the full-stack app
![Locofy.ai | Generate components for existing repositories [Webinar]](http://i.ytimg.com/vi/bX7zAN9wQuQ/mqdefault.jpg)
![Locofy.ai | Create a YouTube Clone with Locofy & Figma [Quick Build]](/img/n.gif)
this is amazing thank you Locofy!
Thanks @mellyvfx! Let us know if you need any help!
Great video and great software! I will definitely give it a go! Keep posting videos about it! What a great solution 🙏
Thanks for your kind words!
Great indeed Thanks Locofy! am busy eith an ERP System can you do a similar video on how Locofy with Hasura can do this. Thanks a million Locofy this is a Game changer indeed
Thanks for the request! Is there anything missing from this video that you would like to learn more about?
In here, our goal is to show you some samples of retrieving data from Hasura and populating the frontend code. Are there other use cases you'd like to see covered?
Coming from someone that have been coding for 15+ years I can say this is amazing, break through solution.
I have a question though: Let's say you've customized a component and is happy with it. Then you make a change on the Figma file, once you export, will it overwrite the customised component?
Or if you've changed a component on Figma that have not been customised , but upon exporting will it overwrite any customised components? How would that work.
Overall its pretty amazing, I'm looking forward to test it out on my next project. Thank you
Hi Gustavo, that's a great question and something that we're trying to solve. At the moment, you can try to break your design into smaller components in the Locofy Builder, so that when the design changes, it will result in minimal overwriting.
We're also working on direct integration with APIs from within Locofy, so that would mean that some of the logic sits in Locofy and that would be preserved in subsequent code exports
@@locofy_ai Its inevitable you'll have modern web DSL editors that will export backend code. So maybe thinking in terms of exporting from both Locofy and a DSL editor would enable you to think about how integrating continuous changes/versions to a project can be achieved. AMAZING work
it's an amazing product but as a front-end developer I can see some of the same issues that we run with pretty much every solution out there. Which is maintaining one single source of truth between the Views and Controllers. Certainly might solve the first iteration but if you want to keep consistency between UI and FrontEnd, it will be problematic. Still, the functionalities included are very powerful
Hi Gonzalo, we're working on a conflict merging solution right now so that your designs and codebase can remain in sync. This will be launched soon, do look out for it!
In my Figma, it doesn't have any styling & Layout and Actions. I can only select the UI library.
if you find progress, please share it here.
For our UI libraries, we don't yet offer styling and layout. To customise these UI libraries, you can go to step 2 and edit the properties.
Amazing , let's flutter the next
Flutter is on our roadmap, do stay tuned for it!
Have tutorial for how to make responsive ?? Locofy awesome 😎
We have some Full Build videos available that show you how to create a full responsive website/dashboard - you can check them out here:
ua-cam.com/video/6UIfbJfz1jI/v-deo.html
ua-cam.com/video/weKL9uQEVrY/v-deo.html
ua-cam.com/video/X7ws6QNxC6U/v-deo.html
We'll also be creating dedicated videos for responsiveness too, so do stay tuned for that!
Do you code locofy? Its brilliant !!! Thanks for share my friend
Hey Ivan! It's built by a team of talented developers and designers here at Locofy! Thanks for your kind words, will share it across with the team :)
@@locofy_ai any plan to manage data , auth , inside of locofy no code way?
@@bambanx Hi Ivan, we are planning to add API integrations and integrations with Databases and Authentication. For the moment, you will need to export the code to add these functionalities
can we connect Api's also ??
Yes we can.
@@AkshayKumar-ld9gj 👍👍👍
Thanks Akshay! And yes Swastic, you can easily extend the code to connect with API's, it's covered here at the timestamp 23:58
Is there Redux or mobx？
Hi @Young will, currently we do not support Redux or mobx. We'll investigate further into it to see if we're able to support these libraries